How to add a custom CSS class to core blocks in Gutenberg editor?

There are issues in the answer marked as correct. It will break the alignment class functionality, and is not actually adding to the classList, instead it is overriding it. And you will only be able to use that one solution for your whole theme.

Instead you can use “registerBlockStyle()” to add a style variation to the list block, and set “isDefault” to true for it to use that class/style but still be able to skip using it, or add a multiple variations if you want.

the wp.domReady() makes sure that it loads when it should and applies the changes

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

Leave a Comment