lzb.constructor.general-settings.slug

Filters the Slug field of the block builder general settings. Wrap it to put a control of your own beside the slug, swap it for a picker, or return a falsy value to take the field off the screen.

Attributes

settingsData.data is the whole block data, so data.slug holds the current value and data.icon, 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 slug position, it cannot move the field.

Usage

Pro adds its namespace selector by wrapping the default element rather than replacing it.

const { PanelBody, ToggleControl } = wp.components;
 
wp.hooks.addFilter(
  "lzb.constructor.general-settings.slug",
  "my.custom.namespace",
  function (element, settingsData) {
    const { data, updateData } = settingsData;
 
    return (
      <>
        {element}
        <PanelBody>
          <ToggleControl
            label="Hide this block from the inserter"
            checked={data.my_hidden === "true"}
            onChange={(value) =>
              updateData({ my_hidden: value ? "true" : "false" })
            }
          />
        </PanelBody>
      </>
    );
  },
);

The builder renders the filtered value as {settingsSlug || null}, so returning false, null or an empty string removes the Slug field and nothing on that screen can edit the block slug any more. Returning a component function instead of an element makes React warn Functions are not valid as a React child and render nothing. The other four fields go through lzb.constructor.general-settings.icon, lzb.constructor.general-settings.category, lzb.constructor.general-settings.keywords and lzb.constructor.general-settings.description.