Создаем кастомные поля для авторских блоков WordPress: практическое руководство

В современных проектах на WordPress часто возникает необходимость создавать уникальные авторские блоки с дополнительными полями для ввода данных. В этой статье подробно разберем, как создавать кастомные поля для собственных блоков в редакторе Gutenberg, используя практические примеры и пошаговые инструкции.

Почему кастомные поля в блоках Gutenberg важны

Кастомные поля позволяют расширить функциональность стандартных блоков и создавать уникальные элементы контента, которые точно соответствуют требованиям проекта. Они дают возможность пользователям сайта вводить структурированные данные без необходимости писать код, а разработчикам — гибко управлять отображением и логикой.

Например, если вы создаете блок «Отзывы», то кастомные поля помогут указать имя автора, его должность, рейтинг и сам текст отзыва. Встроенные возможности WordPress для кастомных полей в классических редакторах не подходят для блочного редактора, поэтому нужно создавать собственные метаполя или использовать JavaScript API Gutenberg.

Создание кастомных полей для блока: базовый пример

Для начала создадим простой кастомный блок с полями «Заголовок» и «Описание». Для этого потребуется создать плагин с блоком, который регистрируется с помощью registerBlockType из @wordpress/blocks. В редакторе используем компоненты из @wordpress/components.

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('wp0/custom-fields-block', {
    title: 'Кастомный блок с полями',
    icon: 'welcome-write-blog',
    category: 'widgets',
    attributes: {
        title: { type: 'string', default: '' },
        description: { type: 'string', default: '' },
    },
    edit({ attributes, setAttributes }) {
        const blockProps = useBlockProps();
        return (
            <div {...blockProps}>
                <TextControl
                    label="Заголовок"
                    value={attributes.title}
                    onChange={(title) => setAttributes({ title })}
                />
                <TextControl
                    label="Описание"
                    value={attributes.description}
                    onChange={(description) => setAttributes({ description })}
                />
            </div>
        );
    },
    save({ attributes }) {
        return (
            <div>
                <h3>{attributes.title}</h3>
                <p>{attributes.description}</p>
            </div>
        );
    },
});

Этот код создает блок с двумя полями, которые сохраняются в атрибутах блоков. Такой подход подходит для простых данных, которые не требуют хранения в метаполях поста.

Использование метаполей для хранения дополнительных данных

Если нужно сохранять данные вне контента поста (например, для SEO или интеграций), стоит использовать метаполя (post meta). Для этого в PHP регистрируем метаполя через register_post_meta с параметром show_in_rest, чтобы они были доступны в REST API и блоках.

add_action('init', function() {
    register_post_meta('post', 'wp0_custom_author', [
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
        'auth_callback' => function() {
            return current_user_can('edit_posts');
        },
    ]);
});

В блоке с помощью хуков из @wordpress/editor можно получить и изменить эти метаполя. Пример использования useSelect и useDispatch для работы с метаполями:

import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect } from 'react';

const MyMetaField = () => {
    const postMeta = useSelect(
        (select) => select('core/editor').getEditedPostAttribute('meta'),
        []
    );
    const { editPost } = useDispatch('core/editor');

    useEffect(() => {
        if(!postMeta.wp0_custom_author) {
            editPost({ meta: { wp0_custom_author: 'Автор по умолчанию' } });
        }
    }, [postMeta, editPost]);

    return (
        <TextControl
            label="Автор"
            value={postMeta.wp0_custom_author || ''}
            onChange={(value) => editPost({ meta: { wp0_custom_author: value } })}
        />
    );
};

Плагины для расширенного управления кастомными полями

Если хочется упростить процесс, можно использовать плагины:

• Advanced Custom Fields (ACF) — позволяет создавать метаполя и интегрировать их в Gutenberg через ACF Blocks. Отлично подходит для сложных проектов.
• Meta Box — мощный инструмент для создания кастомных полей и блоков, поддерживает PHP и JS рендеринг.
• WPRemark — помогает создавать динамические формы и управлять пользовательскими данными, можно использовать для кастомных полей.

На сайте WPSHOP.ru есть готовые решения и плагины, которые помогут быстро внедрить кастомные поля и блоки без глубокого погружения в код.

Советы по разработке и отладке кастомных полей в блоках

При разработке кастомных полей для блоков стоит учитывать несколько важных моментов:

• Всегда валидируйте и фильтруйте данные при сохранении, чтобы избежать XSS и других уязвимостей.
• Используйте useBlockProps для правильной работы стилизации и взаимодействия с редактором.
• Тестируйте блоки на разных устройствах и версиях WordPress — иногда API меняется.
• Для сложных интерфейсов разбивайте код на компоненты, чтобы облегчить поддержку.

Например, можно вынести поле ввода в отдельный компонент с собственной логикой и стилями.

Вывод и практическое применение

Использование кастомных полей в авторских блоках позволяет создавать мощные и гибкие решения, которые повышают удобство работы с контентом и расширяют возможности сайта на WordPress. Начинайте с простых атрибутов и постепенно переходите к метаполям и сложным структурам. Используйте существующие плагины и библиотеки, чтобы ускорить разработку и сделать код надежным.

Если хотите получить готовые шаблоны блоков с кастомными полями и поддержкой SEO, рекомендую посмотреть решения на WPSHOP.ru.