Wrapping Gutenberg Blocks with a divsectionarticle

admin管理员组

文章数量:1134587

I would like to be able to create sections of blocks from within the Gutenberg editor. This way I can apply styles around groups of blocks.

The idea would be to either:

• Nest one or more blocks within a container div/section/article
• Add an opening tag before a block or group of blocks and a closing tag afterwards

I have tried adding a 'Custom HTML' block before and afterwards with opening/closing tags. This works apart from when revisiting the editor the you're welcomed with a 'This block contains unexpected or invalid content' warning.

How can I achieve this?

I would like to be able to create sections of blocks from within the Gutenberg editor. This way I can apply styles around groups of blocks.

The idea would be to either:

• Nest one or more blocks within a container div/section/article
• Add an opening tag before a block or group of blocks and a closing tag afterwards

I have tried adding a 'Custom HTML' block before and afterwards with opening/closing tags. This works apart from when revisiting the editor the you're welcomed with a 'This block contains unexpected or invalid content' warning.

How can I achieve this?

• block-editor

Share Improve this question asked Mar 25, 2020 at 16:54 ScoopScoop 10111 silver badge66 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 4

Use 'Groups': If you do not see the 'Group' option, like me, you'll have to update WP.

After that, simply create a group, then add new blocks or drag existing blocks into it. Select the group and add HTML Anchors and classes via the 'Advanced' tab of the block's menu.

There's a simple solution, use a group block:

This creates a group block that contains the others. This isn't the only block that can have "children" or nest other blocks, e.g. columns, cover blocks, etc

Group blocks are <div>'s but can also be set as sections/asides/etc in the block inspector sidebar

If this wasn't an option, the solution would have been to build a block that contains other blocks, but those blocks already exist and come with WP

本文标签： Wrapping Gutenberg Blocks with a divsectionarticle