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

问题描述

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

解决方法

首先注册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
})

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