В этой статье мы рассмотрим функцию 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()
в ваши проекты и улучшить пользовательский опыт работы с блоками.