Gutenberg: Is there a way to predefine a block arrangement?

[Levdbas]

I would like to predefine a selection of blocks to use in Gutenberg.
It would consist of a wrapper element, for example the hopefully soon to be section block, inside there would be a title and a column block which houses 4 columns with an image, unordered list and button,
Under the column block could be another button, for example.

Is there a way to predefine an arrangement like this codewise? I am aware of https://github.com/WordPress/gutenberg/issues/3588 but that seems to be more focussed on defining blocks on a frontend template level. I am also aware of the reusable block function but I don't think you can predefine blocks in your code, right? You could just make a new block which houses all these element, but that does seem a little bloat for me when all the elements are natively available.

If there are other ways to tackle the above I would be very happy to hear it.

Hope this makes sense, as this is my first question over here :)

[0aveRyan]

@Levdbas thanks for diving into issues -- welcome!

What you described was kinda explored by @aduth back in February in #4659 and on an available branch called try/inject-template. As you indicated, unfortunately at present the fastest way to accomplish this is a custom block as Reusable Blocks only support a single block (but RBs _are_ programmatically injectable using wp_insert_post(), setting post_type to wp_block -- wp_template should be fairly similar).

In #3588 @mtias does mention in addition to the template approach, there will be a way to tap the JS state tree to dynamically create templates.

Some final thoughts

• Gutenberg should allow preloading (and potentially overriding) of a template via query param.
• The Block Inserter should either have a predefined Templates section or allow filtering into Core/Custom block categories.
• The final API should be considerate to a flow like Google Doc's Template Gallery.

[0aveRyan]

@Levdbas you may also find a workaround adapting this code

[mtias]

You can also do this within a block definition by using InnerBlocks:

    edit() {
        return (
            <InnerBlocks
                template={ [
                    [ 'core/navigation', { color: 'rgb(123, 220, 181)' } ],
                    [ 'core/image', { id: 4778, align: 'full', url: 'http://localhost/wp-content/uploads/2018/07/jojo-franke-739260-unsplash.jpg' } ],
                    [ 'core/heading', { level: 2, content: 'About Us' } ],
                    [ 'core/paragraph', { customFontSize: 25, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' } ],
                    [ 'core/paragraph', { content:
                        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' } ],
                    [ 'core/spacer', { height: 290 } ],
                    [ 'core/footer', { text: 'Thanks for visiting!' } ],
                ] }
                templateLock={ 'all' }
            />
        );
    },

It's very powerful to create very simple blocks that just give you the ability to prefill certain layouts.