Первый вопрос, который у вас может возникнуть: «Зачем мне создавать настраиваемые мета-блоки с помощью редактора блоков (Gutenberg)?». Вы все равно можете реализовать мета-блоки с помощью PHP и добавлять элементы управления в блок, пост или даже на пользовательскую боковую панель. в Гутенберге.
Есть несколько причин, по которым вы можете захотеть это сделать, в том числе:
- Некоторые блоки имеют сложные настройки, и просмотр мета-поля в режиме редактирования может упростить использование клиентом.
- Потому что вы можете захотеть изменить определенный аспект макета сообщения, например заголовок. Вы можете скрыть поле заголовка сообщения и заменить его настраиваемым мета-полем в верхней части страницы, а также иметь возможность контролировать все мета-сообщения, которые к нему относятся.
- Потому что вы можете использовать шаблоны блоков для размещения пользовательских мета-полей там, где вам нравится, чтобы они имели больше смысла в контексте.
- Потому что вы можете применить эти знания к другим аспектам разработки блочного редактора (Gutenberg).
В этом руководстве мы собираемся расширить то, что мы уже создали в нашем руководстве по метаполям сообщений. Вы можете использовать атрибуты блока, однако из-за природы мета-полей мы будем использовать мета-поля записей в этом руководстве.
Предпосылки
- Быть знакомым с созданием плагинов для WordPress Gutenberg
- Будьте знакомы с динамическими блоками и рендерингом на стороне сервера
- Будьте знакомы с использованием метаполей записей в WordPress Gutenberg.
Поскольку мы следуем руководству по мета-полям сообщений, оно уже использовалось register_metaдля создания нашего мета-поля сообщения, гарантируя, что мы установили show_in_restзначение true, и мы также установили источник нашего атрибута JavaScript metaи определили мета-ключ.
Осталось реализовать интерфейс.
Отредактируйте /src/edit.jsфайл, заменив @wordpress/componentsимпорт следующим:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Затем замените блок кода редактирования следующим:
export default function Edit( { attributes, setAttributes }) {
const { blockText } = attributes;
return (<div { ...useBlockProps() }>
<Panel>
<PanelBody
title={ __( 'Example Meta Box', 'wholesome-plugin') }
icon="admin-plugins"
>
<TextControl
label={ __( 'Example Meta', 'wholesome-plugin') }
help={ __( 'This is an example meta field.', 'wholesome-plugin') }
onChange={ (blockText) => setAttributes( { blockText }) }
value={ blockText }
/>
</PanelBody>
</Panel>
</div>
);
}
Теперь у нас есть Panel, а PanelBodyи а TextControl. Обратите внимание, что я добавил admin-pluginsк параметру icon, PanelBodyчтобы он соответствовал значку плагина.
Применение стилей
Замените SCSS /src/editor.scssследующим:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Если вы используете настраиваемый метабокс, созданный в Гутенберге, я бы рекомендовал поместить его с шаблоном блока, однако вы можете вставить его обычным способом, например так:
Использование пользовательского мета-бокса Gutenberg
После того, как вы создали свой метабокс, нет ограничений на то, что вы можете добавить в него. Вам доступна вся библиотека компонентов WordPress Gutenberg React, а также обширная библиотека внешних компонентов React (см. мою статью о добавлении select2 в ваш проект ).
Следующий пример — верхушка айсберга того, чего вы можете достичь:
Пользовательский метабокс с дополнительными метаполями
Чтобы построить это, вот код, который вам нужен:
Зарегистрируйте свои мета-поля в PHP
Откройте корневой PHP-файл плагина (в данном случае wholesome-plugin.php) и обновите файл, который register_metaмы добавили в предыдущем руководстве, следующим образом:
function wholesomecode_wholesome_plugin_register_post_meta() {
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_select',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text_2',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text_3',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_toggle',
[
'auth_callback' => '__return_true',
'default' => false,
'show_in_rest' => true,
'single' => true,
'type' => 'boolean',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );
Обновите атрибуты JavaScript
Откройте /src/index.jsи замените атрибуты, которые мы добавили в предыдущем руководстве, на следующие:
attributes: {
exampleSelect: {
meta: '_wholesomecode_wholesome_plugin_example_select',
source: 'meta',
},
exampleText: {
meta: '_wholesomecode_wholesome_plugin_example_text',
source: 'meta',
},
exampleText2: {
meta: '_wholesomecode_wholesome_plugin_example_text_2',
source: 'meta',
},
exampleText3: {
meta: '_wholesomecode_wholesome_plugin_example_text_3',
source: 'meta',
},
exampleToggle: {
meta: '_wholesomecode_wholesome_plugin_example_toggle',
source: 'meta',
},
},
Импорт компонентов
Отредактируйте /src/edit.jsфайл, заменив @wordpress/componentsимпорт следующим:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Обновите метод редактирования
Продолжайте редактировать /src/edit.jsфайл, заменив Editблок кода следующим:
export default function Edit( { attributes, setAttributes }) {
const {
exampleSelect,
exampleText,
exampleText2,
exampleText3,
exampleToggle,
} = attributes;
return (<div { ...useBlockProps() }>
<Panel>
<PanelBody
title={ __( 'Example Meta Box', 'wholesome-plugin') }
icon="admin-plugins"
>
<SelectControl
help={ __( 'An example dropdown field.', 'wholesome-plugin') }
label={ __( 'Example Select','wholesome-plugin') }
onChange={ (exampleSelect) => setAttributes( { exampleSelect }) }
options={ [
{
label: __( 'Please Select...', 'wholesome-plugin' ),
value: '',
},
{
label: __( 'Option 1', 'wholesome-plugin' ),
value: 'option-1',
},
{
label: __( 'Option 2', 'wholesome-plugin' ),
value: 'option-2',
},
] }
value={ exampleSelect }
/>
<TextControl
help={ __( 'This is an example text field.', 'wholesome-plugin') }
label={ __( 'Example Text', 'wholesome-plugin') }
onChange={ (exampleText) => setAttributes( { exampleText }) }
value={ exampleText }
/>
<PanelRow>
<TextControl
help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }
label={ __( 'Example Text 2', 'wholesome-plugin') }
onChange={ (exampleText2) => setAttributes( { exampleText2 }) }
value={ exampleText2 }
/>
<TextControl
help={ __( 'This control is inline.', 'wholesome-plugin') }
label={ __( 'Example Text 3', 'wholesome-plugin') }
onChange={ (exampleText3) => setAttributes( { exampleText3 }) }
value={ exampleText3 }
/>
</PanelRow>
<ToggleControl
checked={ exampleToggle }
help={ __( 'An example toggle.', 'wholesome-plugin') }
label={ __( 'Example Toggle', 'wholesome-plugin') }
onChange={ (exampleToggle) => setAttributes( { exampleToggle }) }
/>
</PanelBody>
</Panel>
</div>
);
}
Добавьте немного SCSS
Наконец, откройте /src/editor.scssфайл и замените его содержимое следующим:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
.components-base-control {
margin-bottom: 1rem;
select {
height: 2rem;
min-height: 2rem;
}
}
p {
all: unset;
}
}
- Посмотрите на создание вложенных дочерних блоков с
InnerBlocksкомпонентом - Посмотрите, как использовать настройки для хранения данных в таблице параметров в Гутенберге.