0

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?

1 Answer 1

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

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.