В этой статье мы рассмотрим функцию 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.