Gutenberg blocks go nested!

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 reuseable 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.

Join us Today at 2 pm ET / 11 am PT / 19:00 UTC on YouTube. I am thrilled to be talking to Hendrik Luehrsen, about contributing to WordPress Gutenberg and building blocks for new websites.

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!

Photo by Dmitri Popov on Unsplash