Add a way to filter CSS classes for blocks using PHP

[carolinan]

Is your feature request related to a problem? Please describe.

A developer may want to add extra classes to existing blocks,
without using the additional CSS class field.
For example if you are using a design system and need to make the blocks more compatible with a theme or plugins current CSS.
The downside with the CSS class input field is that, a developer can populate it, but the user can also remove that class.

Or, the developer wants a list of all CSS classes that are used for a block.
I ran into this when I tried to document the class names used as part of a block reference.

There is a solution for JS:
https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getblockdefaultclassname

But not for PHP/server side. (-If there is, I was not able to find it and documentation needs to be improved)
For PHP, we can use https://developer.wordpress.org/reference/functions/render_block/
By using render_block we can get block attributes and block content,
but the CSS classes names are then only available as part of the content, and getting them is possible but "hacky".

Describe the solution you'd like
I want the class names, including the wp-block-block-name and CSS classes added by attributes and supports and the additional CSS field, to be available inside an array, be it separate or as part of the attributes.

[ndiego]

@carolinan I just stumbled upon this ticket. Where you ever able to find an efficient way to do this in PHP?

[carolinan]

I have not looked into this since creating the issue.
I can't speak of efficiency but this example for adding classes depending on attributes still works for the front
https://github.com/carolinan/fullsiteediting/blob/course/All%20about%20blocks/Lesson%202%20Block%20attributes/render_block.php

[ndiego]

Thanks for the followup. The example you provided is great when you know exactly what you are targeting, but if a block doesn't have any classes attached it starts to get tricky, and as you mentioned, feels very "hacky". Guess I am going to stick to using the blocks.getSaveContent.extraProps filter for the time being, which has it's own issues.

[ryanleichty]

I'm also trying to find a solution for this too—doing a string search and replace doesn't feel like a great long term method.

[timsinc]

Agree. Would be really nice to have a php filter available for the default block class names similar to the existing block_type_metadata filters.

[pagegwood]

The fact that this is not possible with PHP, years after Gutenberg was released, is mind-boggling.

[giannis-koulouris-bb]

I'm also using blocks.getSaveContent.extraProps filter for the moment, but don't like the idea of having block validation errors if I would like to change something in the future, ideally a PHP solution for changing attributes like class & style would be very helpful..

[giannis-koulouris-bb]

Do we have any news on this?

[niklasp]

also need

[CreativeDive]

+1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1 +1

[pagelab]

The WP_HTML_Tag_Processor can help with some of that. It was merged in the Gutenberg Plugin, and soon it will be part of core (maybe as soon as 6.2 is launched).

One example of usage: adding custom classes to any specific core block using render_block_{$this->name}:

// Adds a class to the list block.
add_filter( 'render_block_core/list', 'PL_add_class_to_list_block', 10, 3 );

/**
 * Applies a custom CSS class to the list block.
 *
 * @link  https://developer.wordpress.org/reference/hooks/render_block_this-name/
 * @param $block_content  string  The block content about to be appended.
 * @param $block          array   The full block, including name and attributes.
 * @param $instance       array   The block instance.
 * @return string
 */
function PL_add_class_to_list_block( $block_content, $block, $instance ) {

    // Instantiate the tag processor.
    $content = new WP_HTML_Tag_Processor( $block_content );

    // Find the first <ul> or <ol> tag in the block markup.
    $content->next_tag( [ 'ol', 'ul' ] );
    // Note: soon this will change to `$content->next( [ 'ol', 'ul' ] )`;

    // Add a custom class.
    $content->add_class( 'wp-block-list' );

    // Save the updated block content.
    $block_content = (string) $content;

    // Return the block content.
    return $block_content;
}

[CreativeDive]

@pagelab thank you. I'm wondering if there will be a solution to add custom class names to a block in editor view as well? The render_block filter is a solution for the front end output only.

[pagelab]

@pagelab thank you. I'm wondering if there will be a solution to add custom class names to a block in editor view as well? The render_block filter is a solution for the front end output only.

@CreativeDive Yes, you can use this approach (via JS) to add custom classes to specific blocks in the editor.

[giannis-koulouris-bb]

This is actually really huge! It will allow us to filter blocks on the front-end without possible invalidation errors

[jordesign]

Hey @carolinan - I'm just checking if the improvements/advancements mentioned in the above comments are a sufficient solution for this issue. Or if they are just more of a workaround, and the issue should remain open?

[jordesign]

With no further movement on this issue (and the fact it sounds as though it may be resolved) - I'll close it for now. We can always re-open it if there is more to be dealt with.

[rmorse]

I've just come across this issue too - hoping it's not going to be stay closed.

The only way to modify the html output of a block is to use the WP_HTML_Tag_Processor, but I think that's quite an expensive solution when all I would want to do is modify some of the block attributes.

I think it would be great to have a filter for each block to modify any attribute (incl class name) just before render.