I use the following code to add a custom option in the Gutenberg-sidebar. Its visible and saving the Checkbox-value works.

But: if I click on the CheckboxControl nothing visible changes on it. If it is not checked and I want to check it, it does not go checked. The "Update"-button goes active and I see the checked Checkbox after it.

Why?

import { CheckboxControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { Component  } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export default class Sidebar extends Component {
    render() {
        const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
        const toggleState = meta['code'];

        return (
            <PluginDocumentSettingPanel
                name="code"
                title={ __( 'Display Settings', 'myplugin' ) }
            >
                <CheckboxControl
                    checked={ toggleState }
                    help={ __( 'My help.', 'myplugin' ) }
                    label={ __( 'My Label', 'myplugin' ) }
                    onChange={ ( value ) => {
                        dispatch( 'core/editor' ).editPost( {
                            meta: {
                                'code': value,
                            },
                        } );
                    } }
                />
            </PluginDocumentSettingPanel>
        );
    }
}

I use the following code to add a custom option in the Gutenberg-sidebar. Its visible and saving the Checkbox-value works.

But: if I click on the CheckboxControl nothing visible changes on it. If it is not checked and I want to check it, it does not go checked. The "Update"-button goes active and I see the checked Checkbox after it.

Why?

import { CheckboxControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { Component  } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export default class Sidebar extends Component {
    render() {
        const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
        const toggleState = meta['code'];

        return (
            <PluginDocumentSettingPanel
                name="code"
                title={ __( 'Display Settings', 'myplugin' ) }
            >
                <CheckboxControl
                    checked={ toggleState }
                    help={ __( 'My help.', 'myplugin' ) }
                    label={ __( 'My Label', 'myplugin' ) }
                    onChange={ ( value ) => {
                        dispatch( 'core/editor' ).editPost( {
                            meta: {
                                'code': value,
                            },
                        } );
                    } }
                />
            </PluginDocumentSettingPanel>
        );
    }
}

• block-editor
• sidebar

2 Answers 2

Solution found:

const { __ } = wp.i18n;
const { useSelect, useDispatch } = wp.data;
const { PluginDocumentSettingPanel } = wp.editPost;
const { CheckboxControl, PanelRow } = wp.components;

const Sidebar = () => {
    const { postMeta } = useSelect( ( select ) => {
        return {
            postMeta: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
        };
    } );
    const { editPost } = useDispatch( 'core/editor', [ postMeta.code ] );

    return(
        <PluginDocumentSettingPanel title={ __( 'Display Settings', 'myplugin') }>
            <PanelRow>
                <CheckboxControl
                    label={ __( 'My Label', 'myplugin' ) }
                    checked={ postMeta.code }
                    onChange={ ( value ) => editPost( { meta: { code: value } } ) }
                />
            </PanelRow>
        </PluginDocumentSettingPanel>
    );
}

export default Sidebar;

Because React is unaware that anything changed, all the props are the same, and so is the state, so no updates are needed. This is because you used select and dispatch directly from the @wordpress/data package.

You shouldn't use select and dispatch directly, you're meant to use the useSelect and useDispatch hooks.

You'll also need to convert this to a function based component, you can't use hooks with class based components