Pregunta sobre Gutenberg de Wordpress:

Asignar clases de Bootstrap a columnas

Un usuario pregunt贸 馃憞

Hola

Hab铆amos creado varios bloques basados 鈥嬧媏n las columnas experimentales en la versi贸n 2.3.0 del plugin de Gutenberg. Se requiri贸 mucho c贸digo para sobrescribir las salidas de los bloques HTML para poder asignar las clases de Bootstrap apropiadas a los dise帽os (por ejemplo, diferentes anchos y manejo de tel茅fonos m贸viles).

Con las nuevas columnas y bloques de columnas, 驴hay alguna forma de poder definir clases CSS Bootstrap para las columnas generadas?

HTML almacenado en Gutenberg 2.3.0 en nuestro bloque personalizado:


<!-- wp:customblock/columns-3-3-3-3-block -->
<div class="wp-block-customblock-columns-3-3-3-3-block">
    <div class="columns-start">
    </div>
      <!-- wp:paragraph {"layout":"column-1"} -->
      <p class="layout-column-1">test in column 1</p>
      <!-- /wp:paragraph -->

      <!-- wp:paragraph {"layout":"column-1"} -->
      <p class="layout-column-1">another test in column 1</p>
      <!-- /wp:paragraph -->

      <!-- wp:paragraph {"layout":"column-2"} -->
      <p class="layout-column-2">test in column 2</p>
      <!-- /wp:paragraph -->

      <!-- wp:paragraph {"layout":"column-3"} -->
      <p class="layout-column-3">test in column 3</p>
      <!-- /wp:paragraph -->

      <!-- wp:paragraph {"layout":"column-4"} -->
      <p class="layout-column-4">test in column 4</p>
      <!-- /wp:paragraph -->
      
    <div class="columns-end">
  </div>
</div>
<!-- /wp:customblock/columns-3-3-3-3-block -->

El tema cambia a:


<div class="wp-block-customblock-columns-3-3-3-3-block">
    <div class="container-fluid container-fluid-limited">
      <div class="row justify-content-sm-center justify-content-lg-start">
        <div class="column column-1  col-lg-3 col-md-10 order-lg-1">
          <p class="layout-column-1">test in column 1</p>
          <p class="layout-column-1">another test in column 1</p>
        </div>
        <div class="column column-2  col-lg-3 col-md-10 order-lg-2">
          <p class="layout-column-2">test in column 2</p>
        </div>
        <div class="column column-3  col-lg-3 col-md-10 order-lg-3">
          <p class="layout-column-3">test in column 4</p>
        </div>
        <div class="column column-4  col-lg-3 col-md-10 order-lg-4">
          <p class="layout-column-4">test in column 4</p>
        </div>
      </div>
    </div>
</div>

驴Existe alg煤n enfoque proporcionado por el 煤ltimo Gutenberg que podr铆a lograr algo similar?

Gracias

(@virgial)

Hace 1 a帽o, 10 meses

Hola @annemarietn, tal vez echa un vistazo a este plugin de arranque de Gutenberg. No se requieren habilidades de desarrollo y puede construir contenedores, filas y columnas completos de bootstrap. https://wordpress.org/plugins/wp-editor-bootstrap-blocks/

Lanzador de hilos

(@annemarietn)

Hace 1 a帽o, 10 meses

Gracias

驴Solucion贸 tu problema??

0 / 0

Deja una respuesta 0

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *