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

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

Почему стоит создавать кастомные блоки для Gutenberg

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

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

Кроме того, кастомные блоки можно интегрировать с другими плагинами, например, с Clearfy Pro для оптимизации производительности или WPStories для создания визуальных историй.

Основы создания собственного блока Gutenberg

Для создания кастомного блока нужно понимать структуру JavaScript-проекта на базе React и систему регистрации блоков в WordPress.

Регистрация блока на PHP

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

function wpcode_register_custom_block() {
    wp_register_script(
        'wpcode-custom-block-script',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    wp_register_style(
        'wpcode-custom-block-style',
        plugins_url( 'block.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.css' )
    );

    register_block_type( 'wpcode/custom-block', array(
        'editor_script' => 'wpcode-custom-block-script',
        'style'         => 'wpcode-custom-block-style',
    ) );
}
add_action( 'init', 'wpcode_register_custom_block' );

В этом примере мы подключаем JS и CSS файлы для блока. Важно версионировать файлы с помощью filemtime для корректной работы кеша.

Создание JavaScript файла блока

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

const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;

registerBlockType('wpcode/custom-block', {
    title: 'Кастомный блок',
    icon: 'smiley',
    category: 'common',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: 'h2',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit({ attributes, setAttributes }) {
        const { title, content } = attributes;

        return (
            <div className="wpcode-custom-block">
                <RichText
                    tagName="h2"
                    value={title}
                    onChange={(value) => setAttributes({ title: value })}
                    placeholder="Введите заголовок..."
                />
                <RichText
                    tagName="p"
                    value={content}
                    onChange={(value) => setAttributes({ content: value })}
                    placeholder="Введите текст..."
                />
            </div>
        );
    },
    save({ attributes }) {
        const { title, content } = attributes;
        return (
            <div className="wpcode-custom-block">
                <RichText.Content tagName="h2" value={title} />
                <RichText.Content tagName="p" value={content} />
            </div>
        );
    },
});

Такой блок можно расширять, добавлять настройки, поля и интеграции с REST API.

Оптимизация кастомных блоков для производительности

Частая проблема — блоки тормозят редактор или замедляют загрузку страниц. Для оптимизации стоит:

• Использовать ленивую загрузку (lazy loading) компонентов, если блок сложный.
• Минимизировать и объединять CSS и JS файлы.
• Подключать стили только в редакторе или на фронтенде по необходимости с помощью аргументов editor_style и style в register_block_type.
• Кешировать результаты сложных вычислений внутри блока с помощью React-хуков (useMemo, useCallback).

Для управления кешированием и очисткой можно использовать Clearfy Pro, который помогает с оптимизацией скриптов и стилей.

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

Добавление пользовательских настроек блока

Через панель настроек блока (InspectorControls) можно добавить переключатели, селекторы и другие элементы управления, чтобы редактор мог менять вид и поведение блока.

const { InspectorControls } = wp.blockEditor;
const { PanelBody, ToggleControl } = wp.components;

// Внутри edit функции
return (
  <>
    <InspectorControls>
      <PanelBody title="Настройки блока">
        <ToggleControl
          label="Показать рамку"
          checked={attributes.showBorder}
          onChange={(value) => setAttributes({ showBorder: value })}
        />
      </PanelBody>
    </InspectorControls>
    <div className={attributes.showBorder ? 'with-border' : ''}>
      {/* контент блока */}
    </div>
  </>
);

Интеграция с REST API для динамического контента

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

import { useEffect, useState } from '@wordpress/element';

function wpcodeFetchData() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('/wp-json/wp/v2/posts?per_page=3')
            .then(response => response.json())
            .then(posts => setData(posts));
    }, []);

    if (!data) return <p>Загрузка...</p>;

    return (
        <ul>
            {data.map(post => (
                <li key={post.id}>{post.title.rendered}</li>
            ))}
        </ul>
    );
}

Такой компонент можно встраивать в редактор и сохранять динамический контент.

Практические советы по отладке и разработке блоков

Разработка блоков требует отладки и тестирования. Вот несколько советов:

• Используйте wp-scripts для быстрого запуска и сборки проектов.
• Включайте режим разработки в браузере для отладки JSX и React компонентов.
• Применяйте console.log и React DevTools для анализа состояния.
• Проверяйте совместимость с темами и плагинами, особенно если блок использует стили.

Заключение

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

Для дополнительной оптимизации и расширения возможностей рекомендуем ознакомиться с Clearfy Pro и другими инструментами на WPSHOP.