In an attempt to replace the fucntionality of post_submitbox_misc_actions using gutenberg, I have the below.....

import { registerPlugin } from '@wordpress/plugins';
import { PluginPostStatusInfo } from '@wordpress/edit-post';
import { CheckboxControl } from '@wordpress/components';
 
const PluginPostStatusInfoTest = () => (
    <PluginPostStatusInfo>
        <p>Post Status Info SlotFill</p>
    </PluginPostStatusInfo>
);
 
registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );

This is working well and is adding PostStatus Info SlotFill text to the correct place in the sidebar. But not I am trying to add a checkbox in that can be saved with the post.

Does anybody have an example they can show me? Can I just add a HTML checkbox or do I need to do it in a more WP native way?

Do I need to do anything different with regards to saving or can I just use the save_post action like with the classic editor?

In an attempt to replace the fucntionality of post_submitbox_misc_actions using gutenberg, I have the below.....

import { registerPlugin } from '@wordpress/plugins';
import { PluginPostStatusInfo } from '@wordpress/edit-post';
import { CheckboxControl } from '@wordpress/components';
 
const PluginPostStatusInfoTest = () => (
    <PluginPostStatusInfo>
        <p>Post Status Info SlotFill</p>
    </PluginPostStatusInfo>
);
 
registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );

This is working well and is adding PostStatus Info SlotFill text to the correct place in the sidebar. But not I am trying to add a checkbox in that can be saved with the post.

Does anybody have an example they can show me? Can I just add a HTML checkbox or do I need to do it in a more WP native way?

Do I need to do anything different with regards to saving or can I just use the save_post action like with the classic editor?

• block-editor

1 Answer 1

I happen to be working on the same thing this weekend. Here is the relevant documentation that has most of what you need to get up and running. I'm using a ToggleControl but it is very similar to using a CheckboxControl. I'll paste code below but you will also find this extensive tutorial to be very helpful.

Define your toggle:

//Gutenburg toggle
let GutenbergToggle = (props) => {
    return (
        <ToggleControl
        label="Some Toggle Control"
        checked={ props.state }
        onChange={(value) => props.onBlockEditorToggleChange(value)}
        />
    )
}

Then add it to the panel:

const PluginPostStatusInfoTest = () => (
    <PluginPostStatusInfo>
        <p>Post Status Info SlotFill</p>
        <GutenbergToggle />
    </PluginPostStatusInfo>
);

Rudimentary code to save and retrieve the data:

GutenbergToggle = withSelect(
    (select) => {
        return {
            state: select('core/editor').getEditedPostAttribute('meta')['_use_block_editor']
        }
    }
)(GutenbergToggle);

GutenbergToggle = withDispatch(
    (dispatch) => {
        return {
            onBlockEditorToggleChange: (value) => {
                dispatch('core/editor').editPost({ meta: { _use_block_editor: value } });
            }
        }
    }
)(GutenbergToggle);