Move Change Alignment from the Toolbar to the Block Menu

[deborah86]

What problem does this address?

New users might get confused as to the locations of options. Having similar options grouped together will help new users become more accustomed to the UI.

What is your proposed solution?

The change alignment feature affects the entire block. It should be present with the other block options.

[priethor]

Hi there!

The toolbar is already divided into four groups (see #25983 for more context), representing meta options, block-level options, inline-level options, and more. The alignment applies to the whole block, as you rightfully say, but so do the heading level and justification; as such, they are already in the block-level toolbar group.

Could you elaborate on this issue a bit more to better understand the issue?

[deborah86]

@priethor To better explain the issue, all the block level controls are in the side panel except for a few in the toolbar. My solution would be to move all the block level controls to the sidebar so they are all grouped together. Having block level controls in two separate places will confuse users. Having the controls in one place will also improve a user's workflow when modifying the block.

Instead of doing all the menu options one-by-one I should probably create a catch-all thread because you would ask for that anyway.

[priethor]

Not only would moving all block options to the sidebar result in moving a lot of them, but it would also go against the purpose of the toolbar. The toolbar provides a more direct and prominent way of interacting with blocks than the sidebar. Hence, the most common block options are in the toolbar, always available and ready to use, leaving the sidebar to less common tools.

I'll tag the design folks to provide UX feedback on this.

[critterverse]

I thought a bit about Gutenberg's split between a block's primary tools (toolbar) and secondary/advanced tools (inspector sidebar) in this blog post last year, and looked at how other site builders handle secondary controls. A few of the builders I looked into group the bulk of their tools together, but it seems that most split the available options and allow users to open a more advanced set of tools when needed.

From a design POV, I do think it's helpful to offer some of the most frequently used tools in the toolbar. As @priethor mentioned above, another benefit is to offer a more direct way of editing with these tools being in close proximity to the canvas.

[deborah86]

@critterverse General feedback from users is that WordPress is hard to use. Maybe having the tools there is beneficial for advanced users. For, beginners, having the tools in two separate locations makes the editor too difficult to use. A compromise is to add the tool in two locations. The block panel and the top bar.

Webflow, your biggest competitor, is often cited as being easier to use. Their options are in the sidebar.

Here are images showing how both of Wix's EditorX handles toolbars:

As you can see, the inline toolbar focuses on the actions that can be taken on the text while actions that can be taken on the entire block are on the sidebar.

I read your blog article. I see you looked at Photoshop and Figma for your design inspiration. Although these tools have great UI's, you must consider the purpose the tools are for and their audience. Photoshop is a commercial tool. A better UI comparison would be Canva. This is because Canva and WordPress target similar audiences.

Of your list of website builders, you used Elementor as an example. Elementor has the same complaints as Gutenberg. It is difficult for inexperienced users. This makes Elementor a terrible example. A better builder would be SeedPod. The creators of SeedPod have designed it to be beginner friendly.

GoDaddy, Wix, Weebly, and Squarespace are great tools to look at for UI inspiration. Their tools have way less options than Gutenberg. EditorX and Webflow would be better options to consider although these tools are targeted at designers because their UIs accommodate more options.

[deborah86]

@priethor I understand your sentiment and how you imagine the use of the toolbar. You must understand that what makes sense for a developer will not make sense for average users. It is easier for an average user to find tools when they are all in the same place.

[critterverse]

Awesome, thanks for reading and sharing these examples @deborah86!

I see you looked at Photoshop and Figma for your design inspiration. Although these tools have great UI's, you must consider the purpose the tools are for and their audience.

I didn’t include Figma in the audit part of my post for this reason, but just as a side note: Figma is a huge source of inspiration for many WP design contributors. While it's a very different tool, we share many of the same challenges and I find that we frequently reference their handling of design tools, interactions modes/models, inner layers, and much more 😁

GoDaddy, Wix, Weebly, and Squarespace ... have way less options than Gutenberg.

Totally agree on this. WordPress caters to a wide range of diverse audiences, including “mid-end” users who build and/or maintain sites for others. One of the constant design challenges is trying to make sure that simple, intuitive tools are available for the majority of users, while providing lots of more complex options for more advanced users who need them. I'm not saying that the balance is perfect in today's editor but just sharing my two cents about why I think it’s so important to maintain a hierarchy between what might be considered “primary” tools in the toolbar and “secondary” tools in the inspector.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[mrfoxtalbot]

This issue has not seen activity for a while and it does not seem likely that we will be moving in this direction. I am going to close this for now as "not planned" but thanks again for the detailed suggestion and all the thought you put into this, @deborah86!