Why is the Gutenberg editor not recognizing my updates?

Question

I'm currently working on a Gutenberg block that includes a toggle control to hide or show content. I'm following the WordPress developer documentation, and the block behaves correctly when I toggle the control in the editor. However, there's an issue where the editor is not recognizing the change made in the toggle control and I can't save/update the page with the changes. Here's the relevant portion of my code:

import React, { useState } from "react";
import { useBlockProps, RichText, BlockControls, AlignmentToolbar, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, ColorPicker } from "@wordpress/components";

// ...

export default function Edit({ attributes, setAttributes }) {
    const { blockcontent } = attributes;
    const [isTrue, setIsTrue] = useState(false);

    return (
        <>
            <InspectorControls>
                <PanelBody>
                    <ToggleControl
                        label="Hide Content?"
                        checked={isTrue}
                        onChange={() => {
                            setIsTrue((state) => !state);
                            console.log((state) => !state);
                        }}
                    />
                </PanelBody>
            </InspectorControls>
            <BlockControls>
                <AlignmentToolbar />
            </BlockControls>

            {/* ... */}

        </>
    );
}

The problem I'm facing is that even though the toggle control updates properly, the changes made are not recognized by the editor. It seems like the editor is not syncing with the control correctly.

Can someone please help me identify what might be causing this issue and suggest a solution to ensure the editor recognizes the toggle control updates?

Answer 1

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.