Friday, January 20, 2023
HomeWordPress Developmentblock editor - ACF InnerBlocks breaks css grid, How can we add...

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


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

For instance a easy 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 within 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 is the resolution to move the category “col3” to the dynamics wp-blocks ?
I attempted it, but it surely did not 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>

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments