如何向现有的gutenberg文档侧边栏添加新面板？

Question

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

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

​

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

你可以检查一下文档。我们告诉WordPress创建2个新的post元字段，其中键为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
})

大部分代码都是在正式WP教程中描述的，但是可以随意询问是否有什么不清楚的地方。

最后，要使用新值，可以这样做：

<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模板文件中使用，用于元字段信息的前端可视化。

我希望这能帮到你!