Gutenberg blocks go nested!

Update July 5, 2019

In the last six months quite a few things have changed for nesting Gutenberg blocks via the default blocks. Below you’ll find display and videos for Group Block, Media + Text Block and Cover Block.

Group Block

For example, I can use the Media + Text block in a Group Block and put it on a different background.

Gutenberg Changelog logo by Mark Uraine

Subscribe to our podcast:
Gutenberg Changelog, hosted by Mary Job and Birgit Pauli-Haack
Spotify | Google | iTunes | Stitcher | Overcast

Steve Burge at OS Training wrote a tutorial on How to use the Group Block

WooCommerce

Columns w/ Layout

Or when using the Columns block, I have now the option to select different layouts.

How to add a group block and a media+text block and change the background.

Cover Block

The cover block now can hold multiple blocks. Below is a video on how to use it.

Next Gutenberg Times Live Q & A:

July 26, 2019 at 2 pm EDT / 18:00 UTC

Updated November 16, 2018

Gutenberg has now a “Media + Text” block. We use it to announce today’s episode on YouTube. We saved it as a reusable block so I can add it quickly to other popular posts on our site. It’s very easy to use and has quite a few settings for you to modify the look & feel to it.

Gutenberg Changelog logo by Mark Uraine

Subscribe to our podcast:
Gutenberg Changelog, hosted by Mary Job and Birgit Pauli-Haack
Spotify | Google | iTunes | Stitcher | Overcast

Update October 8, 2018

“With nested blocks, you can set a template. When added a page, all the inner blocks are already displayed. You can lock the parent block so blocks inside never change.” 

Raquel M. Smith, who builds plugins for food blogs at WPTasty for a living, published a tutorial on creating nested blocks for developers. 

Igor Benic also published a post on the same topic: How to enable InnerBlocks in your Gutenberg Block

Update June 19, 2018.

The early iteration of nested blocks turn out to have a few issues. And some of them will be resolved when Andrew Duthie finishes his work on the pull request:  “Blocks: Render columns as nested column (wrapper)” 41172652-83195ff0-6b22-11e8-98eb-c417771c4c14 February 16, 2016

WordPress content creators have been waiting for it since Gutenberg was announced: nested blocks. You can now create multi-column layouts and include pictures and add other blocks into those columns. On February 6th, Andrew Duthie’s Pull Request (PR) was merged to the master branch of Gutenberg. The new version Gutenberg 2.2 was released today. Matias Ventura in his announcement for the new release, labeled this  particular features as “experimental” It would still need further work and has some browser hiccups. Keep this in mind when you start working with it

From the PR comments we learned: [Now there is] a new Columns block which behaves similarly to the Text Columns block, except that it allows insertion of blocks within the rendered columns.

We tested it earlier this week with the master dev build version on our local development environment. Here is a short view.

It still feels a little rough around the edges for different browsers or with the alignment on the front-end. Minor quirks that will be fixed in later iterations, I am sure.

For Developers

Developers building custom blocks can also use nested blocks and restrict the type of blocks that can be added to their block. For instance, a team member block can only have an image, a heading and a paragraph, but the user would not be able to add an embed block or a gallery block.

Andrew explained the various API changes for nested blocks as well as the limits for this first iteration of nested blocks in his comments from February 6th. 

Courses for Developers - JavaScript for WordPress with Zac Gordon
Check ’em out now!

📢 Now on available: Advanced Gutenberg Development  📢

Photo by Dmitri Popov on Unsplash

2 Comments

this is weird – I don’t have the Group block listed in available blocks. I checked the Options panel and every block is enable, but this is also missing Group block. Thoughts on why? I have version 5.2.2

Hi there! The group block is only available via the Gutenberg plugin. It will be pushed into core when the next major version is released. That will be 5.3 and estimated to be released End of Septemberg/Beginning October 2019.