Viewing 1 post (of 1 total)
  • Author
  • #140681

    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>) }>
    	    allowedBlocks={ [ 'gutenberg-bootstrap/card' ] }

    I then have the code for the card block:

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

    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.



Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.