Add Shape Divider block

[richtabor]

Is your feature request related to a problem? Please describe.
It would be useful to be able to easily distinguish areas of a page with unique shapes that divide/highlight page sections. This would add more variety across pages built within the block editor and provide much more design freedom to creating stunning pages.

Describe the solution you'd like
Add a new block that where one can choose various shapes, colors and heights, empowering the user to not only build pages - but actually design them - in the block editor.

Describe alternatives you've considered
Using the Separator block does afford some separation, but the block is quite limited to be used in this manner (nor is this manner the Separator block's key purpose).

Screenshot
This is a recording of the Shape Divider block within CoBlocks:

[karmatosed]

Thank you for adding this @richtabor. I really love the idea of bringing this block into core blocks.

[jasmussen]

This is great. Thank you for creating this ticket. From using the coblocks separator, the thing I personally like about it most, is that you don't have to enter the sidebar at all, to perform basic operations on it — everything is available on the block itself.

Also cool:

• The ability to set the color of the separator
• The ability to pick from a variety of styles.
• The ability to set dimensions

I wonder if this block could be two or three blocks instead. However much I love this block, and I do, the way it is designed right now feels like it is part one of a three part story. It is half of a separator, as if to suggest you follow this block by a full-wide Group block with the same color, and then another shape divider below it.

I wonder if that could be a single block, call it "Frame", which let you configure the top divider shape, the bottom divider shape, the color of the entire frame, and then let you add inner-blocks inside it? Something like this:

The next block could then be more of a pure Divider block, and contain resizable re-colorable shape dividers that featured both top and bottom halves. Something like this:

Or perhaps even multi-layered, with multiple opacities, like this:

Finally you could have a more traditional Separator block. This could either be an expansion in styles of the existing separator, or something more decorative.

We would want to keep your core values: easy to recolor, many variations, resizable, perhaps even horizontally? I'd love to see some simple additional styles such as these:

But even cooler might be to let you add text to the separator too. Left aligned, centered, or right aligned. This would allow for endless possibilities, not only through actually adding little phrases "The story continues..." but you could even insert nice typographical unicode characters or hey, even emoji if that's your jam.

Finally, I've heard requests for adding "Spacer" like features to the separator. This could theoretically be added to any of the three above block ideas, that were inspired by your Shape Divider.

[melchoyce]

What if we added border styles to the Group block, instead of creating a new "Frame" block?

[richtabor]

If the block had the same resizable functionality then that'd be interesting, but otherwise, I'm not certain. It seems that we may add a good bit of UI to the Group block (which Im not sure is necessary). I like where you're thinking though. :)

Just tossing around ideas, but what if the new block was a type of group block, where it wrapped blocks with a divider on top and bottom?

[jasmussen]

What if we added border styles to the Group block, instead of creating a new "Frame" block?

I think that's an interesting thought, but at the same time I'm personally kind of a purist when it comes to the group block. By being completely barebones and utilitarian, it really is just a group.

But there's no reason there couldn't be a copy — doesn't have to be called frame — that basically does the same, but just has a separate entry in the Block Library plus these added features. In the vein of what Rich suggests, in other words.

[mapk]

I actually like keeping the block by itself. It feels good and allows me to add it in-between other blocks, or attached to different blocks, etc. We do start entering into territory where I'm not sure if we want a bigger block that can do more or just some simpler blocks that can be combined with other blocks.

The direction does seem to be going toward blocks that handle a great deal more layout, so I'm totally open to a Frame block if explored further. But sometimes there's fun creativity in taking smaller blocks and combining them in ways not intended for more unique designs.

[mapk]

I realize now, my previous comment is probably not all that helpful. Basically, I really like the CoBlocks Shape Divider and would love to see something like this in Core. 😄

[davewhitley]

I agree, I love how this block is designed and its simplicity.

[melchoyce]

I think that's an interesting thought, but at the same time I'm personally kind of a purist when it comes to the group block. By being completely barebones and utilitarian, it really is just a group.

I guess this is a pivot from the original idea of creating a container block, which could have things like background colors, images, border styles, etc. The CoBlocks row block and Stackable container block have been integral to my work on some recent volunteer site builds, and not having something comparable in core is really buggin' me.

[jasmussen]

I guess this is a pivot from the original idea of creating a container block, which could have things like background colors, images, border styles, etc. The CoBlocks row block and Stackable container block have been integral to my work on some recent volunteer site builds, and not having something comparable in core is really buggin' me.

Not necessarily, and I agree that such a block would be sweet to have in core. Though I think it's important to think about what features go where. A "group" block doesn't feel like the obvious place for a new user to look for such features. That doesn't mean we shouldn't have them, but it may suggest there's a better place for some features in a differently labelled block.

Those are just thoughts.

[talldan]

This is definitely a cool block! One thing that makes separate sections work well in Coblocks is the ability to remove the spacing between blocks so that they're completely adjacent:

Not sure if that would be a prerequisite for the Shape Divider. Thoughts?

[jasmussen]

I would suggest that the "remove top/bottom spacing" present in many block collections rather suggests we need a little nuance to how those margins work in the block editor. Right now every block comes with them, perhaps we can both allow a block to opt out of them by default (provide their own), and perhaps we can even turn them off for container blocks, so that both Columns and Column each provide their own additional margins to the content inside.

[richtabor]

I would suggest that the "remove top/bottom spacing" present in many block collections rather suggests we need a little nuance to how those margins work in the block editor.

Yea, I found that they were necessary for the Shape Dividers to "sit" next to other blocks. On the frontend it essentially adds a .mt-0 or .mb-0 utility class (margin-bottom/top: 0). I'm not 100% thrilled about the implementation, but it's the only way we got it to work right.

What would be interesting is if the Shape Divider block automagically remove it's top/bottom spacing (dependent on the orientation of the shape) and the block before/after (also dependent on its orientation). Not sure how that could work exactly, but it'd be interesting to not have an option to toggle - and have it "just work" instead.

[jasmussen]

What would be interesting is if the Shape Divider block automagically remove it's top/bottom spacing (dependent on the orientation of the shape) and the block before/after (also dependent on its orientation). Not sure how that could work exactly, but it'd be interesting to not have an option to toggle - and have it "just work" instead.

If we get a good idea in implementation, that definitely sounds good. There is value in having a "default minimum margin" for all blocks on a meta level, but in practice there are many situations where you don't want it. Container blocks, as mentioned. But I wonder what the best way to do it, runtime, would be — i.e. between variations. Almost feels like that has to be CSS territory right?

[hacknug]

Completely unnecessary for the first version of the block but maybe it would be interesting to allow users to randomize the divider's shape? Suggesting this because of https://getwaves.io

[CalumChilds]

Maybe we could have Custom Styles of the Separator block instead of a brand-new block?

[paaljoachim]

How is this issue coming along?
It would be great to get some movement here..:)
Thanks.

[karmatosed]

I think this could do with a design feedback label for discussion, so let's get one here.

[wittwitsan]

In design triage today, we agreed that this Shape Divider should be at the styling option level (<-> same as the background options) for some block eg. the Separator block or Group block, etc.

Usually we might not want the shape to be the main focus in the content flow.

[jbonlinea]

Hi there

That's sounds promising, may I add my two cents on how, for me, the separator could be to be user friendly and comprehensive :

• use an image in the separator instead of colors. The image could be a frieze, or sort of, that replace the plains colors, but still has the separator shape (wave, angle, pointed, etc.)
• have a separator style that is rectangular, shapes are great, but not always best. We may want some frieze as described to be shaped, or simply rectangular, and this will also permit to use any image without shapes (and at least it will ease the css if one has to add its image manually)
• be able to set separator to regular or full-width independently of theme support, there are css tricks for that)
• have vertical separators as well, that can be positioned left or right, for instance between columns. Idealy we could be able to decide whether the separator has the bloc content height or its counterpart height (if two column do not have the same height one may define if the separator cover the full height of the column block no matter the height of each column. It could also be used to separate the main content and sidebar (the trick would be to place all the content in a group with a vertical separator)

These are thing I'm basically "struggling" to built with css, and since a little time can set as reusable block, so basic user/author do not have to know about css class.

Regards

[Marc-pi]

yep, wouldn't be a nice candidate for 6.7 :-) , especially for the TT5 theme ???