Добавить стили кнопок Bootstrap в блок кнопок Gutenberg по умолчанию в WordPress

Я хочу использовать стили кнопок по умолчанию из фреймворка Bootstrap с блоком кнопок по умолчанию Gutenberg.

Я нашел решение удалить стили по умолчанию из WordPress и добавить несколько собственных стилей. Вот ссылка: https://www.billerickson.net/block-styles-in-gutenberg/

Я использую код Билла Эриксона, чтобы удалить стили по умолчанию и добавить новый. В моем случае стиль .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- к классу.

Использовать блок кнопок со стилями Bootstrap. Мне нужен такой код:

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

Класс должен находиться внутри тега <a>, и мне также нужен второй класс .btn.

Есть ли способ добавить эти два класса в тег <a>?


reactjs wordpress twitter-bootstrap wordpress-gutenberg gutenberg-blocks
person Cray    schedule 10.05.2019    source источник
comment
Искал такую ​​же информацию. Я буду следить за этой веткой.   -  person Patrice Poliquin    schedule 13.05.2019

Ответы (3)


arrow_upward
4
arrow_downward

Другой способ решить эту проблему - использовать 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;
}
person Jeremy Richardson    schedule 10.04.2020

arrow_upward
2
arrow_downward

Я думаю, вы обнаружите, что написать собственную кнопку проще, чем переопределить существующий компонент. Если вы действительно хотите переопределить основной блок кнопок, вам, вероятно, потребуется применить соответствующий блокировать фильтры.

Если вы ищете немедленное решение, источник компонента кнопки внутри Плагин Advanced Bootstrap Blocks может помочь вам начать работу, или вы можете установить его с помощью каталог плагинов.

(Полное раскрытие: я являюсь автором этого плагина.)

person shrthnd    schedule 09.08.2019

arrow_upward
1
arrow_downward

Вы можете установить этот плагин: https://wordpress.org/plugins/wp-bootstrap-blocks/

Или прочтите код плагина и создайте свой собственный блок, затем вы также можете создать свои собственные стили для кнопок.

person FED    schedule 15.05.2019