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

Improve consistency of alignment tool placement #49272

Open
jameskoster opened this issue Mar 22, 2023 · 7 comments
Open

Improve consistency of alignment tool placement #49272

jameskoster opened this issue Mar 22, 2023 · 7 comments
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 Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.

Comments

@jameskoster
Copy link
Contributor

jameskoster commented Mar 22, 2023

What problem does this address?

Some alignment tools, e.g. Justification, are present in both the block toolbar and the Inspector.

Others, e.g. Vertical Alignment, Alignment (normal width, wide width, full width), Text Alignment are only available in the block toolbar. This inconsistency can be confusing and make the overall experience feel less predictable and robust.

What is your proposed solution?

In the Inspector these controls would occupy a relatively small footprint, and the Design Tools menu can hide them when not in use. So generally it might be most convenient for these controls to be available in both places. That is to say, if an alignment tool is present in the toolbar it should be present in the Inspector too.

Adding text alignment to the Typography panel would seem fairly trivial:

Group 1

This would be a non-default typography tool, and be present only if explicitly added, or an alignment was made in the post. But its presence here is also sensible in terms of setting default text alignments in global styles, where we might want to include, for example, justified text as an option. That is a separate exploration.

For block/flex alignments, long term I would be more inclined to combine these into a single control, similar to Figma:

But that's one for a separate issue (#49448).

A nearer term optimization would be to duplicate over the vertical and horizontal justification dropdowns from the block toolbar:

Container


Issue updated Apr 13.

@jameskoster jameskoster added [Type] Enhancement A suggestion for improvement. Needs Design Needs design efforts. [Feature] Layout Layout block support, its UI controls, and style output. labels Mar 22, 2023
@jameskoster

This comment was marked as resolved.

@jasmussen

This comment was marked as resolved.

@jameskoster
Copy link
Contributor Author

That could work if the Figma-esque combined control is too much effort.

Side note: It would be good to install a consistent design for indicating which item is selected in these menus. Should we adopt the check icons more broadly?

@jasmussen

This comment was marked as resolved.

@jameskoster
Copy link
Contributor Author

Please go ahead :)

@jasmussen jasmussen added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. Needs Design Needs design efforts. labels Apr 13, 2023
@jasmussen
Copy link
Contributor

Updated and added "Needs Dev".

@vcanales vcanales self-assigned this Jun 20, 2023
@vcanales
Copy link
Member

Possibly related to the alignment piece of this issue: "Global Styles: Add alignment support in global typography styles" — #48202.

Currently, text alignment doesn't seem to be included anywhere in the Global Styles panel, making moving the alignment controls to the Inspector less trivial.

@vcanales vcanales removed their assignment Jul 9, 2023
@jameskoster jameskoster added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Aug 2, 2023
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 Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.
Projects
Status: Needs development
Development

No branches or pull requests

3 participants