Прежде всего, убедитесь, что у вас установлен плагин https://wordpress.org/plugins/gutenberg/, потому что PluginDocumentSettingPanel еще не полностью реализован в базовом WP. Это должно быть для версии 5.3, согласно этим твитам .
Во-вторых, вам не нужна функция интервала для wp.plugins. Причина, по которой он сначала не определен, заключается в том, что WordPress не знает, что вам нужно сначала загрузить wp-плагины. Из документации WordPress
Если вы хотите использовать компонент PlainText из модуля редактора, сначала вы должны указать wp-editor как зависимость при постановке в очередь сценария
То же самое относится ко всем другим модулям (читайте сценарии, например, 'wp-plugins'). Вы должны добавить скрипт 'wp-plugins' в качестве зависимости, когда регистрируете свой скрипт плагина js:
<?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. В нем подробно рассказывается о настройке среды ESNext только с пакетом @ wordpress / scripts . Это касается зависимостей, добавления мета-полей и многого другого :) Надеюсь, это поможет!
--------------- Начальный ответ заканчивается здесь ---------------
Редактировать: После тестирования кода от автора я обнаружил пару проблем. Прежде всего, отсутствовал закрывающий тег для 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 tricks .