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


And I'm enqueuing it like so:

function gdt_blocks_class_rename() {
      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?

3 Answers 3


First, there's motion to potentially add this class by default in a future version of WordPress.

If you only need to add a class on the front-end of the site (the editor already has wp-block-list on list blocks), you can do this with PHP and the WP_HTML_Tag_Processor class (new in WordPress 6.2) via the render_block filter.

add_filter( 'render_block', 'wpse308021_add_class_to_list_block', 10, 2 );
 * Polyfill wp-block-list class on list blocks
 * Should not be necessary in future version of WP:
 * @see https://github.com/WordPress/gutenberg/issues/12420
 * @see https://github.com/WordPress/gutenberg/pull/42269
function wpse308021_add_class_to_list_block( $block_content, $block ) {

    if ( 'core/list' === $block['blockName'] ) {
        $block_content = new WP_HTML_Tag_Processor( $block_content );
        $block_content->next_tag(); /* first tag should always be ul or ol */
        $block_content->add_class( 'wp-block-list' );

    return $block_content;

You have second and third arguments with this hook you can use the second to get the block type.


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;


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
  } );
} );
  • 1
    I agree. While the original answer does "work", you are right it can cause issues. If you try to add another class latter to your the WP editor baulks and things break. I've switched to using Block Styles as well now.
    – Trevor
    Jan 18, 2021 at 5:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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