微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在WordPress Gutenberg块编辑器面板中添加和保存自己的自定义字段?

如何解决如何在WordPress Gutenberg块编辑器面板中添加和保存自己的自定义字段?

gutenberg default pane

我正在构建作品集,需要添加一个图库字段,没有在屏幕快照中找到在该字段中添加自定义字段方法,有人知道怎么做吗?

解决方法

首先注册meta字段(php):

register_meta('post','_my_meta_field',[
    'show_in_rest' => true,'single' => true,'type' => 'string','auth_callback' => function() {
        return current_user_can('edit_posts');
    }
]);
add_action('init','register_meta');

然后创建面板/字段(js):

const { TextControl } = wp.components
const { useDispatch,useSelect } = wp.data
const { PluginDocumentSettingPanel } = wp.editPost
const { registerPlugin } = wp.plugins

const PluginDocumentSettingPanelDemo = () => {
    const { meta } = useSelect(select => ({
        meta: select('core/editor').getEditedPostAttribute('meta')
    }))
    const { editPost } = useDispatch('core/editor')
    const setMeta = keyAndValue => {
        editPost({ meta: keyAndValue })
    }
    return (
        <PluginDocumentSettingPanel
            name="custom-panel"
            title="Custom Panel"
            className="custom-panel"
        >
            <TextControl
                onChange={ newValue => setMeta({ '_my_meta_field': newValue }) }
                value={ meta['_my_meta_field'] }
            />
        </PluginDocumentSettingPanel>
    )
}
registerPlugin('plugin-document-setting-panel-demo',{
    render: PluginDocumentSettingPanelDemo
})

无法测试,所以如果您遇到任何错误,请告诉我。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。