lzb.constructor.code-settings
The Code box in the block builder renders through six filters, one per part. Reach for them to put a control of your own in the code toolbar, or to fill the empty slot under the editor with a live preview.
There is no filter under the bare lzb.constructor.code-settings name. Every one of the six carries a suffix.
Available Filters
| Name | Description |
|---|---|
lzb.constructor.code-settings.output-method | the output method Select, or the plain CSS / JS label shown on a style or script tab |
lzb.constructor.code-settings.additional | the sliders dropdown, holding Unified Block Code, With Editor Style and Code Output in Editor |
lzb.constructor.code-settings.info | the question mark dropdown, a Notice describing the current output method |
lzb.constructor.code-settings.output-code | the toolbar and the code editor, null when the output method is Theme Template |
lzb.constructor.code-settings.output-template | the toolbar and the read-only theme file tree, null for every other output method |
lzb.constructor.code-settings.preview | an empty slot below the editor, null by default |
Attributes
| Name | Type | Description |
|---|---|---|
render | JSX | null | the element about to be rendered, different per filter |
data | Object | props, tab, setTab |
| Name | Type | Description |
|---|---|---|
props | Object | the Code box props: data, updateData, onTabChange |
tab | String | active tab: frontend, editor, block-style, editor-style or view-script |
setTab | Function | switches the active tab |
The block being edited sits one level deeper than it looks. Read it as data.props.data, not data.data, and write to it with data.props.updateData({ code_output_method: "php" }), which shallow-merges the object you pass in, replacing whole values rather than merging into them.
preview is handed null and has no core UI behind it, so it is a slot to fill rather than markup to change. Whatever it returns is wrapped in a Box under the code editor.
additional and info are the bodies of two Dropdown components, so they fire only while their dropdown is open, not on every render of the box.
output-method, additional and info render inside the toolbars that output-code and output-template return. Replacing either of those two therefore takes the output method selector and both dropdown buttons off the screen with it.
Usage
wp.hooks.addFilter(
"lzb.constructor.code-settings.info",
"my.custom.namespace",
function (render, data) {
if (data.props.data.code_output_method !== "php") {
return render;
}
return (
<>
{render}
<p className="description">
Render callbacks for this site live in <code>inc/blocks.php</code>.
</p>
</>
);
},
);The empty preview slot takes the same two arguments:
wp.hooks.addFilter(
"lzb.constructor.code-settings.preview",
"my.custom.namespace",
function (render, data) {
const controls = data.props.data.controls || {};
const names = Object.keys(controls)
.map((id) => controls[id].name)
.filter(Boolean);
if (!names.length) {
return render;
}
return (
<p className="description">
Available tags: {names.map((name) => `{{${name}}}`).join(", ")}
</p>
);
},
);Return render untouched for the cases you do not handle. Returning null from output-code or output-template empties the Code box for that output method, and returning a string instead of an element renders that string as text where the editor used to be.