JavaScript for WordPress Forums Gutenberg Development Custom Column Block Gutenberg 3.0 – Using InnerBlocks with pre-nested blocks

This topic contains 2 replies, has 2 voices, and was last updated by  mengland 2 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #48868

    mengland
    Participant

    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' );
    #48888

    Zac Gordon
    Keymaster

    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.

    #48893

    mengland
    Participant

    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.

    • This reply was modified 2 months, 1 week ago by  mengland.
    • This reply was modified 2 months, 1 week ago by  mengland.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.