29 Фев
Поля произвольных данных (метабоксы) служат для добавления дополнительной информации к контенту вашего сайта. Эта информация, известная как метаданные, позволяет расширить функциональность и возможности вашего веб-ресурса. В этой статье мы рассмотрим как добавить метабоксы для Гутенберг.
Метаданные – это информация об информации. В контексте WordPress они связаны с записями, пользователями, комментариями и рубриками.
Благодаря многообразию метаданных в WordPress, ваши возможности практически безграничны. Вы можете создавать столько пользовательских полей, сколько вам требуется, и хранить в них практически любую информацию.
К сожалению, по умолчанию WordPress не предоставляет простой способ добавления и управления полями произвольных данных. В классическом редакторе они отображаются в блоке в нижней части страницы, под редактором текста.
В Гутенберге поля произвольных данных отключены по умолчанию, но их можно отобразить, выбрав соответствующий пункт в настройках записи.
Однако без использования плагина или написания кода невозможно отобразить метаданные на “фронтенде” сайта.
Для обычных пользователей существует множество отличных плагинов, которые возьмут эту задачу на себя. Но если вы разработчик и хотите по-настоящему раскрыть потенциал полей произвольных данных WordPress, бесшовно интегрировать их в блочный редактор и отобразить их на “фронтенде” вашего сайта с помощью специального блока Гутенберга, то вы на правильном пути.
Итак, если вы, как разработчик WordPress, задаетесь вопросом, какой лучший способ использовать поля произвольных данных в обоих редакторах – Гутенберге и классическом, – то быстрый ответ: “создание плагина, который работает как для классического редактора, так и для Гутенберга”. Этим мы займемся в этой статье.
Минимальные требования
Эта статья предполагает, что вы знакомы с такими технологиями, как Node.js & npm, React и JavaScript. Также необходимы базовые знания разработки для WordPress.
Прежде чем приступить к чтению, рекомендуем:
- Ознакомиться с нашими предыдущими руководствами по разработке блоков Гутенберга, если вы новичок в этом деле:
- Если вам больше нравится видеоконтент, можете пройти наш бесплатный видеокурс по разработке пользовательских блоков Гутенберга, смотрите видео ниже:
Убедитесь, что на вашем компьютере установлена актуальная версия Node.js.
И с учетом сказанного, давайте начнем!
Создание плагина для блоков с помощью официального инструмента create-block
Первый шаг: создание нового плагина со всеми файлами и зависимостями, необходимыми для регистрации нового типа блока. Плагин блока позволит вам легко создавать пользовательский тип блока для управления и отображения пользовательских метаданных.
Для создания нового типа блока мы будем использовать официальный инструмент create-block. В терминале запустите следующую команду (важно: команду нужно выполнять находясь в папке с плагинами, т.e. /wp-content/plugins/):
npx @wordpress/create-blockКогда будет предложено, введите следующие данные:
- Шаблон:
dynamic - Идентификатор блока (также название выходной папки):
metadata-block - Внутреннее пространство имен для названия блока:
meta-fields(уникальное для ваших продуктов) - Заголовок блока:
Поля метаданных - Краткое описание блока (необязательно):
Описание блока - Dashicon (необязательно):
book(книга) - Категория (для поиска блока):
widgets(виджеты) - Настроить плагин WordPress?:
Да/Нет
Давайте рассмотрим эти детали и попробуем понять, где они используются.
- Идентификатор блока определяет название папки и текстовый домен плагина.
- Внутреннее пространство имен определяет внутреннее пространство имен блока и префикс функций, используемые во всем коде плагина.
- Заголовок блока определяет название плагина и название блока в интерфейсе редактора.
Настройка может занять несколько минут. По завершении процесса вы получите список доступных команд.
Плагин блока успешно установлен.
Прежде чем переходить к следующему разделу, в командной строке перейдите в папку вашего плагина и выполните следующие команды. Выполняйте команду npm start каждый раз при запуске среды разработки Gutenberg. Запуск npm start запустит наблюдателя в терминале, который будет компилировать JS- и CSS-файлы после любых изменений.
cd metadata-block
npm startНе забудьте активировать только что созданный плагин в админке. Этот плагин мы будем использовать для регистрации мета полей, и в этой статье будет рассмотрено 3 варианта реализации данного функционала.
Погрузитесь в увлекательный мир веб разработки и дизайна с моими эксклюзивными курсами на Udemy! Я их разработал с душой и учел все нюансы. Сейчас активированы скидки до 90%! Получите доступ к знаниям высокого качества от $9!
Руководство по метабоксам для Gutenberg в видео формате
Если вы предпочитаете видеоформат, то все три способа показанные ниже можно посмотреть в видеоформате:
Создание метаполя для блока на React/JavaScript
Согласно Руководству по блочному редактору, «мета-поле поста» – это «объект WordPress, используемый для хранения дополнительных данных о посте». Прежде чем использовать его, нам нужно зарегистрировать новое мета-поле.
Прежде чем регистрировать пользовательское мета-поле, необходимо убедиться, что тип записи, который будет его использовать, поддерживает пользовательские поля. Кроме того, при регистрации пользовательского мета-поля следует установить параметр show_in_rest в true.
Откройте индексный php файл плагина и добавите код регистрации мета:
function ale_register_metabox(){
register_post_meta('','_meta_field_title_one', array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'auth_callback' => function(){
return current_user_can('edit_posts');
}
));
}
add_action('init','ale_register_metabox');Функция register_post_meta регистрирует ключ метаданных для указанных типов записей.
Теперь перейдите в папку wp-content/plugins/metadata-block/src и откройте файл index.js и добавьте следующий JavaScript код:
import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import metadata from './block.json';
registerBlockType( metadata.name, {
edit: Edit,
} );В случае статических блоков мы также увидели бы функцию save. В данном случае функция save отсутствует, поскольку мы установили динамический блок. Контент, отображаемый на фронтенде, будет генерироваться динамически с помощью PHP.
Перейдите в папку wp-content/plugins/metadata-block/src и откройте файл edit.js. Здесь добавите код для создания блока, который будет отображаться в редакторе:
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
InspectorControls,
RichText,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { TextControl, PanelBody, PanelRow } from '@wordpress/components';
import './editor.scss';
export default function Edit() {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const titleOne = meta[ '_meta_field_title_one' ];
const updateTitleOne = ( val ) => {
setMeta( { ...meta, _meta_field_title_one: val } );
};
return (
<>
<InspectorControls>
<PanelBody title={ __( 'MetaFields' ) }>
<PanelRow>
<TextControl
label={ __( 'Title One' ) }
value={ titleOne }
onChange={ updateTitleOne }
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div { ...useBlockProps() }>
<RichText
tagName="h2"
onChange={ updateTitleOne }
allowedFormats={ [] }
value={ titleOne }
/>
</div>
</>
);
}Рассмотрим код по частям. В первую очередь мы импортируем необходимые компоненты и функции
import { __ } from '@wordpress/i18n'; // Перевод строк
import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor'; // Компоненты редактора блоков
import { useSelect } from '@wordpress/data'; // Получение данных из редактора
import { useEntityProp } from '@wordpress/core-data'; // Работа с мета-полями записей
import { TextControl, PanelBody, PanelRow } from '@wordpress/components'; // Компоненты интерфейса
import './editor.scss'; // Стили редактора блокаОбъяснение некоторых функций импорта:
- useSelect: Специальный хук для получения данных из зарегистрированных селекторов. В данном случае он используется для получения текущего типа записи.
- useEntityProp: Специальный хук, позволяющий блокам получать и обновлять мета-поля записей. Он возвращает массив, где первый элемент – значение свойства, второй – функция обновления, а третий – полный объект данных из REST API, содержащий дополнительную информацию.
Далее мы используем полученные данные в функции Edit()
export default function Edit() {
const postType = useSelect(
(select) => select('core/editor').getCurrentPostType(),
[]
);
const [meta, setMeta] = useEntityProp('postType', postType, 'meta');
const titleOne = meta['_meta_field_title_one'];
const updateTitleOne = (val) => {
setMeta({ ...meta, _meta_field_title_one: val });
};
// ... (остальная часть кода функции Edit())
}Объяснение использования данных:
postType– переменная, хранящая текущий тип записи.meta– объект, содержащий все мета-поля текущей записи.titleOne– переменная, хранящая значение мета-поля_meta_field_title_one.updateTitleOne– функция-обработчик события изменения значения мета-поля_meta_field_title_one.
Следующим шагом будет создание JSX-кода, возвращаемого функцией Edit().
return (
<>
<InspectorControls>
<PanelBody title={ __( 'MetaFields' ) }>
<PanelRow>
<TextControl
label={ __( 'Title One' ) }
value={ titleOne }
onChange={ updateTitleOne }
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div { ...useBlockProps() }>
<RichText
tagName="h2"
onChange={ updateTitleOne }
allowedFormats={ [] }
value={ titleOne }
/>
</div>
</>
);Осталось реализовать отображение блока на фронт части, и поскольку у нас динамический блок, мы будем делать это по средствам PHP. Переходим в индексный файл плагина и добавляем следующий код:
<?php
function ale_custom_render_meta($post){
wp_nonce_field('ale_save_custom_meta','ale_metafields_box_nonce' );
$title_one = get_post_meta($post->ID, '_meta_field_title_one', true);
?>
<div>
<h4>Title:</h4>
<p><input type="text" id="_meta_field_title_two" name="_meta_field_title_two" value="<?php echo $title_one; ?>" /></p>
</div>
<?php
}
function ale_blocks_ale_blocks_block_init() {
register_block_type( __DIR__ . '/build', array(
'render_callback' => 'ale_custom_metaboxes_render'
) );
}
add_action( 'init', 'ale_blocks_ale_blocks_block_init' );В видео примере выше вы тай же можете найти другие способы использования мета данных, например привязать поля к всему посту а не к определенному блоку. Так же в видео рассмотрел как отображать его в отдельном сайдбаре и как показывать поля одновременно и в гутенберг и в классическом редакторе.
На моем YouTube канале так же доступно другое видео по метабоксам на территории плагинов, которое тоже будет вам полезным:
Заключение по уроку: Как добавить метабоксы?
В данной статье мы изучили как регистрировать и использовать метабоксы как для гутенберга так и для классического редактора (рассмотрели в видео уроках). Приглашаю вас изучить мои курсы на Udemy для более глубокого и детального изучения веб разработки.
Александр Сокирка
