Gutenberg: Button block: Allow for setting custom link class

[webmandesign]

Currently the custom block class is applied on the block container, which in Button block case is a <div class="wp-block-button my-custom-class"> (using my-custom-class as an example here).

However, as most themes style some sort of button class (such as .button or .btn) that could also be simply applied on links, we can not apply such class on the Button block link itself.

The desired Button block output HTML would then be (using my-custom-class as an example here):

<div class="wp-block-button">
    <a class="wp-block-button__link my-custom-class" href="...">...</a>
</div>

The best would be to allow theme developers to add such class via a filter hook maybe? But surely, probably a user input field would be beneficial too.

This was also discussed in #8971

[klihelp]

The referenced ticket for button is closed:
https://github.com/WordPress/gutenberg/issues/8971

There is no way to set the class to the anchor link inside the button block?

[webmandesign]

@klihelp Depending on what exactly you need to do, you can use something like:

<?php

add_filter( 'render_block', function( $block_content, $block ) {

    // Button block additional class.
    $block_content = str_replace(
        'wp-block-button__link',
        'wp-block-button__link button',
        $block_content
    );

    return $block_content;

}, 5, 2 );

You can take it further from here if needed.

[klihelp]

Thank you @webmandesign, this is helpful for developers, but not for the content editors within the edit page.
Main function would be to use button classes provided by css frameworks, like Bootstrap.

[webmandesign]

@klihelp You could actually tweak the code I've provided to gain such functionality you request. However, you would probably have to do some trickery, so, if we could set up a custom CSS class on button link directly in block options, it would be much better solution.

But here is the simplest solution I came up with:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( 'core/button' === $block['blockName'] && isset( $block['attrs']['className'] ) ) {
        // Setting up a subset of custom button link classes.
        $allowed_button_link_classes = array(
            'my-custom-class',
            'another-custom-class',
            'example-custom-class',
            // ...
        );

        // Remove allowed button link classes from the button container first.
        $block_content = str_replace(
            $allowed_button_link_classes,
            '',
            $block_content
        );

        // Get custom button classes set for the block.
        $custom_classes = explode( ' ', $block['attrs']['className'] );

        // Apply allowed custom button link classes.
        $block_content = str_replace(
            'wp-block-button__link',
            'wp-block-button__link ' . implode( ' ', array_intersect( $custom_classes, $allowed_button_link_classes ) ),
            $block_content
        );
    }

    return $block_content;
}, 5, 2 );

Basically, this is looking only for a specified subset of custom button classes that can be applied on button link directly. Please set the $allowed_button_link_classes array to your CSS framework button classes you would like to use. Should work just fine then.

[klihelp]

Thank you, this looks really good to extend block classes as part of the theme design.
Most other blocks set classes directly to the container. With this method also possible to apply default classes on frontend. I have to try and see in the editor if it would be possible to reflect the classes and apply styles from custom editor css.

[pagelab]

@webmandesign This is a nice workaround, thanks for sharing. But the ability to easily filter classes on child elements for any native block should definitely be part of core. Filtering only the container class is not flexible enough. It makes something like functional CSS not feasible to use.

[pagelab]

Related https://github.com/WordPress/gutenberg/issues/17194

[paaljoachim]

Is this issue still valid?

[webmandesign]

Is this issue still valid?

Well, not for me anymore as I am theme author. I can work around this issue. But I still believe this can be useful for editors, for example.