Разработка кастомных блоков Gutenberg для WordPress

Отметим: когда стандартные блоки Gutenberg не покрывают потребности проекта — например, нужна карточка товара с данными из кастомного типа записи или сложный контейнер с вложенными блоками — разработчики вынуждены искать альтернативы. В таких случаях мы создаём кастомные блоки на React, которые дают полный контроль над структурой, атрибутами и стилями. Наш опыт (более 5 лет, 50+ блоков) показывает: правильно спроектированный блок экономит часы работы редактора и ускоряет загрузку страницы за счёт оптимизированного кода.

В одном из проектов для агентства недвижимости потребовался блок «Карточка объекта» с данными из кастомного типа записи, поддержкой геолокации и галереи. Редактор выбирает объект из списка, а на фронте рендерится карточка с ценой, адресом и меткой на карте. Разработка на React сократила время загрузки редактора на 30%, а PHP-рендер обрабатывает запрос за 50ms.

Почему кастомные блоки Gutenberg лучше стандартных?

Стандартные блоки ограничены базовым функционалом. Кастомные блоки дают полный контроль над структурой, атрибутами и стилями. Вы можете добавить панель настроек с любыми полями, связать блок с произвольными типами записей и реализовать уникальную логику. По сравнению с ACF-блоками, кастомные на React обеспечивают на 40% более гибкий интерфейс редактора и не уступают по производительности.

Создание динамического блока Gutenberg: пошаговый план

Разработка блока делится на этапы:

1. Аналитика — выявление требований к блоку и его атрибутам.
2. Проектирование — определение структуры, связей с данными и поддержки тем.
3. Регистрация через block.json — описание метаданных, атрибутов и скриптов.
4. JavaScript-компоненты — создание edit (панель настроек) и save (статический или () => null для динамического).
5. PHP-рендер — написание render_callback для динамических блоков.
6. Сборка через @wordpress/scripts — автоматическая компиляция JS и CSS.
7. Тестирование — проверка в разных браузерах и окружениях.

Типовой блок средней сложности занимает 1-3 дня. Рассмотрим ключевые шаги.

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

Согласно официальной документации, block.json является стандартом регистрации блоков. WordPress Developer Resources

Современный подход — block.json + JavaScript/PHP:

{ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "my-plugin/project-card", "version": "1.0.0", "title": "Карточка проекта", "category": "common", "icon": "portfolio", "description": "Выводит карточку портфолио-проекта с изображением и описанием", "supports": { "html": false, "align": ["wide", "full"], "color": { "background": true, "text": true } }, "attributes": { "projectId": { "type": "number" }, "showDescription": { "type": "boolean", "default": true }, "imageSize": { "type": "string", "default": "large" } }, "editorScript": "file:./index.js", "editorStyle": "file:./editor.css", "style": "file:./style.css" } 

Регистрация в PHP:

add_action('init', function () { register_block_type(__DIR__ . '/blocks/project-card'); }); 

JavaScript: edit и save

import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps, InspectorControls, MediaUpload } from '@wordpress/block-editor'; import { PanelBody, ToggleControl, SelectControl, Button } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; registerBlockType('my-plugin/project-card', { edit: ({ attributes, setAttributes }) => { const { projectId, showDescription, imageSize } = attributes; const blockProps = useBlockProps({ className: 'project-card-editor' }); const projects = useSelect(select => select('core').getEntityRecords('postType', 'project', { per_page: 50 }) ); const projectOptions = projects ? [{ label: '— выберите проект —', value: 0 }, ...projects.map(p => ({ label: p.title.rendered, value: p.id }))] : [{ label: 'Загрузка...', value: 0 }]; return ( <> <InspectorControls> <PanelBody title="Настройки блока"> <SelectControl label="Проект" value={projectId} options={projectOptions} onChange={v => setAttributes({ projectId: Number(v) })} /> <ToggleControl label="Показывать описание" checked={showDescription} onChange={v => setAttributes({ showDescription: v })} /> <SelectControl label="Размер изображения" value={imageSize} options={[ { label: 'Thumbnail', value: 'thumbnail' }, { label: 'Medium', value: 'medium' }, { label: 'Large', value: 'large' }, ]} onChange={v => setAttributes({ imageSize: v })} /> </PanelBody> </InspectorControls> <div {...blockProps}> {projectId ? <ProjectCardPreview projectId={projectId} showDescription={showDescription} /> : <p>Выберите проект в панели справа</p> } </div> </> ); }, save: () => null, // динамический блок — рендер через PHP }); 

save: () => null означает, что блок динамический — контент рендерится PHP в момент запроса страницы. Это предпочтительно для блоков, данные которых меняются (записи из БД).

PHP-рендеринг динамического блока

register_block_type(__DIR__ . '/blocks/project-card', [ 'render_callback' => 'my_plugin_render_project_card', ]); function my_plugin_render_project_card(array $attributes): string { $project_id = absint($attributes['projectId'] ?? 0); $show_desc = (bool) ($attributes['showDescription'] ?? true); $image_size = sanitize_key($attributes['imageSize'] ?? 'large'); if (!$project_id) return ''; $project = get_post($project_id); if (!$project || $project->post_status !== 'publish') return ''; $thumbnail = get_the_post_thumbnail($project_id, $image_size, ['class' => 'project-card__image']); $title = esc_html($project->post_title); $permalink = esc_url(get_permalink($project_id)); $excerpt = $show_desc ? '<p class="project-card__desc">' . esc_html(get_the_excerpt($project)) . '</p>' : ''; $wrapper_attributes = get_block_wrapper_attributes(['class' => 'project-card']); return "<article {$wrapper_attributes}> {$thumbnail} <h3 class=\"project-card__title\"><a href=\"{$permalink}\">{$title}</a></h3> {$excerpt} </article>"; } 

get_block_wrapper_attributes() добавляет классы из supports.color и другие атрибуты, которые Gutenberg генерирует автоматически.

Блок с innerBlocks

Блоки-контейнеры принимают дочерние блоки через InnerBlocks:

import { InnerBlocks } from '@wordpress/block-editor'; const ALLOWED_BLOCKS = ['core/paragraph', 'core/heading', 'my-plugin/cta-button']; const TEMPLATE = [ ['core/heading', { level: 3, placeholder: 'Заголовок секции' }], ['core/paragraph', { placeholder: 'Описание...' }], ['my-plugin/cta-button', {}], ]; // В edit: <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} template={TEMPLATE} templateLock={false} /> // В save: <InnerBlocks.Content /> 

Сравнение типов блоков

Что входит в разработку блока под ключ

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

• Файл block.json с полным описанием атрибутов и поддержкой цветов/выравнивания.
• JavaScript-компоненты edit (с панелью InspectorControls) и save (для статических) или () => null (для динамических).
• PHP-рендер с использованием get_block_wrapper_attributes() и защитой данных.
• CSS-стили (editor и frontend) с БЭМ-неймингом.
• Документацию по использованию блока для редакторов.
• Обучение редактора или команды (по запросу).
• Гарантию на код и поддержку в течение 1 месяца после сдачи.

Типовые сроки разработки

Точные сроки зависят от сложности — свяжитесь с нами для оценки. Мы разрабатываем блоки под ключ с гарантией совместимости с последней версией WordPress.

Как использовать dynamic blocks для работы с данными из БД?

Dynamic blocks идеальны для вывода контента из кастомных типов записей. Достаточно сохранить ID записи в атрибутах, а PHP-рендер подтягивает данные в момент генерации страницы. Это позволяет менять содержимое без пересохранения постов — достаточно обновить исходную запись. Например, блок «Список новостей» с фильтрацией по категориям: редактор выбирает категорию, а на сайте выводятся последние 10 новостей с пагинацией.

Наши преимущества

Более 5 лет опыта, 50+ проектов, сертифицированные специалисты. Мы используем React, TypeScript, CSS Modules, CI/CD. Каждый блок проходит код-ревью и тестирование в разных окружениях. Наши клиенты получают не просто код, а готовое решение с документацией и поддержкой. Закажите разработку кастомных блоков для вашего проекта — получите консультацию бесплатно. Свяжитесь с нами для обсуждения.