block editor – ACF InnerBlocks breaks css grid, How can we add classes to allowedblocks (WordPress Gutenberg)

Question

When I create an ACF Innerblock with allowedblocks, childs blocks are wrapped inside a wp-block div that breaks my grid system.

For example a simple grid system like that :

<div class="grid-wrapper innerblock">
  <div class="grid-item allowedblock col3 "></div>
  <div class="grid-item allowedblock col3 "></div>
  <div class="grid-item allowedblock col3 "></div>
  <div class="grid-item allowedblock col3 "></div>
</div>

Will output this breaking code in the admin :

<div class="grid-wrapper block-editor-block-list__layout" data-is-drop-zone="true">

  <div class="wp-block"> <!-- no class "col3" !! -->  
      <div class="grid-item allowedblock col3 "></div>
  </div>

  <div class="wp-block"> <!-- no class "col3" !! --> 
      <div class="grid-item allowedblock col3 "></div>
  </div>

  <div class="wp-block"> <!-- no class "col3" !! -->
      <div class="grid-item allowedblock col3 "></div>
  </div>

  <div class="wp-block"> <!-- no class "col3" !! -->
      <div class="grid-item allowedblock col3 "></div>
  </div>


</div>

What’s the solution to pass the class “col3” to the dynamics wp-blocks ?
I tried it, but it didn’t work…

<div class="block-wrapper">

  <?php 
     $template = array( 
    array( "acf/card", array( "className" => "col3" ) ) 
     );

  ?>
    
  <InnerBlocks 
    class=" grid-wrapper" 
    allowedBlocks="<?php echo esc_attr( wp_json_encode( array( 'acf/card') ) ); ?> "
    template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>"
  />

</div>

0
Jloic 3 weeks 2023-01-19T18:07:53-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse