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 better variations for Separator block #16483

Open
mtias opened this issue Jul 9, 2019 · 9 comments
Open

Add better variations for Separator block #16483

mtias opened this issue Jul 9, 2019 · 9 comments
Assignees
Labels
[Block] Separator Affects the Separator Block Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.

Comments

@mtias
Copy link
Member

mtias commented Jul 9, 2019

The current variations of the separator are a bit limiting and not super ergonomic. We should see about:

  • Allowing changing the width of the line.
  • Allow changing the color.
  • Improve the circles or offer size controls (can apply to circles and lines).
  • Offer other shapes (like zig-zag cc @jasmussen).
  • Consider also adding the Spacer block mechanics to give space before/after.
@mtias mtias added the [Block] Separator Affects the Separator Block label Jul 9, 2019
@richtabor
Copy link
Member

For reference, here's how we've adding spacing mechanics to our separator block within CoBlocks, essentially merging the Spacer and Separator blocks:

dynamic-hr

@jasmussen
Copy link
Contributor

Nice. The zig-zag shape being referred to is shown in this lovely ticket, which also supports the idea of a disparate blocks for separator designs and top/bottom group blocks shapes. From that comment, here are some of the more "out there" ideas that nonetheless support the idea of changing dimensions and colors:

Here are more basic ones that could simply be inline SVGs, which would let you easily configure the stroke-widths or colors:

@senadir
Copy link
Contributor

senadir commented Jul 27, 2019

this PR #16784 should handle the case of adding colors, I will follow up with other PR handling other points.

I prefer to to handle each point in a PR for it to be easy to test & review

@senadir
Copy link
Contributor

senadir commented Aug 6, 2019

this PR #16925 handles the case of width changing, it would have added alignment support if not for some problems in floating.

next PR will handle this

Improve the circles or offer size controls (can apply to circles and lines)

@paaljoachim
Copy link
Contributor

paaljoachim commented Oct 9, 2020

I went ahead and added two new issues:
Adding styles such as waves, jagged and loops.
#25991

Controlling the height of the Separator block.
#25989

@ricjcs
Copy link

ricjcs commented Mar 18, 2021

The default line is supposed to be a short line.

However, some themes like Twenty Twenty-One, the default line is different and there is no short line.

It should be possible to always select the short line, regardless of thema's default line.

@caseymilne
Copy link

Can we make something with a dashicon icon like ----------- icon --------------- with some alignment options for icon placement like:

---- icon -------------------------------
---------------------------- icon -------

@tanjoymor
Copy link

Nice to see this was being looked into. Would love to see it implemented. The Separator and Dynamic blocks are super limited at the moment.

@annezazu
Copy link
Contributor

annezazu commented Jul 2, 2024

Noting this related issue for a new shape divider block: #16351

@mtias mtias added the Needs Design Needs design efforts. label Sep 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Separator Affects the Separator Block Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.
Projects
Status: Later
Development

No branches or pull requests

10 participants