Using InnerBlocks

[chrisdavies71]

Hi Zac,

I have a block that I have built which creates a grid within this I then need to insert a variable number of ‘cards’. I figured that InnerBlocks was the best way to do this however the CSS is not working properly.

Here is the edit code for the grid block:

<div className={ className }>
  <div className={classnames(<code>row</code>,<code>row-cols-1</code>, <code>row-cols-sm-${smallCardNumber}</code>, <code>row-cols-md-${mediumCardNumber}</code>, <code>row-cols-lg-${largeCardNumber}</code>, <code>row-cols-xl-${xlCardNumber}</code>) }>
	<InnerBlocks
	    allowedBlocks={ [ 'gutenberg-bootstrap/card' ] }
	/>
  </div>
</div>

I then have the code for the card block:

<div className="col mb-4">
  <div className="card">
    .......
  </div>
</div>

What I get in the editor though is this:

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
  <div class="block-editor-inner-blocks">
    <div class="block-editor-block-list__layout">
      <div id="block-756fb9ba-c9f5-41d4-8cac-7de62d933b6b" class="wp-block block-editor-block-list__block has-selected-ui" data-block="756fb9ba-c9f5-41d4-8cac-7de62d933b6b" data-type="gutenberg-bootstrap/card" tabindex="0" aria-label="Block: Card" role="group" style="transform-origin: center center; transform: none;">
       <div class="col mb-4">
         <div class="card">

The lines causing an issue are div’s 2, 3, 4 as it means the CSS selector does not work.

CSS selector: .row-cols-xl-5 > * – this targets the next div which I need to be <div class="col mb-4>

Hope all the above makes sense and any help appreciated.

Regards

Chris

[Author]

Posts