lzb.constructor.general-settings.description

Filters the Description field of the block builder general settings. Append help text under it when your team has a house rule for the description, such as a length the block directory or a search index expects.

Attributes

settingsData.data is the whole block data, so data.description holds the current value and data.slug, data.icon, data.category and data.keywords 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. Description is the last of them, so anything appended here sits at the bottom of the general settings panel.

Usage

const { PanelBody } = wp.components;
 
wp.hooks.addFilter(
  "lzb.constructor.general-settings.description",
  "my.custom.namespace",
  function (element, settingsData) {
    const length = (settingsData.data.description || "").length;
 
    return (
      <>
        {element}
        <PanelBody>
          <p style={{ margin: 0, color: length > 155 ? "#cc1818" : "#757575" }}>
            {length} of 155 characters used.
          </p>
        </PanelBody>
      </>
    );
  },
);

The description reaches the front end only through block registration, so a rule enforced here is advisory. Nothing stops a block from being saved with a longer description. The builder renders the filtered value as {settingsDescription || null}, so returning false, null or an empty string removes the Description field along with anything you appended to it. The other four fields go through lzb.constructor.general-settings.slug, lzb.constructor.general-settings.icon, lzb.constructor.general-settings.category and lzb.constructor.general-settings.keywords.