0

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>
        );
    }
}
0

2 Answers 2

1

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;
0

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

2
  • Thank you for your hints. I managed to find a solution and edited it above. Feb 19, 2022 at 10:26
  • @ThomasZwirner can you post your solution as a solution rather than an edit? The site doesn't know that you found your answer if you edit it into the question
    – Tom J Nowell
    Feb 19, 2022 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.