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

Combine alignment + justification on flex blocks into a single control. #49448

Open
jameskoster opened this issue Mar 29, 2023 · 1 comment
Open
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Layout Layout block support, its UI controls, and style output. Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.

Comments

@jameskoster
Copy link
Contributor

jameskoster commented Mar 29, 2023

Flex blocks like Row and Stack currently have dedicated controls for alignment and justification:

Align Justify
Screenshot 2023-03-29 at 19 00 42 Screenshot 2023-03-29 at 19 00 38

They're quite closely related, but it's difficult to intuit that from the separate controls. Theoretically they can be combined into a single control which better communicates that relationship. Here's what Figma does which works quite well:

It's not too dissimilar from the position matrix control on Cover blocks:

Screenshot 2023-03-29 at 19 03 25

It's worth noting that the space-between and stretch options wouldn't fit so neatly into a control like this, so we'd need a solution for that.

cc @WordPress/gutenberg-design

@jameskoster jameskoster added Needs Design Needs design efforts. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Layout Layout block support, its UI controls, and style output. labels Mar 29, 2023
@jameskoster jameskoster moved this to Needs design in 6.3 Design Mar 29, 2023
@SaxonF
Copy link
Contributor

SaxonF commented Mar 30, 2023

@jameskoster I added more recent layout designs here . My thinking is that we can use matrix specifically in toolbar for quickly laying things out, and keep all other alignment options in sidebar. You'll notice using select for alignment but that's mostly for demo purposes and can easily change to ToggleGroup when in prod. Stretch would not be an option and that's because the idea is to combine with inner block width. This should also help to resolve #49272. @tellthemachines is working on a POC here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Layout Layout block support, its UI controls, and style output. Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.
Projects
Status: Needs design, or refresh
Development

No branches or pull requests

3 participants