Wordpress Gutenberg PluginDocumentSettingPanel 不适用于控件？

Question

我想将自定义元字段添加到古腾堡文档面板并使用此文档。对于自定义元字段，我使用了本教程。我在尝试将它们放在一起时出现了问题。

到目前为止，这是我的代码：

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost
const { PanelBody, PanelRow, TextControl } = wp.components

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        <TextControl 
          value={wp.data.select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']}
          label={ "Text Meta" }
          onChange={(value) => wp.data.dispatch('core/editor').editPost({meta: {_myprefix_text_metafield: value}})}
        />
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

编辑：感谢伊万我解决了这个问题:)

---

我的侧边栏起初看起来不错：

但是当我尝试更改输入值时，它不会更新（但 wp.data 中的存储是）。我也删不掉 它保持在它的初始值。当我删除设置初始值的部分时，它的工作原理应该是这样，但由于我需要初始值，这对我来说不是一个选择；)

这是当我在输入末尾添加“x”时来自控制台的示例日志（如上所述，输入本身中的文本不会改变）

有谁知道如何使输入字段正常工作？

Answer 1

首先，请确保您已安装https://wordpress.org/plugins/gutenberg/插件，因为 PluginDocumentSettingPanel 尚未在核心 WP 中完全实现。根据这些推文，它应该是 5.3 版本。

其次，您不需要 wp.plugins 的间隔函数。最初未定义的原因是 WordPress 不知道您需要先加载 wp-plugins。来自WordPress 文档

如果您想使用编辑器模块中的 PlainText 组件，首先您需要在将脚本排入队列时指定 wp-editor 作为依赖项

这同样适用于所有其他模块（阅读脚本，如“wp-plugins”）。在注册 js 插件脚本时，您必须添加“wp-plugins”脚本作为依赖项：

<?php

/*
Plugin Name: Sidebar plugin
*/

function sidebar_plugin_register() {
    wp_register_script(
        'plugin-sidebar-js',
        plugins_url( 'plugin-sidebar.js', __FILE__ ),
        array( 'wp-plugins', 'wp-edit-post', 'wp-element' ) // <== the dependencies array is important!
    );
}
add_action( 'init', 'sidebar_plugin_register' );

function sidebar_plugin_script_enqueue() {
    wp_enqueue_script( 'plugin-sidebar-js' );
}
add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );

上面的 PHP 取自官方 WP 文档。

我还建议彻底阅读来自 Css Tricks 的这个很棒的教程。它深入介绍了仅使用@wordpress/scripts包设置 ESNext 环境。它会检查依赖项，添加元字段等等:) 我希望这会有所帮助！

--------------- 初步回答到此结束 ---------------

编辑：在测试了作者的代码后，我发现了几个问题。首先，TextControl 缺少结束标记。其次，我从 wp-data 包中添加了高阶组件，然后我用它来“增强”TextControl，使其不直接操作或读取数据，而是将该逻辑抽象为它的高阶组件。代码如下所示：

const { __ } = wp.i18n;
const { registerPlugin } = wp.plugins;
const { PluginDocumentSettingPanel } = wp.editPost;
const { TextControl } = wp.components;
const { withSelect, withDispatch, dispatch, select } = wp.data;
// All the necessary code is pulled from the wp global variable,
// so you don't have to install anything
// import { withSelect, withDispatch, dispatch, select } from "@wordpress/data";
// !!! You should install all the packages locally,
// so your editor could access the files so you could
// look up the functions and classes directly. 
// It will not add to the final bundle if you
// run it through wp-scripts. If not, you can
// still use the wp global variable, like you have done so far.



let TextController = props => (
    <TextControl
        value={props.text_metafield}
        label={__("Text Meta", "textdomain")}
        onChange={(value) => props.onMetaFieldChange(value)}
    />
);

TextController = withSelect(
    (select) => {
        return {
            text_metafield: select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']
        }
    }
)(TextController);

TextController = withDispatch(
    (dispatch) => {
        return {
            onMetaFieldChange: (value) => {
                dispatch('core/editor').editPost({ meta: { _myprefix_text_metafield: value } })
            }
        }
    }
)(TextController);

const PluginDocumentSettingPanelDemo = () => {
    // Check if a value has been set
    // This is for editing a post, because you don't want to override it everytime
    if (!select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']) {
        // Set initial value
        dispatch('core/editor').editPost({ meta: { _myprefix_text_metafield: 'Your custom value' } });
    }
    return (
        <PluginDocumentSettingPanel
            name="custom-panel"
            title="Custom Panel"
            className="custom-panel"
        >
            <TextController />
        </PluginDocumentSettingPanel>
    )
};
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

由于元字段注册时使用下划线作为名称中的第一个符号，WordPress 将不允许您保存它，因为它将其视为私有值，因此您需要在注册字段时添加额外的代码：

function myprefix_register_meta()
{
    register_post_meta('post', '_myprefix_text_metafield', array(
        'show_in_rest' => true,
        'type' => 'string',
        'single' => true,
        'sanitize_callback' => 'sanitize_text_field',
        'auth_callback' => function () {
            return current_user_can('edit_posts');
        }
    ));
}
add_action('init', 'myprefix_register_meta');

同样，所有这些都在Css 技巧教程中进行了解释。