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.