lzb.constructor.control.settings-rows

Filters the rows of the control settings sidebar, the panel that opens in the block builder when a control is selected. Add a row when a control needs a setting the plugin does not ship, or rebuild the object to put your row next to a related one.

Attributes

rows holds 14 keys by default, in this order: label, name, type, control_specific_rows, default, help, placement, group, width, required, hide_if_not_selected, translate, save_in_meta, pro_notice. Every value is a React component type, not an element, and each one is rendered with controlTypeData plus everything in props.

props.data holds the settings of the selected control, props.id its uid, and props.updateData writes changes back to it.

controlTypeData comes from the control type registry and carries name, icon, type, label, category, restrictions and attributes.

Before rendering a row the builder reads controlTypeData.restrictions[key + '_settings'] and skips the row when that value is false. A key you add has no matching restriction, so your row shows for every control type. Guard on props.data.type when it only makes sense for one of them.

Usage

Key order is render order, so rebuilding the object is how a row lands at a chosen position. Conditional Logic appends its key to the end, and the Rich Text component inserts its notice directly after name this way.

const { TextControl } = wp.components;
 
function CharactersLimitRow({ data, updateData }) {
  return (
    <TextControl
      label="Characters limit"
      type="number"
      value={data.my_characters_limit || ""}
      onChange={(value) => updateData({ my_characters_limit: value })}
    />
  );
}
 
wp.hooks.addFilter(
  "lzb.constructor.control.settings-rows",
  "my.custom.namespace",
  function (rows, props) {
    if (props.data.type !== "text") {
      return rows;
    }
 
    const result = {};
 
    Object.keys(rows).forEach((key) => {
      result[key] = rows[key];
 
      if (key === "default") {
        result.my_characters_limit = CharactersLimitRow;
      }
    });
 
    return result;
  },
);

The filter runs only while a control is selected, and the result goes straight into Object.keys(). Returning null throws Cannot convert undefined or null to object and the settings sidebar stops rendering, so return the incoming rows when a handler has nothing to change.