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

Try adding left/right alignment controls to the spacer block #16049

Open
kjellr opened this issue Jun 7, 2019 · 3 comments

Comments

@kjellr
Copy link
Contributor

kjellr commented Jun 7, 2019

This was originally raised by @melchoyce in a DM. Squarespace has a spacer-type elmement that can be floated to the left or right. It may be interesting to try something like this out for Gutenberg too.

This feature can be helpful if a user wants to offset blocks and create non-standard layouts. These left/right spacers could theoretically be ignored on smalls screens, so the content would still be is full width there.

This is a super-rough hack, but to get the general idea across:

spacer

(Ideally the right/left resize handles would only show up when the image is floated to the left or right though.)

@MariusKauer

This comment has been minimized.

Copy link

MariusKauer commented Jun 20, 2019

This looks awesome! For accessibility the right / left handles would need an extra input field in the panel to add values. Something like this:

Vertical Spacer Settings

@richtabor

This comment has been minimized.

Copy link

richtabor commented Jul 9, 2019

I'm torn actually, adding that UI and functionality is not difficult - but as a user, having to do each of those steps to add space left or right of another block seems a bit heavy.

Some thoughts/suggestions on this implementation that could lighten up the UX:

  1. Maybe the left/right handles shouldn't render unless the block is left or right
  2. Only the opposite handle should show (as you'd probably not drag the left side of the spacer to the left if its aligned left)
  3. And what's the responsive considerations (if any?)
@kjellr

This comment has been minimized.

Copy link
Contributor Author

kjellr commented Jul 10, 2019

At its core, this issue is meant to easily create columns of content from existing content. As an alternate approach to this, I opened a "Transform to Columns" issue here: #16504

It's not exactly the same, but does accomplish a similar goal: put stuff into columns.

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