如何将新面板添加到现有的古腾堡文档侧边栏？

Question

我尝试将两个新面板添加到现有的古腾堡文档侧边栏。一个应该包含一个单选按钮菜单来设置标题图像的高度，另一个应该包含一个文本字段来输入页面的副标题。

但是因为我不想使用过时的元盒技术，所以几乎没有任何教程可以做到这一点。我只找到了以下一段代码，但我不知道如何根据我的需要来塑造它以及把它放在哪里;) - 我的编码知识还不够好，但我仍然需要在我的主题中实现这个功能.

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 1

首先，注册元字段，这样您就有了保存值的位置。这进入您的插件文件或functions.php。

register_post_meta('post', 'customname_meta_subtitle', array(
    'show_in_rest' => true,
    'type' => 'string',
    'single' => true
));

register_post_meta('post', 'customname_meta_header_height', array(
    'show_in_rest' => true,
    'type' => 'string',
    'single' => true
));

您可以查看documentation。我们告诉 WordPress 创建 2 个新的帖子元字段，键为 customname_meta_subtitle 和 customname_meta_header_height，我们将在 Gutenberg 部分中使用它们。

对于 ES 代码，您将需要以下内容：

const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost
const { RadioControl, TextControl } = wp.components
const { withState } = wp.compose
const { withSelect, withDispatch } = wp.data

let SubtitleControl = ({ subtitle, handleSubtitleChange }) => (
    <TextControl
        label="Set subtitle"
        value={subtitle}
        onChange={subtitle => handleSubtitleChange(subtitle)}
    />
);

SubtitleControl = withSelect(
    (select) => {
        return {
            subtitle: select('core/editor').getEditedPostAttribute('meta')['customname_meta_subtitle']
        }
    }
)(SubtitleControl);

SubtitleControl = withDispatch(
    (dispatch) => {
        return {
            handleSubtitleChange: (value) => {
                dispatch('core/editor').editPost({ meta: { customname_meta_subtitle: value } })
            }
        }
    }
)(SubtitleControl);

let HeaderImageHeightControl = ({ height, handleHeightChange }) => (
    <RadioControl
        label="Set image height"
        help="Set the height of the header image"
        selected={height}
        options={[
            { label: '100', value: '1' },
            { label: '200', value: '2' },
        ]}
        onChange={handleHeightChange}
    />
);

HeaderImageHeightControl = withSelect(
    (select) => {
        return {
            height: select('core/editor').getEditedPostAttribute('meta')['customname_meta_header_height']
        }
    }
)(HeaderImageHeightControl);

HeaderImageHeightControl = withDispatch(
    (dispatch) => {
        return {
            handleHeightChange: value => {
                dispatch('core/editor').editPost({ meta: { customname_meta_header_height: value } })
            }
        }
    }
)(HeaderImageHeightControl);

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

大部分代码在official WP tutorial 中进行了描述，但如果有任何不清楚的地方，请随时询问。

最后，要使用新值，您可以执行以下操作：

<h1><?php echo get_post_meta(get_the_ID(), 'customname_meta_subtitle')[0]; ?></h1>
<h1><?php echo get_post_meta(get_the_ID(), 'customname_meta_header_height')[0]; ?></h1>

这是在post模板文件中使用的，用于元字段信息的前端可视化。

我希望这会有所帮助！