Add Bootstrap button styles to default Gutenberg Button block in WordPress

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:

1. WordPress adds the class in the wrong way
2. 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?

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