Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Shape Divider block #16351

Open
richtabor opened this issue Jun 28, 2019 · 11 comments

Comments

@richtabor
Copy link

commented Jun 28, 2019

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:

ScreenFlow

@karmatosed

This comment has been minimized.

Copy link
Member

commented Jun 28, 2019

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

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Jul 5, 2019

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:

Screenshot 2019-07-05 at 10 38 30

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:

Screenshot 2019-07-05 at 10 45 10

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

Screenshot 2019-07-05 at 10 46 03

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:

Screenshot 2019-07-05 at 10 38 01

Screenshot 2019-07-05 at 10 38 07

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

This comment has been minimized.

Copy link
Contributor

commented Jul 5, 2019

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

@richtabor

This comment has been minimized.

Copy link
Author

commented Jul 5, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Jul 5, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

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

@drw158

This comment has been minimized.

Copy link
Contributor

commented Aug 9, 2019

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

@melchoyce

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2019

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 comment has been minimized.

Copy link
Contributor

commented Aug 24, 2019

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:

Screen Shot 2019-08-24 at 6 17 36 pm

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.