logo标签列表

将 Bootstrap 按钮样式添加到 WordPress 默认的 Gutenberg 按钮块

wordpressreactjstwitter-bootstrapwordpress-gutenberggutenberg-blocks
3
我希望在 Gutenberg 的默认按钮块中使用 Bootstrap 框架的默认按钮样式。
我找到了一种解决方案，可以删除 WordPress 中的默认样式并添加自己的样式。这是链接：https://www.billerickson.net/block-styles-in-gutenberg/。
我正在使用 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',
    } );

} );

这里有两个问题：

  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-添加到类中。

为了使用Bootstrap样式的按钮块，我需要像这样的代码：

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

这个类必须在<a>标签内，同时我需要第二个类.btn。

有没有办法将这两个类添加到<a>标签中？

正在寻找相同类型的信息。我会关注这个帖子。 - Patrice Poliquin
3个回答
4
另一种处理方法是使用 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.scss，它包含每个块样式的规则和它们继承的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;
}
2
我认为，编写自己的按钮比覆盖现有组件要简单得多。如果您真的想覆盖核心按钮块，您可能需要应用适当的block filters。
如果您正在寻找即时解决方案，Advanced Bootstrap Blocks plugin中按钮组件的源代码可能会帮助您入门，或者您可以通过插件目录安装。
（完全公开：我是这个插件的作者。）
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接