12

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?

12

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
);
| improve this answer | |
2

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
  } );
} );
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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