Сергей Мочалов

Gutenberg блоки на PHP

—

Сергей Мочалов

Блоки для Gutenberg (блочного редактора WordPress) изначально разрабатывались на основе React, ведь по сути Gutenberg — SPA React приложение внутри админки WordPress.

И какого было удивление когда в репозитории Gutenberg на Github я увидел среди множества обсуждений регистрацию блока с добавлением флага autoRegister, что позволяло вам вообще не использовать JSX-код для реализации блока Gutenberg, достаточно было чистого PHP… Попробовал — всё работает, хотя в первой версии были баги, но к релизу WordPress 7.0 их исправили.

Что такое PHP-only регистрация блоков?

Начиная с WordPress 7.0, разработчики могут создавать простые блоки используя только PHP. Эта возможность предназначена для блоков, которым нужен только серверный рендеринг и которые не должны быть высоко интерактивными. PHP-only регистрация не заменяет существующий клиентский подход, но помогает избежать лишней сложности, особенно в классических темах или серверных проектах.

Как это работает

Для регистрации блока используется стандартная функция register_block_type с новым флагом autoRegister в секции supports. Обязательно нужно указать render_callback.

function gutenberg_register_php_only_blocks() {
    register_block_type(
        'my-plugin/example',
        array(
            'title'           => __( 'My Example Block', 'myplugin' ),
            'attributes'      => array(
                'title'   => array(
                    'label'   => __( 'Title', 'myplugin' ),
                    'type'    => 'string',
                    'default' => 'Hello World',
                ),
                'count'   => array(
                    'label'   => __( 'Count', 'myplugin' ),
                    'type'    => 'integer',
                    'default' => 5,
                ),
                'enabled' => array(
                    'label'   => __( 'Enabled?', 'myplugin' ),
                    'type'    => 'boolean',
                    'default' => true,
                ),
                'size'    => array(
                    'label'   => __( 'Size', 'myplugin' ),
                    'type'    => 'string',
                    'enum'    => array( 'small', 'medium', 'large' ),
                    'default' => 'medium',
                ),
            ),
            'render_callback' => function ( $attributes ) {
                return sprintf(
                    __( '<p>%s: %d items (%s)</p>', 'myplugin' ),
                    esc_html( $attributes['title'] ),
                    $attributes['count'],
                    $attributes['size']
                );
            },
            'supports'        => array(
                'autoRegister' => true,
            ),
        )
    );
}

add_action( 'init', 'gutenberg_register_php_only_blocks' );
Code language: PHP (php)

Такие блоки автоматически появляются в редакторе без необходимости в JavaScript-регистрации. Там, где это возможно, редактор сам генерирует контролы в боковой панели Inspector Controls для редактирования атрибутов блока.

Поддерживаемые типы атрибутов

На данный момент поддерживаются следующие типы:

  • string — текстовое поле
  • number — число
  • integer — целое число
  • boolean — переключатель (checkbox)

Атрибуты не должны быть «sourced» (сохраняться в HTML), они должны храниться в JSON блока (это поведение по умолчанию). Контролы не будут сгенерированы для атрибутов с ролью local или для неподдерживаемых типов. Для атрибутов с enum автоматически создаётся выпадающий список.

Важно: метки атрибутов (label) локализуемы через __( 'Text', 'domain' ).

Ограничения первой версии

  • Нет поддержки вложенных блоков (inner blocks)
  • Нет функции save — только render_callback для серверного рендеринга
  • Нет поддержки медиафайлов и Rich Text
  • Нет поддержки textarea и других сложных полей ввода
  • Требуется WordPress 7.0-beta3+

Это первая итерация функционала. В будущем, по мере развития Fields API и Block Fields, возможно появление новых типов полей и расширение возможностей.

Полезные ссылки