Add Bootstrap button styles to default Gutenberg Button block in WordPress - 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?

Answer 1

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

Answer 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.)

Answer 3

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.