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

I’m trying to add a class to list blocks (core/list) in Gutenberg. Unfortunately, it looks like because some blocks like lists and paragraphs don’t have the standard default class name of wp-block-{name} they can’t be renamed using the blocks.getBlockDefaultClassName filter.

To get around that, I’ve used the blocks.getSaveContent.extraProps filter, which seems to enable me to add a class to ALL the blocks that don’t already have classes. Code below is how I got that working. It’s adding added-class-name to blocks likes lists and paragraphs and so on.

function addBlockClassName( className ) {
  return Object.assign( className, { class: 'added-class-name' } );
}

wp.hooks.addFilter(
  'blocks.getSaveContent.extraProps',
  'gdt-guten-plugin/add-block-class-name',
  addBlockClassName
);

And I’m enqueuing it like so:
function gdt_blocks_class_rename() {
  wp_enqueue_script(
      'gdt-plugin-blacklist-blocks',
      get_stylesheet_directory_uri() . '/dist/guten-addons.js',
      array( 'wp-blocks' )
  );
}
add_action( 'enqueue_block_editor_assets', 'gdt_blocks_class_rename' );

However, what I want to be able to do is add a class to ONLY list blocks? Can that be done at all?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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
  } );
} );

Method 2

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
);


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Shreyas Ikhar
Shreyas Ikhar
2 months ago

Is there a way to use useEffect inside this filter callback ?

function addBlockClassName( props, blockType ) {
    const postType = wp.data.useSelect(( select ) => select( 'core/editor' ).getCurrentPostType(),[]);

    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
);

It returns react minified error for me

Last edited 2 months ago by Shreyas Ikhar
1
0
Would love your thoughts, please comment.x
()
x