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

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

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

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

register_block_pattern( $pattern_name, $pattern_properties )

Параметры:

• $pattern_name (строка): Уникальное имя шаблона блока. Обычно используется формат namespace/pattern-name.
• $pattern_properties (массив): Массив свойств шаблона, включающий:
  • 'title' (строка): Название шаблона, отображаемое в интерфейсе.
  • 'description' (строка): Описание шаблона.
  • 'content' (строка): Содержимое шаблона в формате HTML с блоками.
  • 'categories' (массив): Массив категорий, к которым относится шаблон.
  • 'keywords' (массив): Массив ключевых слов для поиска шаблона.
  • 'viewportWidth' (целое число): Ширина вьюпорта для предпросмотра.

Возвращаемое значение:

• true при успешной регистрации, иначе false.

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

Рассмотрим несколько примеров использования функции register_block_pattern().

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

Этот пример показывает, как зарегистрировать простой шаблон блока с абзацем и заголовком:

function register_my_custom_block_pattern() {
    register_block_pattern(
        'myplugin/custom-pattern',
        array(
            'title'       => __( 'Custom Pattern', 'myplugin' ),
            'description' => _x( 'A custom pattern with a heading and a paragraph.', 'Block pattern description', 'myplugin' ),
            'content'     => "<!-- wp:heading --><h2>" . __( 'Welcome to My Site', 'myplugin' ) . "</h2><!-- /wp:heading --><!-- wp:paragraph --><p>" . __( 'This is a custom block pattern.', 'myplugin' ) . "</p><!-- /wp:paragraph -->",
            'categories'  => array( 'text' ),
            'keywords'    => array( 'custom', 'example' ),
        )
    );
}
add_action( 'init', 'register_my_custom_block_pattern' );

Регистрация шаблона блока с изображением и текстом

Этот пример показывает, как зарегистрировать шаблон блока с изображением и текстом:

function register_image_text_block_pattern() {
    register_block_pattern(
        'myplugin/image-text-pattern',
        array(
            'title'       => __( 'Image and Text', 'myplugin' ),
            'description' => _x( 'A block pattern with an image and a paragraph.', 'Block pattern description', 'myplugin' ),
            'content'     => '<!-- wp:image {"id":123,"sizeSlug":"large"} --><figure class="wp-block-image size-large"><img src="https://example.com/image.jpg" alt=""/></figure><!-- /wp:image --><!-- wp:paragraph --><p>' . __( 'This is a paragraph next to an image.', 'myplugin' ) . '</p><!-- /wp:paragraph -->',
            'categories'  => array( 'media' ),
            'keywords'    => array( 'image', 'text' ),
        )
    );
}
add_action( 'init', 'register_image_text_block_pattern' );

Регистрация сложного шаблона блока

Этот пример показывает, как зарегистрировать более сложный шаблон блока с несколькими элементами:

function register_complex_block_pattern() {
    register_block_pattern(
        'myplugin/complex-pattern',
        array(
            'title'       => __( 'Complex Pattern', 'myplugin' ),
            'description' => _x( 'A complex block pattern with various blocks.', 'Block pattern description', 'myplugin' ),
            'content'     => '
                <!-- wp:cover {"url":"https://example.com/cover.jpg","id":456,"dimRatio":50,"overlayColor":"black"} -->
                <div class="wp-block-cover has-black-background-color has-background-dim-50 has-background-dim" style="background-image:url(https://example.com/cover.jpg)">
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"textAlign":"center"} --><h2 class="has-text-align-center">' . __( 'Welcome to My Site', 'myplugin' ) . '</h2><!-- /wp:heading -->
                    </div>
                </div>
                <!-- /wp:cover -->
                <!-- wp:columns -->
                <div class="wp-block-columns">
                    <!-- wp:column -->
                    <div class="wp-block-column">
                        <!-- wp:paragraph --><p>' . __( 'This is a column.', 'myplugin' ) . '</p><!-- /wp:paragraph -->
                    </div>
                    <!-- /wp:column -->
                    <!-- wp:column -->
                    <div class="wp-block-column">
                        <!-- wp:paragraph --><p>' . __( 'This is another column.', 'myplugin' ) . '</p><!-- /wp:paragraph -->
                    </div>
                    <!-- /wp:column -->
                </div>
                <!-- /wp:columns -->',
            'categories'  => array( 'layout' ),
            'keywords'    => array( 'complex', 'layout' ),
        )
    );
}
add_action( 'init', 'register_complex_block_pattern' );

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

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