UX feedback on working with the site editor

[mtias]

These are notes from @pablohoneyhoney and myself. I'll be turning them into separate issues.

• Copying from one template to another is quite laborious. We need a quick way to reset a template based on another template, like “copy from existing template”. Could be placed in the sidebar inspector for the template you are in. It should be a one-click action. (Related Site Editor: consider adding an option to clone an existing template when creating a new one #48377)
• Creating a new template is also hit and miss in terms of what starting point it'll use, we need to allow you to pick what to base it on most of the time.
  We also need starting layouts for common designs (header, sidebar, content) using the right template parts in the right places. (Related Creating a template: Present the user with initial block configuration options #41060)
• Post template block doesn't have block spacing — it’s really hard to work with and have layouts employing flex box. You end up adding a ton of groups because of it. The use of the list/grid option in the query block itself is archaic and adds to the confusion (which block is responsible for layout?). (Related Post Template Block: Add blockGap support #44899).
• The margins and padding values for top / left / right are hard to use in the sidebar. When everything is opened it's hard to relate what settings are grouped, and to parse the specific side labels. We could try opening in popover like color picker or having higher information density in the design (i.e. not everything on a new line). Optimise and condense unlinked padding / margin controls #49264
• Quick template switching is still not quite there. Would be nice if the dropdown from the title header of the editor had “recent templates”. Either from the templates icon or from the upcoming new search / command line. The "areas" group seems ineffective at this point that we have a good list view that collapses by default. (See: Command palette: Add contextual shortcuts when editing a template #48481)
• We should always deep link to the block type panel in global styles when selecting a block with global styles open. Should work like the style book but with any block in a template. Global Styles Panel: deep link to the block type panel when selecting a block with Styles open #49277
• Knowing what style is affecting something on a theme is difficult (is it a global element? is it coming from a block type? is it local to the template?). It’d be nice to show a hierarchy of styles clearly (theme, user, global unspecific, global specific, local, etc). Also be able to push or transfer something to the right level when working through a design. Styles: show a hierarchy of styles clearly (theme, user, global unspecific, global specific, local, etc) #49278
• We need to be able to manage font size presets in editor. Feature request: Add support for font size presets in global styles #43443
• The block ellipsis menu is quite gigantic with copy styles / paste styles and forces you to scroll. We really need to get this organized. Tools you use all the time become buried (like remove block). Migrate block options menu to DropdownMenu v2 and use flyout menus to re-organise actions #49271
• Deleting a block with backspace seems to work only sporadically. Need to debug this. Deleting multiple blocks from list view #49087
• The line height control tends to reset to 0 when modifying for the first time even though it displays a default initially. (LineHeightControl: Custom spin buttons adjust from zero instead of base default #48766)
• Allow using “refs” in the UI for colors. It's a powerful tool to reduce the misuse of named color palettes as semantic tokens. Styles: Allow using “refs” in the UI for colors #49279
• Color picker is quite buggy — the circle handle is cut off when used at the edges (this is a regression); dragging outside the panel loses the drag event easily. Color picker handle issues #49267
• The cover matrix alignment tends to mess up with width of the contents (align top, for example). Make matrix position behave like valign #54050
• We should allow next & prev post block to not have text labels, just icons. Allow Next / Previous Page blocks to entertain an icon-only or text-only display #49266
• We should allow "Group" to have the same "full height + width of the page that cover has.
• We should add some shapes to home link block (circle, dot, square, triangle) and allow inserting anywhere (outside nav menu). It's a highly convenient way of linking to the home if you don't want to use the site title name. Same with menu when collapsed. Ideally just with html characters so font size works and responds to font family adequately. Home Link block: add more shapes & allow inserting anywhere #49282
• Categories Block: No text alignment option #48940
• Generally we should allow modifying some core setting in the sidebar even if present on the toolbar. For example, the site icon should be shown as a small preview in the sidebar and allow changing from there. Site Logo: Make it possible to set / update / remove via the Inspector #49273
• There are other layout tools that are present in the toolbar (text alignment, vertical alignment) that are missing from the sidebar). Improve consistency of alignment tool placement #49272
• We need a query pattern of a grid of featured images as a starting point. We need much more optionality on query patterns in general. Query Loop Block: Continued iteration on bundled patterns #49280
• Could be nice to have a page number block as part of the navigation tools to display (with 1 being current). #65726
• All post blocks should be replaceable / convert to other blocks. I should be able to easily swap a Date with an Author block, or Categories with Tags. Post blocks: ensure all are able to be transformed to other post blocks #49283
• It's frustrating to use the “query pagination” block and not being able to drag it around to reposition. It seems to only want to exist as a direct child of Query Loop. Contrast to the “prev” and “next” post block which are much easier to use, insert, copy, move. Query pagination doesn't work when inside a template part. #38684
• Dragging stuff out of post template is generally very error prone and makes the blocks disappear at times. Pretty frustrating experience to lose content and being forced to undo, which also feels a bit buggy.
• Site logo doesn’t have width unit support compared to other image blocks (percentage, viewport units, etc). Site Logo: add width unit support (percentage, viewport units, etc) #49281
• Templates shifting order due to "recency" in the sidebar is disorienting. It makes it hard to jump back and forth as you always pause to look for the right one. Let's come up with an order that makes sense and iterate. (See Improve organization of templates to reflect importance/hierarchy #44302)
• Comment navigation doesn’t have options for arrows like Next / Prev post and Post Navigation have. #65725
• The Tagline block doesn’t show up in style book. (Fixed in Site Tagline: Add example so that it will display in style book #48300)
• Theme font family incorrectly applied to resize tooltip

[tresorama]

Seems a good place to add mine also.
I have plan to open dedicated issues in following days.

If this is not an appropriate place I will delete.

• Feature - Block - Block / Spacer - should use the “theme.json” spacing scale, with fallback to custom value

Proposed Solution:
Let user defines value of height as one of these:

• spacing scale (1-2-3-…-7 or what comes from theme.json)
• custom value (if user want to go custom)

• Block - Attribute - Gradient and Duotone color picker should let pick semantic token from “theme.json”

Proposed Solution:
Add Color Switcher at bottom side equal to “Solid” color

• Block - Block / Navigation - “Block Spacing” should be renamed to “Space between items” or “Items distance” or “Items Gap”

• Block - Block / Button - add ability to edit "hover" and "active" state

Could be good to have this also at "Editor" > "Styles" level, when user can override every default block settings.

[talldan]

Seems a good place to add mine also.
I have plan to open dedicated issues in following days.

The first one on your list has been worked on, but it has stalled somewhat - #44002.

I imagine there are also issues open somewhere for hover/active states 😄

I'm not sure about the other two suggestions, but worth checking for existing issues first.

[jameskoster]

We should allow "Group" to have the same "full height + width of the page that cover has.

It's already possible for a Group to be full height in this way, by setting a 100vh minimum height. It's also possible for it to be full width via the alignment control. So I'm going to check that item off for now. We can easily uncheck based on the answer to the following question:

Should there be a toolbar shortcut for the full-height option as there is in the Cover block? I'd learn towards no because it seems like a feature you'd need less often in the Group context.

[porg]

• Please add this to your list: Panels shall remember their state or else switching between them is a usability nightmare #49268

[richtabor]

Should there be a toolbar shortcut for the full-height option as there is in the Cover block? I'd learn towards no because it seems like a feature you'd need less often in the Group context.

Agreed.

[annezazu]

👋🏼 Opened as many issues as I could from the list. A few notes on the items I didn't open issues for:

• I cannot replicate this using the latest version of GB and 6.2 RC3: Comment navigation doesn’t have options for arrows like Next / Prev post and Post Navigation have.
• I left this: Deleting a block with backspace seems to work only sporadically. Need to debug this.
• I wasn't sure what was meant by this: The cover matrix alignment tends to mess up with width of the contents (align top, for example).
• I wasn't sure what was meant by this: Could be nice to have a page number block as part of the navigation tools to display (with 1 being current)
• I couldn't replicate any bugginess with 15.4 and 6.2 RC3: Dragging stuff out of post template is generally very error prone and makes the blocks disappear at times. Pretty frustrating experience to lose content and being forced to undo, which also feels a bit buggy.

A note for an item I linked to a currently open issue:

• It's frustrating to use the “query pagination” block. Afaik, this is because the block doesn't inherit the query context when outside of the query loop. As a result, I linked to this issue but, depending on what you want, another issue might need to be opened: Query pagination doesn't work when inside a template part. #38684 (comment)

I added the issues opened to the Phase 2 board for tracking with best guesses for priority and areas. Feel free to rearrange, edit the issues, etc.

[jasmussen]

Dragging stuff out of post template is generally very error prone and makes the blocks disappear at times. Pretty frustrating experience to lose content and being forced to undo, which also feels a bit buggy.

If it's what I think it is, I've been seeing this a lot, and would put a high emphasis on the importance of improving this. Here's a GIF showing dragging items in the list view:

• It is a bit choppy
• It is very hard to drop an item at the root level, shown in the start here, that was my goal, but the item ends up inside the header template instead
• Occasionally it's finnicky: you click, but if you ever so slightly and accidentally drag while you click, you invoke the drag operation and suddenly the item is gone.

So a few basic suggestions that don't preclude further improvements:

• Generally explore performance improvements, so draggin an item feels as fast as moving the cursor
• Improve the indentation heuristic so it's much more predictable on which level you drop.
• • If that can't be done, always default to the root level, or the same level being dragged from, and allow dragging into a nesting container only by dragging on top of that container. We can even highlight the nesting container blue on hover.
• Refine the drag invocation to either have a delay, or a minimu distance moved, so clicks don't accidentally invoke drag and drop.

[carolinan]

(For the comment navigation, the icon option is on the parent block, Comments Pagination, not the inner Comments Previous/ Next Page blocks.)

[jasmussen]

CC: @WordPress/gutenberg-design for visibility, there's a lot of good stuff here.