lzb.components.PreviewServerCallback.onBeforeChange
Fires in the editor the moment a block preview response arrives, before the old markup is replaced. It is where a script tears down whatever it attached to that markup, a slider instance or an event listener on a node that is about to disappear.
The action runs on both paths, after a successful render and after a failed request, and only for the response of the newest request. A response from a request that a later one has already replaced is dropped without firing it.
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, called immediately before this action |
onChange | Function | the component's own callback for the render that follows |
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.onBeforeChange",
"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.destroy();
delete node.mySlider;
}
},
);Deprecated alias
lazyblocks.components.PreviewServerCallback.onBeforeChange 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.
The markup is still on the page when this action runs, so a handler can read it. Anything that has to run against the new markup belongs in lzb.components.PreviewServerCallback.onChange instead, which fires after React has committed it.