register_block_type()

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

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

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы регистрируем новый тип блока с именем ‘my-plugin/my-block’. Мы указываем API-версию 2, название блока ‘My Block’ и категорию ‘common’. Также мы указываем функцию обратного вызова ‘my_plugin_render_block’, которая будет использоваться для отображения блока.

Создание метаданных для блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'attributes' => array(
            'text' => array(
                'type' => 'string',
                'default' => 'Hello, World!',
            ),
        ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы добавляем метаданные для блока, включая атрибут ‘text’ с типом ‘string’ и значением по умолчанию ‘Hello, World!’. Этот атрибут будет доступен в функции обратного вызова для отображения содержимого блока.

Установка иконки для блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'icon' => 'admin-site',
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы устанавливаем иконку блока с помощью значения ‘admin-site’. Это значение соответствует иконке сайта в административной панели WordPress.

Описание блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'description' => 'This is a custom block created by My Plugin.',
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы добавляем описание блока с помощью значения ‘This is a custom block created by My Plugin.’. Это описание будет отображаться в интерфейсе редактирования блоков.

Настройка категории блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы устанавливаем категорию блока в значение ‘common’. Эта категория используется для классификации блоков в интерфейсе поиска.

Установка родительского блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'parent' => array( 'core/paragraph', 'core/image' ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы устанавливаем родительский блок для нашего блока. Это означает, что наш блок будет доступен только при вложении в блоки ‘core/paragraph’ и ‘core/image’.

Определение доступности блока внутри других блоков

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'ancestor' => array( 'core/group', 'core/columns' ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы определяем, что наш блок будет доступен только внутри блоков ‘core/group’ и ‘core/columns’ в любой позиции в древовидной структуре блока предка.

Добавление ключевых слов для поиска блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'keywords' => array( 'my', 'block', 'custom' ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы добавляем ключевые слова ‘my’, ‘block’ и ‘custom’ для нашего блока. Эти ключевые слова будут использоваться для поиска блока в интерфейсе.

Установка текстового домена для перевода

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'textdomain' => 'my-plugin',
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы устанавливаем текстовый домен ‘my-plugin’ для перевода нашего блока. Этот текстовый домен будет использоваться для локализации строк блока.

Создание альтернативных стилей блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'styles' => array(
            array(
                'name' => 'default',
                'label' => 'Default',
                'isDefault' => true,
            ),
            array(
                'name' => 'wide',
                'label' => 'Wide',
            ),
        ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы создаем альтернативные стили для нашего блока. У нас есть стиль ‘default’ с меткой ‘Default’, который является стилем по умолчанию, и стиль ‘wide’ с меткой ‘Wide’.

Создание вариаций блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'variations' => array(
            array(
                'name' => 'variation-1',
                'label' => 'Variation 1',
            ),
            array(
                'name' => 'variation-2',
                'label' => 'Variation 2',
            ),
        ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы создаем вариации для нашего блока. У нас есть вариация ‘variation-1’ с меткой ‘Variation 1’ и вариация ‘variation-2’ с меткой ‘Variation 2’.

Определение пользовательских CSS-селекторов

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'selectors' => array(
            'p' => 'p.my-block',
            'h1' => 'h1.my-block',
        ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы определяем пользовательские CSS-селекторы для нашего блока. У нас есть селектор ‘p’ со значением ‘p.my-block’ и селектор ‘h1’ со значением ‘h1.my-block’.

Определение поддерживаемых функций блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'supports' => array(
            'align' => array( 'wide', 'full' ),
            'anchor' => true,
            'html' => false,
        ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы определяем поддерживаемые функции для нашего блока. У нас есть поддержка выравнивания с значениями ‘wide’ и ‘full’, поддержка якоря и отключение редактирования HTML-кода.

Добавление структурированных данных для предварительного просмотра блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'example' => array(
            'attributes' => array(
                'text' => 'Hello, World!',
            ),
        ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы добавляем структурированные данные для предварительного просмотра нашего блока. У нас есть атрибут ‘text’ со значением ‘Hello, World!’.

Определение схем атрибутов блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'attributes' => array(
            'text' => array(
                'type' => 'string',
                'default' => 'Hello, World!',
            ),
            'color' => array(
                'type' => 'string',
                'default' => 'red',
                'enum' => array( 'red', 'blue', 'green' ),
            ),
        ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы определяем схемы атрибутов для нашего блока. У нас есть атрибут ‘text’ с типом ‘string’ и значением по умолчанию ‘Hello, World!’, и атрибут ‘color’ с типом ‘string’, значением по умолчанию ‘red’ и возможными значениями ‘red’, ‘blue’ и ‘green’.

Установка контекста использования блока

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'uses_context' => array( 'query' ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы устанавливаем контекст использования для нашего блока. У нас есть контекст ‘query’, который указывает, что наш блок использует контекст запроса.

Определение контекста, предоставляемого блоком

function my_plugin_register_block_type() {
    register_block_type( 'my-plugin/my-block', array(
        'api_version' => 2,
        'title' => 'My Block',
        'category' => 'common',
        'render_callback' => 'my_plugin_render_block',
        'provides_context' => array( 'query' ),
    ) );
}
add_action( 'init', 'my_plugin_register_block_type' );

В этом примере мы определяем контекст, предоставляемый нашим блоком. У нас есть контекст ‘query’, который указывает, что наш блок предоставляет контекст запроса.

Установка скриптов редактора блока

function my_plugin_enqueue_block_editor_assets() {
    wp_enqueue_script(
        'my-plugin-block-editor',
        plugins_url( 'block-editor.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block-editor.js' )
    );
}
add_action( 'enqueue_block_editor_assets', 'my_plugin_enqueue_block_editor_assets' );

В этом примере мы устанавливаем скрипты редактора для нашего блока. Мы используем функцию wp_enqueue_script() для загрузки скрипта ‘my-plugin-block-editor.js’, который зависит от скриптов ‘wp-blocks’ и ‘wp-element’.

Установка скриптов для фронтенда и редактора блока

function my_plugin_enqueue_block_assets() {
    wp_enqueue_script(
        'my-plugin-block',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );
}
add_action( 'enqueue_block_assets', 'my_plugin_enqueue_block_assets' );

В этом примере мы устанавливаем скрипты для фронтенда и редактора нашего блока. Мы используем функцию wp_enqueue_script() для загрузки скрипта ‘my-plugin-block.js’, который зависит от скриптов ‘wp-blocks’ и ‘wp-element’.

Установка скриптов только для фронтенда блока

function my_plugin_enqueue_block_assets() {
    if ( ! is_admin() ) {
        wp_enqueue_script(
            'my-plugin-block',
            plugins_url( 'block.js', __FILE__ ),
            array( 'wp-blocks', 'wp-element' ),
            filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
        );
    }
}
add_action( 'enqueue_block_assets', 'my_plugin_enqueue_block_assets' );

В этом примере мы устанавливаем скрипты только для фронтенда нашего блока. Мы используем функцию wp_enqueue_script() внутри условия, чтобы убедиться, что скрипты загружаются только на фронтенде, а не в административной панели.

Установка стилей редактора блока

function my_plugin_enqueue_block_editor_assets() {
    wp_enqueue_style(
        'my-plugin-block-editor',
        plugins_url( 'block-editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block-editor.css' )
    );
}
add_action( 'enqueue_block_editor_assets', 'my_plugin_enqueue_block_editor_assets' );

В этом примере мы устанавливаем стили редактора для нашего блока. Мы используем функцию wp_enqueue_style() для загрузки стиля ‘my-plugin-block-editor.css’, который зависит от стиля ‘wp-edit-blocks’.

Установка стилей для фронтенда и редактора блока

function my_plugin_enqueue_block_assets() {
    wp_enqueue_style(
        'my-plugin-block',
        plugins_url( 'block.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.css' )
    );
}
add_action( 'enqueue_block_assets', 'my_plugin_enqueue_block_assets' );

В этом примере мы устанавливаем стили для фронтенда и редактора нашего блока. Мы используем функцию wp_enqueue_style() для загрузки стиля ‘my-plugin-block.css’, который зависит от стиля ‘wp-edit-blocks’.