In a block transform, how do I insert innerBlocks?

There is no built-in solution to use a shortcode’s inner content as a new block’s innerBlocks. The best I was able to do is a two step process which first transforms a raw shortcode to the core shortcode block, then transform that into the new block. In that way I was able to use the inner content as innerBlocks.

The reason to do it that way is the “block” transform type has access to a more granular transform function. It ends up looking something like this:


     type: 'block',
     blocks: ['core/shortcode'],
     isMatch: function( {text} ) {
        return /^\[slidetoggle /.test(text);
     },
     transform: ({text}) => {

        const initialStateVal = getAttributeValue('slidetoggle', 'initialstate', text);

        const content = getInnerContent('slidetoggle', text);

        const innerBlocks = wp.blocks.rawHandler({
          HTML: content,
        });

        return wp.blocks.createBlock('example/slidetoggle', {
          initiallyClosed: initiallyClosed,
        }, innerBlocks);
     },
  },

and the getAttributeValue and getInnerContent functions look like this:

export const getAttributeValue = function(tag, att, content){
    var re = new RegExp(`\\[${tag}[^\\]]* ${att}="([^"]*)"`, 'im');
    var result = content.match(re);
    if( result != null && result.length > 0 )
        return result[1];

    re = new RegExp(`\\[${tag}[^\\]]* ${att}='([^']*)'`, 'im');
    result = content.match(re);
    if( result != null && result.length > 0 )
        return result[1];

    re = new RegExp(`\\[${tag}[^\\]]* ${att}=([^\\s]*)\\s`, 'im');
    result = content.match(re);
    if( result != null && result.length > 0 )
       return result[1];
    return false;
};

export const getInnerContent = function(tag, content, shouldAutoP=true) {
   const re = new RegExp(`\\[${tag}[^\\]]*?]([\\S\\s]*?)\\[\\/${tag}]`, 'i');
   var result = content.match(re);
   if( result == null || result.length < 1 )
      return '';

   if( shouldAutoP == true)
      result[1] = wp.autop(result[1]);

   return result[1];
};

For more details on this process, I wrote a detailed post about this.