lzb.editor.PreviewServerCallback.replaceNode
Filter called for every node while the editor preview parses the rendered block markup. Return a React element to put in place of the node, or the default null to leave the node to the standard handling.
Use it to give a custom component of your own the same treatment <InnerBlocks /> gets: written as a tag in the block code, turned into a real editor component in the preview.
Attributes
| Name | Type | Description |
|---|---|---|
customNode | JSX | null | replacement node, null by default |
domNode | Object | parsed node, with name, attribs and children |
data | Object | props, parserOptions, domToReact, prepareAttributes |
prepareAttributes converts the raw markup attributes the way the rest of the parser does: "true" and "false" become booleans, class becomes className.
Usage
wp.hooks.addFilter(
"lzb.editor.PreviewServerCallback.replaceNode",
"my.custom.namespace",
function (customNode, domNode, data) {
if (domNode.name !== "myComponent") {
return customNode;
}
const atts = data.prepareAttributes(domNode.attribs);
return <div className={atts.className}>{atts.label}</div>;
}
);Returning anything other than null stops the default handling for that node, so return the incoming customNode untouched for every node you do not care about.