lzb.constructor.controls.item
Filters the finished card of one control in the block builder's Controls list, after the icon, the label, the name and the duplicate and remove buttons are already in it. Use it to put extra markup next to a card, for instance a badge marking the controls that write to post meta.
Attributes
| Name | Type | Description |
|---|---|---|
controlsItem | JSX | the card element, a div carrying the drag handle and buttons |
props | Object | data, id, controls, updateData, addControl, removeControl, printControls |
| Name | Type | Description |
|---|---|---|
data | Object | the control's own settings: type, name, label, required, save_in_meta and the rest |
id | String | key of this control inside the block's controls object |
controls | Object | every control on the block, keyed by id |
updateData | Function | merges settings into this control, updateData({ label: "New label" }) |
addControl | Function | adds a control, taking its settings and the id to sort it after |
removeControl | Function | deletes this control and every control whose child_of points at it |
printControls | Function | renders the nested list, taking childOf and placement |
Additional Filters
| Name | Description |
|---|---|
lzb.constructor.controls.CONTROL_TYPE.item | one control type only, and it runs before the generic filter |
Usage
wp.hooks.addFilter(
"lzb.constructor.controls.item",
"my.custom.namespace",
function (controlsItem, props) {
if (props.data.save_in_meta !== "true") {
return controlsItem;
}
const metaName = props.data.save_in_meta_name || props.data.name;
return (
<div className="my-control-item-with-meta">
{controlsItem}
<span className="my-control-item-meta-badge">meta: {metaName}</span>
</div>
);
},
);The card keeps the ref and the style that useSortable puts on it, so wrapping it the way the example does leaves the drag transform on the inner element while the outer one stays still. When all you want is a class name or a data- attribute, filter the props instead with lzb.constructor.controls.item-attributes, which runs before the element is built and keeps the card as the single node.