Gutenberg Как задать css класс по умолчанию блокам?

Question

[Mike & Bob]

Нужно поменять дефолтные классы блоков гутенберга.
Например блок Видео выводится так:

<figure class="wp-block-video"><video controls="" src="..."></video></figure>

Мне нужно так:

<figure class="publication__video wp-block-video"><video controls="" src="..."></video></figure>

То есть к wp-block-video нужно добавить publication__video

Знаю что css класс можно задать для текущего блока в дополнительных настройках, но такой вариант не подходит. Нужно поменять дефолтный класс.

Answer 1

[Антон Литвиненко]

$('.wp-block-video').addClass('.publication__video');

Comments

[Mike & Bob]

Не самый правильный вариант, но самый быстрый и работает прекрасно.
По Api правильнее, но это адский ад.

[Flying]

Mike & Bob, Вы уверены по поводу прекрасности работы этого варианта?

У вас на этот .publication__video случаем стили не завязаны? Если да - вы как проверяли работоспособность? Небось локально или на хорошем соединении с прогретым кэшем? Вы пробовали включить в dev.tools network throttling на какой-нибудь 3G и отключить кэш? Если нет - рекомендую попробовать, возможно тогда вы пересмотрите своё мнение.

Если стили на этот элемент не навешиваются или если этот элемент отрисовывается позже - то тогда в целом подобное решение имеет право на существование.

[Антон Литвиненко]

Flying, мне если честно тоже по душе правильный вариант.

[Mike & Bob]

Flying, как ни странно, с троттлингом также все отлично работает, мгновенно. Страницы новостные и достаточно легкие. Класс нужен чтобы правильные отступы между блоками установить.

Я понимаю хейт такого решения, сам искал как это сделать правками редактора. Как открыл api редактора понял что это на несколько часов, чтобы туда вкатиться. Слишком много для того чтобы навесить класс на блок на новостной странице.

Answer 2

[Flying]

Есть несколько вариантов решения:

1. Патчинг HTML отрендеренного блока

Самый простой в реализации, но далеко не самый стабильный вариант. Определите фильтр для рендера вашего типа блока, в данном случае:

add_filter('render_block_core/video', function (string $content, array $block) {
    // Здесь вам нужно изменить содержимое переменной $content
    // она содержит уже отрендеренный HTML код блока.
    return $content;
}, 10, 2);

Для корректной работы с HTML лучше использовать расширение DOM.

2. Переопределить рендер блока целиком

Для этого вам нужно зарегистрировать блок с точно таким же названием и переопределить его рендер. Подробнее смотрите в документации.

3. Сделать свой блок

Также, через register_block_type определяете свой собственный блок и пишете свой рендер для него.

Answer 3

[Дмитрий]

wp.domReady( () => {
  wp.blocks.registerBlockStyle( 'core/list', {
    name: 'custom-list-style',
    label: 'Custom list style',
    isDefault: true
  } );
} );