Пользовательские блоки Gutenberg: расширяем функциональность WordPress за пределы стандартных

Краткое содержание

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

Пользовательские блоки Gutenberg: расширяем функциональность WordPress за пределы стандартных

Появление редактора блоков Gutenberg в WordPress 5.0 ознаменовало значительный сдвиг в способах создания и управления контентом. Отходя от линейного подхода классического редактора, Gutenberg представил модульную систему, где контент строится из отдельных "блоков". Хотя стандартный набор блоков охватывает широкий спектр общих потребностей, многим веб-сайтам требуется уникальная функциональность, специфические элементы дизайна или интеграции, выходящие за рамки того, что доступно по умолчанию. Именно здесь на помощь приходит разработка пользовательских блоков Gutenberg, предлагающая мощный способ расширения возможностей WordPress и точной настройки его под требования вашего проекта.

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

Понимание архитектуры редактора блоков

Прежде чем приступить к разработке, важно понять, как Gutenberg и его блоки функционируют в экосистеме WordPress. Сам WordPress построен на модульной архитектуре PHP и MySQL. Темы контролируют представление, а плагины добавляют функциональность. Gutenberg, как основная функция WordPress, бесшовно интегрируется в эту структуру. Он использует JavaScript (в основном React) для динамического редактирования в браузере, в то время как PHP обрабатывает регистрацию и рендеринг на стороне сервера.

Пользовательские блоки по сути являются компонентами JavaScript, которые регистрируются в WordPress. Когда пользователь добавляет пользовательский блок в запись или на страницу, Gutenberg сохраняет его конфигурацию (атрибуты) в базе данных. При отображении записи на фронтенде WordPress использует PHP для интерпретации этой конфигурации и вывода соответствующего HTML, часто используя тот же компонент JavaScript или отдельный PHP-шаблон.

Основные компоненты пользовательского блока

Каждый пользовательский блок Gutenberg, по сути, состоит из нескольких ключевых частей:

1. Регистрация: Это процесс уведомления WordPress о вашем новом блоке. Он включает определение его имени, заголовка, значка и других метаданных. Это в основном делается с помощью функции JavaScript registerBlockType.
2. Атрибуты: Это поля данных, связанные с вашим блоком. Рассматривайте их как настройки или свойства, которые пользователь может изменять для конкретного экземпляра блока (например, текстовое содержимое, URL изображения, выбор цвета). Атрибуты определяются при регистрации блока в JavaScript.
3. Функция редактирования (edit): Эта функция JavaScript определяет, как блок выглядит и ведет себя в редакторе Gutenberg. Здесь вы создаете интерактивный пользовательский интерфейс, который создатели контента будут использовать для настройки блока.
4. Функция сохранения (save): Эта функция JavaScript определяет статический HTML-разметку, которая будет сохранена в базе данных и отображена на фронтенде вашего веб-сайта. Она должна отражать текущее состояние атрибутов блока.

Пошаговое руководство: создание первого пользовательского блока

Давайте создадим простой пользовательский блок, который отображает "Призыв к действию" (CTA) с заголовком и кнопкой. Этот пример будет сосредоточен на основных аспектах JavaScript для регистрации и редактирования блоков, предполагая, что у вас настроена базовая среда разработки WordPress.

Предварительные требования:

• Локальная среда разработки WordPress.
• Базовое понимание JavaScript, React и PHP.
• Установленные Node.js и npm (или yarn) для компиляции ресурсов.

1. Настройка проекта:

Пользовательские блоки обычно разрабатываются как часть плагина. Создайте файл нового плагина (например, my-custom-blocks/my-custom-blocks.php) и файл JavaScript для вашего блока (например, src/index.js). Вам также понадобится процесс сборки для компиляции вашего JavaScript. Распространенный подход — использовать @wordpress/scripts, который предоставляет удобный способ управления компиляцией.

В корневой папке вашего плагина создайте файл package.json:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "A plugin for custom Gutenberg blocks.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Your Name",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

Установите зависимости: npm install.

2. Регистрация блока (JavaScript):

В вашем файле src/index.js вы будете использовать registerBlockType из пакета @wordpress/blocks.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Import components for the editor
import { Edit } from './edit';
import { Save } from './save';

registerBlockType( 'my-custom-blocks/cta', {
    title: __( 'Call to Action', 'my-custom-blocks' ),
    icon: 'megaphone',
    category: 'widgets',
    attributes: {
        headline: {
            type: 'string',
            default: '',
        },
        buttonText: {
            type: 'string',
            default: 'Learn More',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. Определение интерфейса редактора (src/edit.js):

Этот компонент отвечает за внешний вид и функциональность блока в редакторе.

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export const Edit = ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps();

    const onChangeHeadline = ( newHeadline ) => {
        setAttributes( { headline: newHeadline } );
    };

    const onChangeButtonText = ( newButtonText ) => {
        setAttributes( { buttonText: newButtonText } );
    };

    const onChangeButtonUrl = ( newButtonUrl ) => {
        setAttributes( { buttonUrl: newButtonUrl } );
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Button Settings', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Button Text', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Button URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Enter your headline here...', 'my-custom-blocks' ) }
                    value={ attributes.headline }
                    onChange={ onChangeHeadline }
                    allowedFormats={ [ 'core/bold', 'core/italic' ] }
                />
                <a href={ attributes.buttonUrl } className="wp-element-button">
                    { attributes.buttonText }
                </a>
            </div>
        </>
    );
};

4. Определение функции сохранения (src/save.js):

Эта функция определяет HTML-вывод для фронтенда.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export const Save = ( { attributes } ) => {
    const blockProps = useBlockProps.save();

    return (
        <div { ...blockProps }>
            <RichText.Content
                tagName="h3"
                value={ attributes.headline }
            />
            <a href={ attributes.buttonUrl } className="wp-element-button">
                { attributes.buttonText }
            </a>
        </div>
    );
};

5. Подключение скрипта блока (PHP):

В вашем основном файле плагина (my-custom-blocks.php) вам нужно зарегистрировать и подключить ваш скомпилированный JavaScript-файл.

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: Adds custom Gutenberg blocks.
 * Version: 1.0
 * Author: Your Name
 */

function my_custom_blocks_register_block() {
    // Automatically loads the block.json file and enqueues the script.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Сборка ресурсов:

Выполните команду npm run build в каталоге вашего плагина. Это скомпилирует ваш JavaScript в папку build.

Теперь активируйте плагин в WordPress. Вы должны увидеть свой блок "Призыв к действию" в редакторе!

Лучшие практики разработки пользовательских блоков

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

• Пространства имен: Всегда используйте уникальное пространство имен для вашего блока (например, my-custom-blocks/cta). Это предотвращает конфликты с другими блоками. Функция registerBlockType обрабатывает это.
• Организация кода: Поддерживайте чистоту и хорошую организацию вашего JavaScript и PHP кода. Для сложных блоков рассмотрите возможность разбиения вашего JavaScript на более мелкие, повторно используемые компоненты.
• Безопасность:
  • Санитизация: При сохранении данных в базе данных (особенно пользовательского контента) всегда санитизируйте их. WordPress предоставляет такие функции, как sanitize_text_field, esc_url и т. д.
  • Экранирование: При выводе данных в браузер всегда экранируйте их, чтобы предотвратить атаки межсайтового скриптинга (XSS). Используйте такие функции, как esc_html, esc_attr, esc_url.
  • Nonces: Для любых AJAX-запросов или отправки форм, связанных с вашим блоком, используйте nonces для проверки того, что запрос исходит из легитимного источника WordPress.
• Интернационализация (i18n): Используйте функции __() и _x() (из @wordpress/i18n) для всех пользовательских строк в вашем JavaScript. Это делает ваш блок переводимым.
• Доступность: Убедитесь, что вашим блоком могут пользоваться все. Используйте семантический HTML, при необходимости предоставляйте ARIA-атрибуты и тестируйте с помощью программ чтения с экрана.
• Производительность:
  • Ленивая загрузка: Для блоков, которые загружают тяжелые ресурсы или сложную информацию, рассмотрите возможность реализации методов ленивой загрузки.
  • Эффективный рендеринг: Оптимизируйте вашу функцию save и любой рендеринг на стороне сервера, чтобы он был максимально эффективным.
  • Подключение ресурсов: Подключайте только необходимые скрипты и стили для вашего блока. Используйте enqueue_block_style и enqueue_block_script_handle для ресурсов, специфичных для блока.
• Модульность и расширяемость: Используйте хуки WordPress (действия и фильтры) в вашем PHP, чтобы позволить другим плагинам или темам изменять поведение или вывод вашего блока.
• block.json: Для более сложных блоков используйте файл block.json для объявления метаданных блока, зависимостей, стилей и дескрипторов скриптов. Это современный стандарт для разработки блоков и упрощает управление ресурсами.

Интеграция с архитектурой WordPress

Пользовательские блоки — это не изолированные сущности. Они глубоко интегрируются с основной архитектурой WordPress:

• Хуки: Вы можете использовать действия и фильтры PHP в своем плагине для изменения регистрации блоков, условного добавления пользовательских стилей или скриптов или даже изменения вывода рендеринга основных блоков. Например, вы можете использовать фильтр block_type_metadata_settings для изменения настроек зарегистрированного блока.
• Интеграция с темами: Темы на основе блоков и полнофункциональное редактирование (FSE) в значительной степени полагаются на блоки. Пользовательские блоки могут быть разработаны так, чтобы они бесшовно вписывались в шаблоны FSE, позволяя пользователям создавать целые сайты, используя единый рабочий процесс на основе блоков.
• Взаимодействие плагинов: Ваши пользовательские блоки могут взаимодействовать с другими плагинами. Например, пользовательский блок продукта может извлекать данные из плагина электронной коммерции, или пользовательский блок галереи может интегрироваться с конкретным плагином медиатеки.

Расширенные концепции и соображения

• Рендеринг на стороне сервера (SSR): Для блоков, требующих динамических данных или сложной логики, которую лучше обрабатывать на сервере, вы можете реализовать рендеринг на стороне сервера. Это включает определение функции render_callback в вашем PHP при регистрации блока.
• Динамические блоки: Блоки, использующие SSR, часто называют динамическими блоками. Они не сохраняют статический HTML в базе данных; вместо этого они сохраняют только свои атрибуты, а render_callback генерирует HTML при каждой загрузке страницы.
• Стили блоков: Вы можете определить пользовательские стили для ваших блоков, которые пользователи могут выбирать в редакторе.
• Вариации блоков: Создавайте вариации базового блока, чтобы предлагать предварительно сконфигурированные версии с различными настройками по умолчанию или внешним видом.
• Различия между редактором и фронтендом: Помните, что функции edit и save могут потребовать обработки различных сценариев. Функция edit предназначена для интерактивного редактирования, а функция save — для вывода статического HTML. Иногда вам может понадобиться отдельный render_callback для динамического рендеринга на фронтенде.

Заключение

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