Custom Column Block Gutenberg 3.0 – Using InnerBlocks with pre-nested blocks

[mengland]

After much trial an error I was able to create a custom column block that utilizes <InnerBlocks> to import other blocks.

I would like to take this block a step further and add pre-nested blocks when the block has been inserted into the editor. I was able to create a block template which somewhat achieves the end result but it only does so on on a new post.

Any help pointing me in the right direction would be greatly appreciated!

Thanks,

Also here is a helpful resource I found on InnerBlocks
InnerBlocks Readme Github

Custom Column Block

/**
 * Block dependencies
 */
import classnames from 'classnames';

const { __ } = wp.i18n;

const { Fragment } = wp.element;

const { registerBlockType } = wp.blocks;

const { InnerBlocks } = wp.editor;

/**
 * Register example block
 */
export default registerBlockType(
    'hmsblocks/hms-layout-1',
    {
        title: __( 'HMS Layout', 'hmsblocks' ),
        description: __( 'Custom Column Block.', 'hmsblocks'),
        category: 'layout',
        icon: 'columns',
        keywords: [
            __( 'Columns', 'hmsblocks' ),
        ],
        attributes: {
      	},

        edit: props => {

          const { attributes: { placeholder },
                className, setAttributes,  } = props;

          return (
          <div className={ className }>

            <InnerBlocks
            layouts={ [
              { name: 'column-1', label: 'Column 1', icon: 'columns' },
            ] }
            />

          </div>
      		);
        },
        save: props => {
          const { attributes: { className }, setAttributes } = props;
          return (
            <div className={ className }>
              <InnerBlocks.Content />
            </div>
          );
        },
    },
);

Block Template for Custom Column on Posts

function my_add_template_to_posts() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array(

        array( 'hmsblocks/hms-layout-1', array(), array(
            // Core Image Block
            array( 'core/image', array( 'layout' => 'column-1' ) ),

            // Core Heading Block
            array( 'core/heading', array(
                'placeholder' => 'Place Holder heading',
                'layout' => 'column-1'
            ) ),

            // Core Paragrapgh Block
            array( 'core/paragraph', array(
                'placeholder' => 'Place Holder Paragraph',
                'layout' => 'column-1'
            ) ),
        ) )
    );
}
add_action( 'init', 'my_add_template_to_posts' );

[Zac Gordon]

Block templates will only work for new posts and pages unfortunately. I will look into this a bit more for the next update, but I believe you can hard-core into a parent block what children you want in there (and to some extent vice versa). Try checking some of the links in the latest GB update on the make.wordpress.org blog for some hints and possible leads.

[mengland]

Zac,

Thanks for replying, I did some additional research into more files and eventually I found something that actually works and is really simple to include!

InnerBlock List has the following elements inside of it. <BlockList { ...{ layouts, allowedBlocks, template } } />.

In my example code we already utilized layouts, so I started experimenting with template. Using the example PHP I was able to fabricate a working version for having a block with a template inside.

          <InnerBlocks
            layouts={ [
              { name: 'column-1', label: 'Column 1', icon: 'columns' },
            ] }

           template={ [
            [ 'core/paragraph', { layout:'column-1', placeholder:'temp-stuff' } ],
           ] }

          />

I’m now really interested in experimenting with allowedBlocks.

[Author]

Posts