Gutenberg使用PluginPostStatusInfo添加复选框

时间:2020-11-27 作者:fightstarr20

试图取代post_submitbox_misc_actions 使用古腾堡,我有以下。。。。。

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 } );
这很好,并且正在增加PostStatus Info SlotFill 将文本放置到侧栏中的正确位置。但我不是在尝试添加一个复选框,可以与帖子一起保存。

有人能给我举个例子吗?我可以只添加一个HTML复选框,还是需要以更自然的方式添加?

我是否需要在储蓄方面做任何不同的事情,或者我可以只使用save_post 像经典编辑器一样的动作?

1 个回复
SO网友:Mike Szczys

这个周末我碰巧在做同样的事情。这里是the relevant documentation 这就是你所需要的一切。我使用的是ToggleControl,但它与使用CheckboxControl非常相似。我会在下面粘贴代码,但您也会发现this extensive tutorial 非常有帮助。

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>
);
保存和检索数据的基本代码:

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

相关推荐