lzb.constructor.wizard.templates
Filters the presets the block builder offers when creating a new block. Add your own starting point, or replace the collection entirely.
The filter runs on every render of the wizard rather than once at module load, so a script that registers its presets after the builder script still has them picked up.
Attributes
| Name | Type | Description |
|---|---|---|
templates | Object | presets, keyed by preset slug |
Each preset takes these keys:
| Name | Type | Description |
|---|---|---|
title | String | name shown in the wizard |
icon | JSX | null | icon shown beside the name in the wizard |
blockIcon | String | SVG markup used as the icon of the block being created |
category | String | block category, text by default |
keywords | String | comma-separated keywords for the created block |
description | String | block description |
controls | Array | controls to create, each with type, name, label, placement and any other control settings |
template | String | starting block code |
style | String | starting block styles, where __BLOCK_CLASSNAME__ stands for the generated class |
Usage
wp.hooks.addFilter(
"lzb.constructor.wizard.templates",
"my.custom.namespace",
function (templates) {
return {
...templates,
"pricing-card": {
title: "Pricing Card",
icon: null,
blockIcon: "",
category: "design",
keywords: "pricing,card,plan",
description: "A single pricing plan with a title and a price.",
controls: [
{
type: "text",
name: "plan-title",
label: "Plan Title",
default: "Starter",
placement: "inspector",
},
{
type: "text",
name: "plan-price",
label: "Price",
default: "$9",
placement: "inspector",
},
],
template: `<div useBlockProps>
<h3>{{plan-title}}</h3>
<p>{{plan-price}}</p>
</div>`,
style: `__BLOCK_CLASSNAME__ {
padding: 20px;
border: 1px solid #e0e0e0;
}`,
},
};
}
);The wizard preselects whichever preset comes first in the object, so nothing may assume a particular preset is present.