Gutenberg custom column block development

Question

I am building a Gutenberg block with the following requirement. It is already working in the live site as a classic shortcode but now I need to transform the same into a block.

• The block will have two columns.
• Other blocks (both native and custom which I have already developed) can be added in both columns.
• I need to add separate attributes to separate columns so that they render like data-span="4" with the left column and data-span="2" with the right column or vice versa.

I created a custom JSX layout to render the block inside editor with two columns and added <InnerBlocks> in each,i.e. I had two <InnerBlocks>. But multiple <InnerBlocks> is not allowed so I had to discard that.

I first tried this

...
save: function ( props ) {
   return(
     <div className={props.className}>
       <div className="column-container">
          <div className="left-column">
             <InnerBlocks allowedBlocks={ [ 'core/paragraph', 'core/image', 'core/list' ] } />
          </div>
          <div className="right-column">
             <InnerBlocks allowedBlocks={ [ 'core/paragraph', 'core/image', 'core/list' ] } />
          </div>
       </div>
     </div>
   );
}

Next I tried the following

...
edit: function( props ) {
   <div className={props.className}>
      <InnerBlocks allowedBlocks={ [ 'core/columns', 'core/paragraph' ] } />
   </div>
}

The above let me add a column block and then inside each column. I am able to add other blocks including my custom blocks as well. I don't know how to put those above attributes (data-span="x") for each of the columns added by the native column block.

The rendered output looks like this (in live site)

<div class="hall-columns">
   <div class="hall-column" data-span="4">
     <p>Lorem ipsum dolor sit amet, ei vim persequeris liberavisse.</p>
   </div>
   <div class="hall-column" data-span="2">
     <p>
        <img class="alignnone wp-image-338" src="http://local.hall.com/wp-content/uploads/2019/03/book.jpg" alt="" width="322" height="182" />
     </p>
   </div>
</div>

I am searching for the last 3 days but unable to find any suitable article/thread which may show me some light.

Answer 1

There already is an option for that in Gutenberg. You first need to create a group. Then inside the layout add columns after choosing that group. Then you have to increase the column value.