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?

up vote 6 down vote accepted

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

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.