You’re not actually updating the block. You’re just updating the current state of the block component in the editor.
To have an option persist you need an attribute to store whether the option is toggled, and then you need to call setAttributes()
to save that attribute. This is what the editor will recognise as a change.
export default function Edit({ attributes, setAttributes }) {
const { blockcontent, hideContent } = attributes;
return (
<>
<InspectorControls>
<PanelBody>
<ToggleControl
label="Hide Content?"
checked={hideContent}
onChange={(checked) => {
setAttributes({ hideContent: checked });
}}
/>
</PanelBody>
</InspectorControls>
<BlockControls>
<AlignmentToolbar />
</BlockControls>
{/* ... */}
</>
);
}
Note how I’ve added hideContent
as an attribute, and use setAttributes()
to update its value. Make sure you also update your block.json to declare the new attribute.
For future reference, this is described in the documentation here.