Мы рассмотрели пользовательские боковые панели блоков, сторонние боковые панели блоков с помощью InspectorControls и способы добавления элементов управления на боковую панель публикации. В этом руководстве мы рассмотрим размещение элементов управления на их собственной боковой панели.
Наша пользовательская боковая панель
На скриншоте выше показано, что мы собираемся построить. По большей части мы просто немного изменим код, созданный нами в руководстве Post Sidebar, поэтому сначала убедитесь, что вы выполнили это руководство.
Предпосылки
- Следовали руководству по созданию плагина для редактора блоков WordPress (Gutenberg).
- Прочтите предыдущие руководства по боковой панели (боковая панель для пользовательского блока и боковая панель для существующего блока) .
- Следовали инструкциям по добавлению элементов управления на боковую панель сообщений с помощью руководства PluginDocumentSettingPanel.
Мы собираемся использовать код из руководства Post Sidebar, поэтому, если вы еще не заполнили это руководство, сделайте это. Все в порядке, я подожду.
Откройте /components/Sidebar.jsфайл, который вы создали в предыдущем руководстве. Мы собираемся заменить строку, которая импортирует PluginDocumentSettingPanelследующий код:
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
Теперь замените разметку <PluginDocumentSettingPanel...на <PluginSidebar...и работа сделана! Верно?
Ну да и нет. Это дает нам боковую панель, но это уродливо! Нам нужны некоторые панели, чтобы элементы управления были отформатированы правильно.
Также отсутствует боковая панель в меню «Параметры». Чтобы решить эту проблему, нам нужно реализовать PluginSidebarMoreMenuItem.
Отредактируйте /components/Sidebar.jsеще раз и вставьте следующий код:
import { Panel, PanelBody, ToggleControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
export default class Sidebar extends Component {
render() {
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
return (<Fragment>
<PluginSidebarMoreMenuItem target="wholesomecode-wholesome-plugin-sidebar">
{ __( 'Display Settings', 'wholesome-plugin') }
</PluginSidebarMoreMenuItem>
<PluginSidebar
name="wholesomecode-wholesome-plugin-sidebar"
title={ __( 'Display Settings', 'wholesome-plugin') }
>
<Panel>
<PanelBody
title={ __( 'Display Settings', 'wholesome-plugin') }
icon="visibility"
>
<ToggleControl
checked={ exampleToggle }
help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }
label={ __( 'Require Login', 'wholesome-plugin') }
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
this.setState( { exampleToggle: value } );
} }
/>
</PanelBody>
</Panel>
</PluginSidebar>
</Fragment>
);
}
}
Это лучше, мы использовали тот же самый код, что и в нашем предыдущем примере с боковой панелью поста, но теперь он выглядит соответствующе.
Теперь, когда у нас есть наш код, не забудьте запустить npm startего, чтобы скомпилировать, и теперь он должен выглядеть следующим образом:
Наша пользовательская боковая панель в действии
Как и в нашем руководстве по плагинам на боковой панели, мы переключаем переключатель «Требовать вход в систему», обновляем пост, вышедший из системы, отключаем его и снова обновляем пост. При переключении мы не можем получить доступ к сообщению.
Название нашей боковой панели wholesomecode-wholesome-plugin-sidebar'. Если мы хотим, мы можем автоматически открывать и закрывать эту боковую панель из любого места в редакторе. Допустим, у нас есть кнопка с действием щелчка, которое делает это.
Код для динамического открытия боковой панели выглядит следующим образом:
wp.data.dispatch('core/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );
Точно так же мы можем динамически закрыть боковую панель следующим образом:
wp.data.dispatch('core/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );
- Посмотрите на создание вложенных дочерних блоков с
InnerBlocksкомпонентом - Взгляните на использование мета-полей сообщений в блоках Gutenberg (если вы еще этого не сделали) и настраиваемых мета-полях Gutenberg, управляемых компонентами.
- Посмотрите, как создать страницу настроек с помощью компонентов Gutenberg.