wordpress - 将 Bootstrap 按钮样式添加到 WordPress 中的默认古腾堡按钮 block

Question

我想将 Bootstrap 框架中的默认按钮样式与 Gutenberg 的默认按钮 block 一起使用。

我找到了一个解决方案，可以从 WordPress 中删除默认样式并添加一些自己的样式。链接如下:https://www.billerickson.net/block-styles-in-gutenberg/

我正在使用 Bill Erickson 的代码来删除默认样式并添加新样式。就我而言，.btn-primary 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',
    } );

} );

这里有两个问题:

1. WordPress 以错误的方式添加类
2. 它只添加一个类，但 Bootstrap 至少需要两个

这是添加类后的按钮代码:

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

如您所见，WordPress 在按钮周围的 div 添加了新的第二类。它添加了 is-style-到类(class)。

使用带有 Bootstrap 样式的按钮 block 。我需要这样的代码:

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

该类必须位于 <a> 内标签，我需要第二类 .btn也是如此。

有什么办法可以将这两个类添加到 <a> 中吗？标签？

Answer 1

解决这个问题的另一种方法是使用 SCSS @extend

首先注册将显示在按钮 block 编辑器中的 block 样式:

    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',
    }); 

});

然后我创建了一个 _wordpress.scss，它包含并编译了每个 block 样式的规则以及它们扩展的 Bootstrap 规则:

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