ворд-пресс.рф
Разработка

Как создать собственный блок Gutenberg: первый рабочий проект

От генерации каркаса блока до сборки и проверки в редакторе WordPress.

Опубликовано: 10.10.2026Обновлено: 10.10.2026

Собственный блок Gutenberg полезен, когда редактору нужен повторяемый компонент с понятными настройками и предсказуемой разметкой. Проще начать с официального генератора @wordpress/create-block, чем писать регистрацию и сборщик с нуля.

Что понадобится

  • Локальная или тестовая установка WordPress с доступом к файлам.
  • Node.js и npm, совместимые с актуальной версией @wordpress/create-block.
  • Возможность активировать новый плагин в админке.

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

Создать каркас

В терминале, из папки плагинов локального WordPress или иной рабочей директории, выполните:

npx @wordpress/create-block@latest my-site-notice
cd my-site-notice
npm start

Команда создаёт плагин с файлами блока, включая block.json, исходные JavaScript-файлы и настройку сборки. Точный набор файлов зависит от версии генератора; ориентируйтесь на созданный проект, а не на старый скриншот учебника.

Роль основных файлов

  • block.json — имя, метаданные и параметры блока; имя должно иметь пространство имён вроде namespace/block-name.
  • src/edit.js — интерфейс блока в редакторе, если он есть в выбранном шаблоне.
  • src/save.js или серверный render.php — вывод на сайте, в зависимости от статического/динамического варианта.
  • package.json — зависимости и команды start, build.

Не редактируйте содержимое build/ вручную: оно генерируется командой сборки.

Проверить блок до релиза

  1. Установите и активируйте сгенерированный плагин на staging.
  2. Создайте запись, добавьте новый блок из списка блоков.
  3. Измените параметры и убедитесь, что редактор сохраняет документ.
  4. Проверьте результат на фронтенде без открытой админки.
  5. Завершите сборку:
npm run build
  1. Проверьте работу на мобильном экране и без сторонних визуальных расширений.

Типичные проблемы

В админке блок есть, на сайте пусто

Проверьте, динамический блок или статический, есть ли серверный рендер и не пропущена ли сборка. Откройте консоль разработчика и журнал WordPress: сообщения могут указывать на разные причины.

Редактор пишет «блок содержит непредвиденное содержимое»

Обычно сравниваются сохранённые данные и текущая функция save. Если разметка менялась, нужна миграция/депрекация атрибутов или переход к динамическому выводу с сохранением обратной совместимости.

Плагин зависит от активной темы

По возможности держите реализацию блока внутри плагина. В самой теме оставляйте только оформление.

Следующий шаг

После первого работающего блока добавляйте атрибуты, Inspector Controls и тесты. Для блоков с меняющимся серверным содержимым рассмотрите динамический рендеринг. Следуйте официальному quick start и подробному руководству.

Источник: https://developer.wordpress.org/block-editor/getting-started/quick-start-guide/

Материал был полезен?

Помогите нам сделать материалы точнее и понятнее.