We've recently been updating a content workflow for a client that generates a good bit of technical content on a weekly basis. Their goal was to improve the ease with which content is created while also improving the overall quality. For that goal, we wanted to create some Gutenberg blocks that were containers for certain types of content, allowing an automated review / checklist to verify certain things were always included (intro summary, takeaway, definitions, etc.).

Block containers and nesting blocks

We created a few blocks that were just containers for subsets of existing Gutenberg blocks (InnerBlocks). This way, an author can add the container (or a draft with existing, required containers can be created) and update the content based on the section. We can then check the post for those required sections prior to publish.

It's a great solution, utilizing native functionality within Gutenberg. However, interacting with these containers, we started to realize that it was easy to get stuck in them without realizing it. For example, you could write your intro summary and then click "Enter". You looked like you could be continuing to write the rest of the post but you were actually just adding all of the content to the intro summary.

Doing that with the intro summary container wouldn't technically cause issues because it is just a utility wrapper for rating the quality of the post. However, what if we did that with a container that generated unique schema? It would lead to madness!

Using Gutenberg CSS classes to get a simple visual verification

When editing blocks within Gutenberg, there are a couple of classes that are added based on the active block that we utilized, is-selected and has-child-selected. With these two classes, we can add a simple, visual change so a user will definitely know where they are within the content and not get stuck within a nested block.

The beauty of this is that it can be added to any block. If you've noticed a user struggling with blocks and getting stuck in a nested block, try modifying the style a little bit when a block is active and see if that helps.