Gutenberg How to set default css class for blocks?

Question

WordPress

You need to change the default classes of the gutenberg blocks.
For example, the Video block is displayed like this:

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

I need like this:

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

That is, you need to add publication__video to wp-block-video. I know that the css class can be set for the current block in the advanced settings, but this option is not suitable. You need to change the default class.

Answer 1

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

Answer 2

There are several solutions:
1. HTML patching of the rendered block
The easiest to implement, but far from the most stable option. Define a filter to render your block type, in this case:

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

To work correctly with HTML, it is better to use the DOM extension .
2. Redefine the render of the entire block
To do this, you need to register a block with exactly the same name and redefine its render. See the documentation for details .
3. Make your own block
Also, register_block_typedefine your own block and write your own render for it.

Answer 3

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