Support » Plugin: Gutenberg » Assigning Bootstrap classes to Columns

  • Resolved annemarietn

    (@annemarietn)


    Hi

    We had created some blocks based on the experimental columns in Gutenberg plugin version 2.3.0. It required a lot of code to rewrite the HTML block outputs in order to assign appropriate Bootstrap classes for layout (e.g. different widths, and handling on mobile).

    With the new columns and column blocks, is there any way of being able to define Bootstrap CSS classes for the generated columns?

    HTML stored by 2.3.0 Gutenberg in our custom block:

    
    <!-- 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 -->
    

    Theme transforms into:

    
    <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>
    

    Are there any approaches that the latest Gutenberg provides that could achieve something similar?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.