Как создать собственный блок для Gutenberg в WordPress

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

Что нужно для создания собственного блока Gutenberg

Для начала важно понимать, что блоки Gutenberg создаются с использованием JavaScript, преимущественно React, а также PHP для регистрации блока в системе WordPress. Вам понадобятся базовые знания JavaScript ES6+, а также понимание структуры WordPress-плагина или темы, куда будет добавлен блок.

Основные инструменты и библиотеки:

• @wordpress/scripts — набор инструментов для сборки и разработки блоков.
• @wordpress/block-editor — компоненты для редактора блоков.
• @wordpress/blocks — функции для регистрации блоков.
• Node.js и npm — для установки зависимостей и сборки кода.

Если вы хотите быстро начать, рекомендую использовать официальный пакет @wordpress/scripts, который упрощает настройку сборки.

Регистрация собственного блока: базовый пример

Создадим минимальный блок, который выводит приветственное сообщение. Для этого создадим файл block.js с таким содержанием:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('wpone/custom-greeting', {
    title: 'Приветствие WPONE',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit({ attributes, setAttributes }) {
        return (
            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(content) => setAttributes({ content })}
                placeholder="Введите приветствие..."
            />
        );
    },
    save({ attributes }) {
        return <RichText.Content tagName="p" value={attributes.content} />;
    },
});

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

Подключение блока в WordPress

Для подключения блока нужно добавить регистрацию скрипта и стилей в PHP:

function wpone_register_custom_block() {
    wp_register_script(
        'wpone-custom-block',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n'),
        filemtime(plugin_dir_path(__FILE__) . 'block.js')
    );

    register_block_type('wpone/custom-greeting', array(
        'editor_script' => 'wpone-custom-block',
    ));
}
add_action('init', 'wpone_register_custom_block');

Не забудьте, что для сборки block.js с использованием ES6 и JSX нужно настроить сборщик, например, с помощью @wordpress/scripts.

Расширенные возможности: добавление настроек блока

Для более сложных блоков можно добавить панель настроек (Inspector Controls), позволяющую изменять параметры блока в сайдбаре редактора. Например, добавим выбор цвета текста.

import { InspectorControls, RichText } from '@wordpress/block-editor';
import { PanelBody, ColorPalette } from '@wordpress/components';
import { useState } from '@wordpress/element';

registerBlockType('wpone/custom-greeting', {
    title: 'Приветствие WPONE с цветом',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: { type: 'string', source: 'html', selector: 'p' },
        color: { type: 'string', default: '#000000' },
    },
    edit({ attributes, setAttributes }) {
        const { content, color } = attributes;
        return (
            <>
                <InspectorControls>
                    <PanelBody title="Настройки цвета">
                        <ColorPalette
                            value={color}
                            onChange={(color) => setAttributes({ color })}
                        />
                    </PanelBody>
                </InspectorControls>
                <RichText
                    tagName="p"
                    value={content}
                    onChange={(content) => setAttributes({ content })}
                    placeholder="Введите приветствие..."
                    style={{ color: color }}
                />
            </>
        );
    },
    save({ attributes }) {
        return <RichText.Content tagName="p" value={attributes.content} style={{ color: attributes.color }} />;
    },
});

Данный код позволит пользователю выбирать цвет текста прямо из панели настроек блока.

Практические советы и рекомендации

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

• Оптимизируйте загрузку скриптов и стилей. Используйте зависимости WordPress, чтобы избежать дублирования библиотек.
• Используйте локализацию. Обеспечьте поддержку разных языков, применяя функции wp.i18n.
• Тестируйте на разных устройствах. Визуальное отображение должно быть адаптивным и корректным.
• Документируйте код. Это облегчает поддержку и развитие блоков.

Использование плагинов для упрощения создания блоков

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

• Clearfy Pro — плагин для оптимизации и улучшения функционала, включая расширенные возможности для работы с блоками.
• Expert Review — позволяет создавать блоки с отзывами и рейтингами, что может быть полезно для кастомизации контента.

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

Выводы и дальнейшие шаги

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

Если хотите более подробно изучить тему, рекомендую официальную документацию WordPress по блокам: https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/.