register_block_style() │ WP 5.3.0

Регистрирует новый стиль (вариацию стилей) для блока/блоков.

Функция добавляет вариацию стиля с именем (слагом) и названием. При выборе вариации к обёртке блока применяется класс вида .is-style-{name}, а CSS можно подключить заранее, добавить инлайном или сгенерировать из style_data.

Созданный оформительский вариант (вариацию стилей) пользователь может выбрать в панели стилей - это применит соответствующий CSS‑класс к выбранному блоку. Также, эту вариацию можно будет застилить в редакторе FSE.

Можно регистрировать стиль сразу для нескольких блоков, передав массив имён блоков (поддерживается в новых версиях).

Рекомендуется регистрировать стили на хуке init.

Хуков нет.

Возвращает

true|false.

  • true при успешной регистрации стиля
  • false в случае неудачи.

Использование

register_block_style( $block_name, $style_properties );
$block_name(string|array)
Имя блока в формате namespace/block или массив таких имён, для которых регистрируется стиль.
$style_properties(array)

Свойства стиля. Смотрите WP_Block_Styles_Registry::register():

  • name (string) — Обязательное. Уникальный слаг вариации стиля, формирует CSS‑класс .is-style-{name}.

  • label (string) — Обязательное. Название для интерфейса редактора.

  • style_handle (string) — хэндл (id) ранее зарегистрированного стиля, который нужно подключить. См: wp_register_style().

  • inline_style (string) — CSS, добавляемый инлайном для данного стиля.

  • style_data (array) — данные в формете theme.json, по которым будет сгенерирован CSS.

По умолчанию: []

Примеры

0

#1 Демо

Регистрируем стиль для core/paragraph с меткой и слагом, CSS подключим отдельно.

add_action( 'init', 'myplugin_register_block_styles' );

function myplugin_register_block_styles() {
	register_block_style(
		'core/paragraph',
		[
			'name'  => 'lead',
			'label' => __( 'Lead paragraph', 'myplugin' ),
		]
	);
}
0

#2 Регистрация стиля с инлайн‑CSS

Добавляем инлайн‑CSS для быстрого прототипирования без отдельного файла стилей.

add_action( 'init', 'myplugin_register_block_styles_inline' );

function myplugin_register_block_styles_inline() {
	register_block_style(
		'core/image',
		[
			'name'         => 'soft-shadow',
			'label'        => __( 'Soft shadow', 'myplugin' ),
			'inline_style' => '.wp-block-image.is-style-soft-shadow img{box-shadow:0 6px 20px rgba(0,0,0,.15);}',
		]
	);
}
0

#3 Регистрация стиля для нескольких блоков разом

Один и тот же стиль будет доступен сразу в нескольких блоках.

add_action( 'init', 'myplugin_register_multi_block_style' );

function myplugin_register_multi_block_style() {
	register_block_style(
		[ 
			'core/group', 
			'core/cover' 
		],
		[
			'name'  => 'wide-padding',
			'label' => __( 'Wide padding', 'myplugin' ),
		]
	);
}
0

#4 Регистрация с использованием style_handle

Подключаем заранее зарегистрированный стиль, чтобы не дублировать CSS.

add_action( 'init', 'myplugin_register_block_style_with_handle' );

function myplugin_register_block_style_with_handle() {
	wp_register_style(
		'myplugin-block-styles',
		get_stylesheet_directory_uri() . '/assets/css/block-styles.css',
		[],
		wp_get_theme()->get( 'Version' )
	);

	register_block_style(
		'core/list',
		[
			'name'         => 'check',
			'label'        => __( 'Check list', 'myplugin' ),
			'style_handle' => 'myplugin-block-styles',
		]
	);
}
0

#5 Регистрация через style_data (генерация CSS)

Используем style_data, чтобы WordPress сгенерировал CSS из «theme.json‑подобных» данных.

add_action( 'init', 'myplugin_register_block_style_data' );

function myplugin_register_block_style_data() {
	register_block_style(
		'core/group',
		[
			'name'       => 'green-bg',
			'label'      => __( 'Green background', 'myplugin' ),
			'style_data' => [
				'color' => [
					'background' => 'green',
				],
				'spacing' => [
					'padding' => [
						'top'    => '1.5rem',
						'right'  => '1.5rem',
						'bottom' => '1.5rem',
						'left'   => '1.5rem',
					],
				],
			],
		]
	);
}

Список изменений

С версии 5.3.0 Введена.
С версии 6.6.0 Added support for registering styles for multiple block types.

Код register_block_style() WP 6.9.1

wp-includes/blocks.php 
function register_block_style( $block_name, $style_properties ) {
	return WP_Block_Styles_Registry::get_instance()->register( $block_name, $style_properties );
}

Редактор блоков (Gutenberg Гутенберг blocks)

Редактор Блоков (Гутенберг)