lzb.components.PreviewServerCallback.onChange
Fires in the editor after a block preview has been rendered with a new response. It is where a script starts up again on the fresh markup, the counterpart to the teardown in lzb.components.PreviewServerCallback.onBeforeChange.
It runs from an effect that skips the first render and then fires for every response, the first one included. A failed request counts as a response, and so does a block with no render callback, which renders as nothing, so the markup a handler is looking for is not guaranteed to be on the page.
The same effect lists the component's props among its dependencies, and the block that owns the preview hands it a fresh props object on every one of its renders. The action therefore fires again on renders where no new response arrived. A handler has to be safe to run repeatedly.
Attributes
| Name | Type | Description |
|---|---|---|
props | Object | props of the preview component |
| Name | Type | Description |
|---|---|---|
block | String | block name, for example lazyblock/slider |
attributes | Object | null | attributes sent for rendering, null when the caller passed none |
urlQueryArgs | Object | extra fields merged into the REST request body, {} by default |
onBeforeChange | Function | the component's own callback for the teardown that came before |
onChange | Function | the component's own callback, called immediately before this action |
withBlockProps | Boolean | whether the rendered markup is wrapped with the block props, false by default |
context | Object | block context sent to the server |
clientId | String | client id of the block, passed in by the caller and forwarded untouched |
Usage
wp.hooks.addAction(
"lzb.components.PreviewServerCallback.onChange",
"my.custom.namespace",
function (props) {
if (props.block !== "lazyblock/slider") {
return;
}
const node = document.querySelector(
`[data-block="${props.clientId}"] .my-slider`,
);
if (node && !node.mySlider) {
node.mySlider = new window.MySlider(node);
}
},
);Deprecated alias
lazyblocks.components.PreviewServerCallback.onChange fires immediately after this one, with the same single argument. It is kept so old integrations keep working. Do not add handlers to it in new code.
Guard on props.block and check the node before touching it, as the example does. The action fires for every previewed block on the page, not only the one being edited, and the !node.mySlider test is what keeps a repeat run from building a second instance on the same node.