Pregunta sobre Gutenberg de Wordpress:

Asignar clases de Bootstrap a columnas

Un usuario preguntó 👇

Hola

Habíamos creado varios bloques basados ​​en 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.