До сих пор мы рассматривали боковую панель блока, добавляя InspectorControlsк нашим пользовательским блокам и добавляя элементы управления в боковую панель основного и стороннего блока с фильтрами и компонентами более высокого порядка. В этом руководстве мы рассмотрим добавление элементов управления на боковую панель поста.
Настройки отображения на боковой панели публикации
В этом руководстве мы собираемся создать элемент управления «Настройки отображения», который позволит только зарегистрированным пользователям просматривать сообщение при переключении.
Предпосылки
- Следовали руководству по созданию плагина для редактора блоков WordPress (Gutenberg).
- Прочтите предыдущие руководства по боковой панели (боковая панель для пользовательского блока и боковая панель для существующего блока) .
- Прочтите руководство «Использование метаполей записей для хранения атрибутов в редакторе блоков WordPress (Gutenberg)».
Регистрация метаданных сообщения в PHP
Пожалуйста, выполните шаги в руководстве по созданию плагина, чтобы дать нам наш первоначальный плагин, мы расширим его в нашем руководстве.
После того, как вы это сделали, давайте настроим метаданные поста, которые нам нужны для управления переключением разрешений. Откройте корневой файл плагина (в нашем случае wholesome-plugin.php) и добавьте следующий код:
function wholesomecode_wholesome_plugin_register_post_meta() {
register_meta(
'post',
'_wholesomecode_wholesome_plugin_require_login',
[
'auth_callback' => '__return_true',
'default' => false,
'show_in_rest' => true,
'single' => true,
'type' => 'boolean',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );
Если вы ознакомились с руководством по метаполям постов, оно должно показаться вам немного знакомым. Все, что он делает, это позволяет получить доступ к нашей мета-записи из редактора блоков (Gutenberg).
В вашем плагине создайте новую папку с именем componentsи создайте следующий файл /components/Sidebar.js. В этот файл вставьте следующий код:
import { ToggleControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { Component } 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 (<PluginDocumentSettingPanel
name="wholesomecode-wholesome-plugin-sidebar"
title={ __( 'Display Settings', 'wholesome-plugin') }
>
<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,
},
} );
} }
/>
</PluginDocumentSettingPanel>
);
}
}
Мы ToggleControlвидели это раньше в наших предыдущих руководствах по боковой панели, но панель, которую мы используем, немного новая. Мы используем PluginDocumentSettingPanel, чтобы указать, что этот элемент управления должен отображаться на боковой панели сообщения.
Также обратите внимание, что вместо извлечения атрибутов мы получаем наши метаданные с помощью следующего кода:
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
и мы сохраняем его с помощью нашего onChangeметода, используя этот код:
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
Это обновляет метаданные текущего поста. На самом деле он не будет сохранен, пока мы не сохраним наш пост, поэтому все сохранение выполняется за нас.
Осталась последняя вещь, которую нам нужно сделать с нашей боковой панелью сообщений, и это зарегистрировать ее. В начало /src/index.jsфайла добавьте следующее:
import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';
registerPlugin(
'wholesomecode-wholesome-plugin-sidebar',
{
icon: 'visibility',
render,
}
);
Нам действительно следует подумать об изменении структуры нашего плагина, чтобы код, регистрирующий блок, импортировался из другого файла, но для простоты мы будем использовать тот же файл.
Здесь мы используем registerPluginдля регистрации боковой панели. Мы передаем компонент боковой панели, который мы создали как метод «рендеринга», вместе со значком.
Добавьте логику скрытия, если вы вышли из системы
Еще раз откройте корневой файл плагина (в нашем случае wholesome-plugin.php) и вставьте следующий код. Есть гораздо лучшие способы сделать это, но я буду краток для примера:
function wholesomecode_wholesome_plugin_require_login() {
global $post, $wp_query;
if (is_admin() ||! is_singular() ||! $post) {
return;
}
if (is_user_logged_in()) {
return;
}
$login_required = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_require_login', true );
if (! $login_required) {
return;
}
$wp_query->set_404();
status_header( 401 );
}
add_action( 'wp', 'wholesomecode_wholesome_plugin_require_login' );
Этот код просто возвращает наш шаблон 404 и статус 401 (Unauthorized), если для параметра Toggle установлено значение true.
Давайте посмотрим на элементы управления боковой панели публикации в действии.
Управление разрешениями через боковую панель сообщений
В этом примере мы переключаем переключатель в положение true, просматриваем нашу страницу в новом (вышедшем из системы) окне браузера и после обновления видим, что она возвращает страницу 404, затем переключаем ее в значение false, обновляем и вуаля, пост снова виден. Магия Гутенберга!
- Посмотрите, как создать отдельную пользовательскую боковую панель .
- Посмотрите на создание вложенных дочерних блоков с
InnerBlocksкомпонентом - Взгляните на использование мета-полей сообщений в блоках Gutenberg (если вы еще этого не сделали) и настраиваемых мета-полях Gutenberg, управляемых компонентами.
- Посмотрите, как создать страницу настроек с помощью компонентов Gutenberg.