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 #48377)
• [x] 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 #41060)
• [x] 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 #44899).
• [x] 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). https://github.com/WordPress/gutenberg/issues/49264
• [x] 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: https://github.com/WordPress/gutenberg/issues/48481)
• [x] 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. https://github.com/WordPress/gutenberg/issues/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. https://github.com/WordPress/gutenberg/issues/49278
• [ ] We need to be able to manage font size presets in editor. https://github.com/WordPress/gutenberg/issues/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). https://github.com/WordPress/gutenberg/issues/49271
• [x] Deleting a block with backspace seems to work only sporadically. Need to debug this. https://github.com/WordPress/gutenberg/issues/49087
• [x] The line height control tends to reset to 0 when modifying for the first time even though it displays a default initially. (https://github.com/WordPress/gutenberg/issues/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. https://github.com/WordPress/gutenberg/issues/49279
• [x] 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. https://github.com/WordPress/gutenberg/issues/49267
• [x] The cover matrix alignment tends to mess up with width of the contents (align top, for example). https://github.com/WordPress/gutenberg/pull/54050
• [ ] We should allow next & prev post block to not have text labels, just icons. https://github.com/WordPress/gutenberg/issues/49266
• [x] 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. https://github.com/WordPress/gutenberg/issues/49282
• [x] #48940
• [x] 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. https://github.com/WordPress/gutenberg/issues/49273
• [ ] There are other layout tools that are present in the toolbar (text alignment, vertical alignment) that are missing from the sidebar). #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. https://github.com/WordPress/gutenberg/issues/49280
• [ ] #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. https://github.com/WordPress/gutenberg/issues/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. https://github.com/WordPress/gutenberg/issues/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). https://github.com/WordPress/gutenberg/issues/49281
• [x] 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 #44302)
• [ ] #65725
• [x] The Tagline block doesn’t show up in style book. (Fixed in #48300)
• [x] 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 - https://github.com/WordPress/gutenberg/pull/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: #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: https://github.com/WordPress/gutenberg/issues/38684#issuecomment-1480124706

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.