如何在古腾堡的“文档”下添加新面板

Question

我正在尝试在文档选项卡下添加一个新的组件面板，例如类别，特色图像等。

Answer 1

他们现在添加了PluginDocumentSettingPanel SlotFill。

const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost
 
const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        Custom Panel Contents
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

Answer 2

add_meta_box可以解决这个问题，但context前提是您添加值为的-argument 'side'：

add_meta_box(
    'box-id-here',
    'Box Title Here',
    'createBoxHtml',
    'post',
    'side' ); // <-- this is important

啊哈，两天一无所获！

旧答案

根据本教程，我们可以添加自定义侧边栏并使用自定义表单输入填充它。

这是 React JSX 版本中的一个工作示例。这添加了一个元字段country：

const { registerPlugin } = wp.plugins;
const { PluginSidebar } = wp.editPost;
const { TextControl } = wp.components;
const { withSelect, withDispatch } = wp.data;

// Customized TextControl
const CustomMetaField = withDispatch( ( dispatch, props ) => {
    return {
        updateMetaValue: ( v ) => {
            dispatch( 'core/editor' ).editPost( {
                meta: {
                    [ props.metaFieldName ]: v
                }
            });
        }
    };
})( withSelect( ( select, props ) => {
    return {
        [ props.metaFieldName ]: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaFieldName ]
    };
} )( ( props ) => (
    <TextControl
        value={props[ props.metaFieldName ] }
        label="Country"
        onChange={( v ) => {
            props.updateMetaValue( v );
        }}
    /> )
) );


// Our custom sidebar
registerPlugin( 'custom-sidebar', {
    render() {
        return (
            <PluginSidebar
                name="project-meta-sidebar"
                title="Project Meta">
                <div className="plugin-sidebar-content">
                    <CustomMetaField metaFieldName="country" />
                </div>
            </PluginSidebar>
        );
    },
} );

在 PHP 中，在init-hook 中注册 meta 字段：

register_meta( 'post', 'country', [
    'show_in_rest' => TRUE,
    'single' => TRUE,
    'type' => 'string'
] );

我知道：

这仍然不是必需的解决方案，但差不多。

Answer 3

add_meta_box 为 gutenberg 编辑器添加了一个新面板