lzb.constructor.general-settings.icon

Filters the Icon field of the block builder general settings. Replace the default icon picker when your blocks must use icons from a set of your own instead of arbitrary Dashicons and SVG markup.

Attributes

settingsData.data is the whole block data, so data.icon holds the current value and data.slug, data.category, data.keywords and data.description hold the values behind the other four general settings. settingsData.updateData shallow merges the object you pass it into that block data.

The five general settings render in a fixed order: slug, icon, category, keywords, description. This filter changes what stands in the icon position, it cannot move the field.

Usage

Ignoring the incoming element replaces the field, which is how you narrow the choice to a fixed set.

const { PanelBody, SelectControl } = wp.components;
 
const MY_ICONS = {
  "dashicons-cart": "Cart",
  "dashicons-star-filled": "Star",
  "dashicons-megaphone": "Megaphone",
};
 
wp.hooks.addFilter(
  "lzb.constructor.general-settings.icon",
  "my.custom.namespace",
  function (element, settingsData) {
    const { data, updateData } = settingsData;
 
    return (
      <PanelBody>
        <SelectControl
          label="Icon"
          value={data.icon || ""}
          options={[
            { label: "Select icon", value: "" },
            ...Object.keys(MY_ICONS).map((value) => ({
              label: MY_ICONS[value],
              value,
            })),
          ]}
          onChange={(value) => updateData({ icon: value })}
        />
      </PanelBody>
    );
  },
);

A replacement has to write to data.icon itself, because the element you dropped was the only thing calling updateData({ icon }). The builder renders the filtered value as {settingsIcon || null}, so returning false, null or an empty string removes the Icon field and the block keeps whatever icon it already has. The other four fields go through lzb.constructor.general-settings.slug, lzb.constructor.general-settings.category, lzb.constructor.general-settings.keywords and lzb.constructor.general-settings.description.