Add Bootstrap button styles to default Gutenberg Button block in WordPress

Question

I want to use the default button styles from the Bootstrap framework with the default button block of Gutenberg.

I found a solution to remove the default styles from WordPress and add some own styles. Here's the link: https://www.billerickson.net/block-styles-in-gutenberg/

I'm using the code from Bill Erickson to remove the default styles and add a new one. In my case, the .btn-primary style from Bootstrap:

wp.domReady( () => {
    wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
    wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
    wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );

    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'btn',
        label: 'Default',
        isDefault: true,
    });

    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'btn-primary',
        label: 'Primary',
    } );

} );

There a two problems here:

WordPress adds the class in the wrong way
It just adds one class but Bootstrap needs two at least

This is the button code after adding the class:

<div class="wp-block-button aligncenter is-style-btn-primary">
    <a class="wp-block-button__link" href="#">Button</a>
</div>

As you can see, WordPress adds the new class two the div around the button. And it adds is-style- to the class.

To use the button block with Bootstrap styles. I need a code like this:

<div class="wp-block-button aligncenter is-style-btn-primary">
    <a class="btn btn-primary" href="#">Button</a>
</div>

The class has to be inside the <a> tag and I need the second class .btn as well.

Is there any way to add these two classes to the <a> tag?

Was searching for the same kind of information. I will follow this tread. — Patrice Poliquin
– Patrice Poliquin, Commented May 13, 2019 at 18:16

Jeremy Richardson · Accepted Answer · 2020-04-10 19:11:55Z

Another way you can take care of this is using SCSS @extend

First register block styles that will show up in the buttons block editor:

    wp.domReady ( function() {

    wp.blocks.unregisterBlockStyle( 'core/button', 'outline');
    wp.blocks.unregisterBlockStyle( 'core/button', 'fill');
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-default',
        label: 'Bootstrap Default',
        isDefault: true
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-primary',
        label: 'Bootstrap Primary',
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-success',
        label: 'Bootstrap Success',
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-default-lg',
        label: 'Bootstrap Default Large',
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-primary-lg',
        label: 'Bootstrap Primary Large',
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-success-lg',
        label: 'Bootstrap Success Large',
    }); 

});

Then I created a _wordpress.scss that gets included and compiled with the rules from each block style and what Bootstrap rules they extend:

.is-style-bootstrap-default > a {
    @extend .btn;
    @extend .btn-default;
}

.is-style-bootstrap-primary > a {
    @extend .btn;
    @extend .btn-primary;
}

.is-style-bootstrap-success > a {
    @extend .btn;
    @extend .btn-success;
}

.is-style-bootstrap-default-lg > a {
    @extend .btn;
    @extend .btn-default;
    @extend .btn-lg;
}

.is-style-bootstrap-primary-lg > a {
    @extend .btn;
    @extend .btn-primary;
    @extend .btn-lg;
}

.is-style-bootstrap-success-lg > a {
    @extend .btn;
    @extend .btn-success;
    @extend .btn-lg;
}

shrthnd · Accepted Answer · 2019-08-09 02:10:43Z

2

I think you will find it is less complicated to write your own button than override existing component. If you really want to override the core button block you will probably need to apply the appropriate block filters.

If you are looking for an immediate solution, the source of the button component inside the Advanced Bootstrap Blocks plugin may get you started, or you can install through the plugin directory.

(Full disclosure: I am the author of this plugin.)

answered Aug 9, 2019 at 2:10

shrthnd

865 bronze badges

Comments

Michael · Accepted Answer · 2024-05-09 20:22:30Z

1

You can use the render_block filter to customize the block content:

function my_theme_render_block( $block_content, $block ) {
    if ( $block['blockName'] === 'core/button' ) {
        return str_replace( 'wp-block-button__link', 'btn btn-primary', $block_content );
    }

    return $block_content;
}

add_filter( 'render_block', 'my_theme_render_block', 10, 2 );

More information: https://developer.wordpress.org/reference/hooks/render_block/

answered May 9, 2024 at 20:22

Michael

2,0385 gold badges26 silver badges40 bronze badges

Comments

FED · Accepted Answer · 2019-05-15 14:45:34Z

0

You can either install this plugin: https://wordpress.org/plugins/wp-bootstrap-blocks/

Or read the plugin code and create your own block, then you can also create your own custom styles for buttons.

answered May 15, 2019 at 14:45

FED

374 bronze badges

Collectives™ on Stack Overflow

Add Bootstrap button styles to default Gutenberg Button block in WordPress

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related