将引导按钮样式添加到WordPress中的默认Gutenberg按钮块

我想使用Bootstrap框架中的默认按钮样式和Gutenberg的默认按钮块

我找到了一个从WordPress中删除默认样式并添加一些自己的样式的解决方案。以下是链接：

我正在使用Bill Erickson的代码删除默认样式并添加新样式。在我的例子中，Bootstrap中的

.btn primary

样式：

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

} );

这里有两个问题：

WordPress以错误的方式添加类

它只添加了一个类，但引导程序至少需要两个类

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

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

类必须位于

标记内，我还需要第二个类

.btn

---

有没有办法将这两个类添加到

标记中？

您可以安装此插件：

---

或者阅读插件代码并创建自己的块，然后您还可以为按钮创建自己的自定义样式。

我想您会发现编写自己的按钮比覆盖现有组件要简单。如果您真的想覆盖核心按钮块，您可能需要应用适当的

如果您正在寻找即时解决方案，中按钮组件的源代码可能会帮助您开始，或者您可以通过安装

---

（完全公开：我是这个插件的作者。）

另一种解决方法是使用SCSS@extend

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

    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.scs，其中包含并编译了每个块样式的规则以及它们扩展的引导规则：

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

---

正在搜索相同类型的信息。我将遵循这一步。

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