10. Gutenberg Blocks

Gutenberg — это редактор блоков в WordPress, основанный на React. Разработка блоков позволяет создавать кастомные элементы интерфейса для контент-менеджеров.

Инструментарий

Для современной разработки блоков используется пакет @wordpress/scripts. Он настраивает Webpack и Babel автоматически.

# Создание структуры блока одной командой
npx @wordpress/create-block my-custom-block

Анатомия блока

Блок состоит из двух основных частей:

1. Edit: отображение блока внутри админки (React компоненты).
2. Save: определение того, как блок будет сохранен в базе данных и выведен на фронтенд.

Пример block.json

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

{
  "name": "yasha/hello-block",
  "title": "Yasha Hello Block",
  "category": "widgets",
  "icon": "smiley",
  "attributes": {
    "content": {
      "type": "string",
      "source": "html",
      "selector": "p"
    }
  },
  "editorScript": "file:./index.js",
  "style": "file:./style-index.css"
}

React в разработке блоков

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

registerBlockType('yasha/hello-block', {
    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} />;
    },
});

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

function yasha_register_gutenberg_blocks() {
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'yasha_register_gutenberg_blocks' );

Динамические блоки

Если контент блока должен меняться (например, список последних постов), используется render_callback в PHP вместо функции save в JS.

register_block_type( 'yasha/latest-posts', [
    'render_callback' => 'yasha_render_latest_posts_block',
] );

function yasha_render_latest_posts_block( $attributes ) {
    // PHP логика получения постов и возврата HTML
}

Резюме

• Современная разработка блоков требует знания React и JSX.
• Используйте block.json для регистрации.
• Для сложных интерфейсов используйте встроенные компоненты из @wordpress/components.

Интерактивный пример

Блочный редактор — концепция Gutenberg: