Add Block: Section

[melchoyce]

Now that we have official support for nesting as of #3745, let's consider adding a Section block that can act as a generic block container.

This block would have the following settings:

• Columns.
• Background image, color, and color dimness (so you can overlay transparent colors over your image), along with a fixed background toggle.
• Text color.
• Wide or Full-Width block alignment.

[karmatosed]

I really like this idea! I also like fact it has a background setting to it.

[motleydev]

Nice! What if the block allowed the three following 'advanced' settings:

• Define a class-name to be serialized onto the children .child_class, .child_class_1
• Add an optional first child class .child_class, .child_class_1, .child_class_first
• Add an optional last child class .child_class, .child_class_n, .child_class_last

:nth-child selectors may be able to compensate for the last two, but I think adding a class to all children could be useful in certain contexts.

[tomusborne]

Love this idea. If background and text colors can be altered, it might make sense to add link colors as well.

[munirkamal]

Excellent Idea. This will literally add much value to Gutenberg Editor.

[hedgefield]

Much better than just the Columns block, which has a lot of issues. Cool!

[jvisick]

This is the first thing I set out to create when I saw that nesting was available. My version is similar except I envisioned that you would add the columns block into it.

Do you have code for this available?

[youknowriad]

If this block has "columns", we should just update the "columns" block. But it's still possible to use a columns block inside a section block and keep the section block columnless.

[hedgefield]

As long as you can't put column blocks inside column blocks 😉

[jvisick]

A lot of site pages are broken up into sections that has mixed content with multiple rows of columns and often columns nested inside larger ones. This is a quick example:

A section block that just acts like a bare wrapper I think would be the most flexible. (as would being able to nest column blocks!)

We've kicked off a new site project this week. Normally it would be built with with Advanced Custom Fields flexible content layouts but I'm going to see how far we can get using Gutenberg alone.

[melchoyce]

Yeah, I think multi-column sections like @jvisick's above example aren't uncommon. A container with background/text options that nests blocks would be the most flexible approach. Since we now have a functioning column block, we could even consider taking out the column option from this.

[fabianpimminger]

It would be great if there is an inner-container (div) in this block which then contains all the child blocks. This container could then be styled with max-width and margin-left/right: auto to center the child blocks and have a full-width background.