Добавление стилей кнопок Bootstrap в стандартный блок кнопок Gutenberg в WordPress - PullRequest
Новая
       38

Добавление стилей кнопок Bootstrap в стандартный блок кнопок Gutenberg в WordPress

2 голосов
/ 10 мая 2019

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

Я нашел решение удалить стили по умолчанию из 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>?

1 Ответ

1 голос
/ 15 мая 2019

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

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

...