Поки що ми розглянули бічну панель блоків, додавши 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для реєстрації бічної панелі. Ми передаємо створений нами компонент Sidebar як метод «render» разом із піктограмою.
Додайте логіку «Приховати, якщо ви вийшли з системи».
Ще раз відкрийте кореневий файл плагіна (у нашому випадку 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 (неавторизовано), якщо для перемикача встановлено значення true.
Давайте подивимося на елементи керування бічної панелі публікації в дії.
Керування дозволами за допомогою бічної панелі публікації
У цьому прикладі ми перемикаємо перемикач у положення true, переглядаємо нашу сторінку в новому вікні браузера (вийшовши з системи) і після оновлення бачимо, що воно повертає сторінку 404, потім перемикаємо його в положення false, оновлюємо і вуаля, публікація знову відображається. Магія Гутенберга!
- Подивіться на створення окремої спеціальної бічної панелі
- Подивіться на створення вкладених дочірніх блоків за допомогою
InnerBlocksкомпонента - Подивіться на використання мета-полів публікації в блоках Гутенберга (якщо ви ще цього не зробили) і користувальницькі мета-блоки, керовані компонентами Гутенберга
- Подивіться на створення сторінки налаштувань за допомогою компонентів Gutenberg