CheckboxControl does not visible change

Question

CheckboxControl does not visible change

Thomas Zwirner

2022年2月21日 14:23

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

Topic block-editor sidebar Wordpress

Category Web

Thomas Zwirner · Accepted Answer · 2022年2月19日 18:10

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;

Tom J Nowell · Accepted Answer · 2022年2月19日 01:42

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

CheckboxControl does not visible change

About