Ми розглянули користувацькі бічні панелі блоків, сторонні бічні панелі блоків через InspectorControls і те, як додати елементи керування до бічної панелі публікації. У цьому посібнику ми розглянемо розміщення наших елементів керування на їхній власній користувацькій бічній панелі.
Наша спеціальна бічна панель
На знімку екрана вище показано, що ми збираємося створити. Здебільшого ми збираємося лише трохи змінити код, створений у посібнику з бічної панелі публікацій, тому переконайтеся, що ви спершу завершили цей посібник.
передумови
- Дотримуйтесь посібника «Створення плагіна для редактора блоків WordPress» (Gutenberg).
- Прочитайте попередні посібники з бічної панелі (бічна панель для спеціального блоку та бічна панель для існуючого блоку )
- Дотримуйтесь посібника «Додати елементи керування до бічної панелі публікації за допомогою PluginDocumentSettingPanel».
Ми збираємося використати код із посібника з бічної панелі публікацій, тому, якщо ви не заповнили цей посібник, зробіть це. Все добре, я почекаю.
Відкрийте /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