Wordpress - How to add a custom CSS class to core blocks in Gutenberg editor?
You have second and third arguments with this hook you can use the second to get the block type.
https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/
A filter that applies to all blocks returning a WP Element in the save function. This filter is used to add extra props to the root element of the save function. For example: to add a className, an id, or any valid prop for this element. It receives the current props of the save element, the block type and the block attributes as arguments.
function addBlockClassName( props, blockType ) {
if(blockType.name === 'core/list') {
return Object.assign( props, { class: 'wp-block-list' } );
}
return props;
}
wp.hooks.addFilter(
'blocks.getSaveContent.extraProps',
'gdt-guten-plugin/add-block-class-name',
addBlockClassName
);
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
} );
} );