Как добавить новую панель во вкладке Document в редакторе?

ВОПРОС

В Gutenberg мне нужно добавить новую панель на вкладке Document. Это может быть панель для работы с изображениями, категориями и т.д. В общем, вы можете подсказать, как это можно реализовать?

ОТВЕТ

С недавних пор стало возможным использовать новые настраиваемые хуки, вроде useSelect и useDispatch. Поэтому мы будем пользоваться ими для того, чтобы решить твою проблему.

import { __ } from ‘@wordpress/i18n’;
import { useSelect, useDispatch } from ‘@wordpress/data’;
import { PluginDocumentSettingPanel } from ‘@wordpress/edit-post’;
import { TextControl } from ‘@wordpress/components’;
const TextController = (props) => {
const meta = useSelect(
(select) =>
select(‘core/editor’).getEditedPostAttribute(‘meta’)[‘_myprefix_text_metafield’]
);
const { editPost } = useDispatch(‘core/editor’);
return (
<TextControl
label={__(“Text Meta”, “textdomain”)}
value={meta}
onChange={(value) => editPost({ meta: { _myprefix_text_metafield: value } })}
/>
);
};
const PluginDocumentSettingPanelDemo = () => {
return (
<PluginDocumentSettingPanel
name=”custom-panel”
title=”Custom Panel”
className=”custom-panel”
>
<TextController />
</PluginDocumentSettingPanel>
);
};
export default PluginDocumentSettingPanelDemo;

Само собой, вместе с этим кодом ты должен зарегистрировать метаполе:

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’);

Также убедись, что в supports у тебя есть custom-fields:

‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’, ‘revisions’, ‘custom-fields’),

Надеюсь, что у тебя сработает этот способ.