lzb.constructor.controls.item-attributes
Filters the DOM props of a control card in the block builder controls list. Use it to add a class or a data attribute to the card so your own stylesheet or script can find that control.
Attributes
| Name | Type | Description |
|---|---|---|
controlsItemAttributes | Object | props spread onto the card <div> |
props | Object | addControl, removeControl, updateData, printControls, data, id, controls |
The default object has eight keys:
| Name | Type | Description |
|---|---|---|
className | String | lzb-block-builder-controls-item plus the undefined, selected and dragging modifiers |
onClick | Function | selects the control, which is what opens its settings sidebar |
role | String | none |
data-control-type | String | control type, for example text |
data-control-name | String | control name as entered in the builder |
data-control-label | String | control type again, the same value as data-control-type |
ref | Function | dnd-kit node ref that makes the card sortable |
style | Object | drag transform and transition |
props.data holds the settings of this control, props.id its uid, and props.controls every control on the block keyed by uid.
Additional Filters
| Name | Description |
|---|---|
lzb.constructor.controls.CONTROL_TYPE.item-attributes | specific controls only |
The type-specific filter runs first and the generic one receives its result, so a handler on lzb.constructor.controls.item-attributes can overwrite what a type-specific handler set.
Usage
wp.hooks.addFilter(
"lzb.constructor.controls.item-attributes",
"my.custom.namespace",
function (attributes, props) {
if (props.data.save_in_meta !== "true") {
return attributes;
}
return {
...attributes,
className: `${attributes.className} my-meta-control`,
"data-meta-name": props.data.save_in_meta_name || props.data.name,
};
},
);Spread the incoming object instead of building a new one. Dropping ref detaches the card from dnd-kit and the control can no longer be dragged into a new position, and dropping onClick makes the control unselectable so its settings never open. To change the rendered card rather than its props, use lzb.constructor.controls.item, which filters the finished element.