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

Нужно поменять дефолтные классы блоков гутенберга.
Например блок Видео выводится так:
<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 класс можно задать для текущего блока в дополнительных настройках, но такой вариант не подходит. Нужно поменять дефолтный класс.
  • Вопрос задан
  • 89 просмотров
Решения вопроса 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
$('.wp-block-video').addClass('.publication__video');
Ответ написан
Пригласить эксперта
Ответы на вопрос 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 определяете свой собственный блок и пишете свой рендер для него.
Ответ написан
Комментировать
dimasmagadan
@dimasmagadan
wp.domReady( () => {
  wp.blocks.registerBlockStyle( 'core/list', {
    name: 'custom-list-style',
    label: 'Custom list style',
    isDefault: true
  } );
} );
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы