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

Question

我正在构建一个投资组合并需要添加一个画廊字段，没有找到在屏幕截图中添加自定义字段的方法，有人知道如何完成吗？

Answer 1

首先注册元字段（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
})

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