Функция register_block_type() в WordPress: Регистрация блоков Gutenberg

В этой статье мы рассмотрим функцию register_block_type() в WordPress, которая используется для регистрации новых блоков Gutenberg. Эта функция является ключевым элементом для разработчиков, создающих собственные блоки для редактора блоков в WordPress.

Описание функции

Функция register_block_type() регистрирует новый блок, который затем можно использовать в редакторе Gutenberg.

register_block_type( $name, $args )

Параметры:

• $name (строка): Уникальное имя блока, обычно в формате namespace/block-name.
• $args (массив): Ассоциативный массив аргументов для настройки блока.

Основные аргументы:

• api_version (целое число): Версия API блока (по умолчанию 1).
• title (строка): Название блока, отображаемое в редакторе.
• description (строка): Описание блока.
• category (строка): Категория, в которой будет находиться блок.
• icon (строка или массив): Иконка блока.
• keywords (массив): Список ключевых слов для поиска блока.
• attributes (массив): Массив атрибутов блока.
• supports (массив): Опции, поддерживаемые блоком.
• render_callback (строка): Функция для рендеринга динамического блока.

Примеры использования

Рассмотрим несколько примеров регистрации блоков с использованием register_block_type().

Простой текстовый блок

Создадим простой текстовый блок:

function my_custom_block_init() {
    register_block_type( 'myplugin/simple-text', array(
        'title'       => __( 'Simple Text', 'myplugin' ),
        'description' => __( 'A simple text block.', 'myplugin' ),
        'category'    => 'common',
        'icon'        => 'text',
        'keywords'    => array( 'text', 'simple' ),
        'attributes'  => array(
            'content' => array(
                'type'    => 'string',
                'default' => __( 'Hello, world!', 'myplugin' ),
            ),
        ),
        'render_callback' => 'my_custom_block_render_callback',
    ) );
}
add_action( 'init', 'my_custom_block_init' );

function my_custom_block_render_callback( $attributes ) {
    return '<p>' . esc_html( $attributes['content'] ) . '</p>';
}

Блок с изображением и текстом

Создадим блок, который содержит изображение и текст:

function my_image_text_block_init() {
    register_block_type( 'myplugin/image-text', array(
        'title'       => __( 'Image and Text', 'myplugin' ),
        'description' => __( 'A block with an image and text.', 'myplugin' ),
        'category'    => 'media',
        'icon'        => 'format-image',
        'keywords'    => array( 'image', 'text' ),
        'attributes'  => array(
            'imageUrl' => array(
                'type' => 'string',
            ),
            'text' => array(
                'type'    => 'string',
                'default' => __( 'Sample text', 'myplugin' ),
            ),
        ),
        'render_callback' => 'my_image_text_block_render_callback',
    ) );
}
add_action( 'init', 'my_image_text_block_init' );

function my_image_text_block_render_callback( $attributes ) {
    $image_html = $attributes['imageUrl'] ? '<img src="' . esc_url( $attributes['imageUrl'] ) . '" alt="" />' : '';
    $text_html = '<p>' . esc_html( $attributes['text'] ) . '</p>';
    return '<div class="image-text-block">' . $image_html . $text_html . '</div>';
}

Динамический блок с серверным рендерингом

Создадим динамический блок, который выводит текущую дату:

function my_dynamic_block_init() {
    register_block_type( 'myplugin/dynamic-date', array(
        'title'       => __( 'Dynamic Date', 'myplugin' ),
        'description' => __( 'A block that displays the current date.', 'myplugin' ),
        'category'    => 'widgets',
        'icon'        => 'calendar',
        'keywords'    => array( 'date', 'dynamic' ),
        'render_callback' => 'my_dynamic_block_render_callback',
    ) );
}
add_action( 'init', 'my_dynamic_block_init' );

function my_dynamic_block_render_callback() {
    return '<p>' . date( 'F j, Y' ) . '</p>';
}

Заключение по register_block_type

Функция register_block_type() предоставляет разработчикам простой способ создавать и регистрировать новые блоки для редактора Gutenberg в WordPress. Используя её, можно создавать разнообразные блоки, от простых текстовых до динамических, рендерящихся на сервере.

Попробуйте интегрировать register_block_type() в ваши проекты и создайте уникальные блоки, чтобы улучшить пользовательский опыт вашего сайта. Если у вас есть вопросы, рекомендую ознакомиться с моим курсом по Gutenberg.