Quiero usar los estilos de botones predeterminados del marco Bootstrap con el bloque de botones predeterminado de Gutenberg.

Encontré una solución para eliminar los estilos predeterminados de WordPress y agregar algunos estilos propios. Aquí está el enlace: https://www.billerickson.net/block-styles-in -gutenberg /

Estoy usando el código de Bill Erickson para eliminar los estilos predeterminados y agregar uno nuevo. En mi caso, el estilo .btn-primary de 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',
    } );

} );

Hay dos problemas aquí:

  1. WordPress agrega la clase de manera incorrecta
  2. Solo agrega una clase, pero Bootstrap necesita dos al menos

Este es el código del botón después de agregar la clase:

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

Como puede ver, WordPress agrega la nueva clase dos, el div alrededor del botón. Y agrega is-style- a la clase.

Para usar el bloque de botones con estilos Bootstrap. Necesito un código como este:

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

La clase tiene que estar dentro de la etiqueta <a> y también necesito la segunda clase .btn.

¿Hay alguna forma de agregar estas dos clases a la etiqueta <a>?

3
Cray 10 may. 2019 a las 16:49

3 respuestas

La mejor respuesta

Otra forma de solucionar esto es usando SCSS @extend

Primero registre los estilos de bloque que se mostrarán en el editor de bloques de botones:

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

});

Luego creé un _wordpress.scss que se incluye y compila con las reglas de cada estilo de bloque y qué reglas de Bootstrap extienden:

.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;
}
1
Jeremy Richardson 10 abr. 2020 a las 19:11

Creo que le resultará menos complicado escribir su propio botón que anular el componente existente. Si realmente desea anular el bloque del botón central, probablemente deba aplicar el filtros de bloque.

Si está buscando una solución inmediata, la fuente del componente del botón dentro de El complemento Advanced Bootstrap Blocks puede ayudarlo a comenzar, o puede instalarlo a través de directorio de complementos.

(Divulgación completa: Soy la autora de este complemento).

2
shrthnd 9 ago. 2019 a las 02:10

Puedes instalar este complemento: https://wordpress.org/plugins/wp-bootstrap-blocks/

O lea el código del complemento y cree su propio bloque, luego también puede crear sus propios estilos personalizados para botones.

1
FED 15 may. 2019 a las 14:45