Gutenberg: G2 Block Interface followup

[jasmussen]

Recently, #19344 was merged as a first step towards addressing the interface learnings outlined in #18667.

It was a big PR, but advancing the block UI is a big undertaking, and there are followups to address. Two immediate ones are high-luminance default colors (#20460), and improving icon consistency (#20464)

As part of working on the PR, though, I wrote down a list of smaller tasks that deserve followup. As we discuss the following list on this ticket, we may even find the need to extract items to their own tickets.

• [x] The direction that block toolbar menu items open in, seems arbitrary.
• ~[ ] The block toolbar, when there's space, should be offset 48px to the left, so the block indicator becomes the anchor point.~ — we may need to rethink this.
• [x] Dropdowns opened from the block toolbar should be the same material as the toolbar itself, dark gray border, spaced correctly according to the grid.
• [x] Renaming the "Publish..." button to just "Publish", as the ellipsis does not add value.
• [x] Remove and unify behavior of trailing appenders from block-lists. Currently they appear at the end of any nesting container if the last block is not a paragraph, which means a grouped list inserts a (+) button regardless of block selection state.
• ~[ ] Placeholders: consider simplifying further by merging the title with the description and removing the icon. This will scale better to very tiny states, necessary for patterns.~ — let's either ticket this seperately, or just revisit placeholders entirely to be more decorative.
• [x] Explore a directional "appear" animation to the block toolbar.
• ~[ ] Unify consistency of resize handles: dots are used in some places, larger hit-area pills are explored in mockups.~ — Decided to punt this for now, as the tall handles will break for very small images. Open for others to explore.
• ~[ ] Refine the gallery block, revisit the idea of popping out the appender at the bottom. Perhaps leverage the new "Replace" button from the Image block instead.~ Tracked separately in #21247
• ~[ ] List block: explore collapsing list types and indents in subsequent dropdowns.~ Tracked separately in #21477
• ~[ ] Icons are missing in the selection mode label indicator.~ Spun into separate issue: #21479
• [x] Notices behave inconsistently towards the mobile breakpoint.
• [ ] Explore 32px buttons in header.
• [x] Button states, hover and toggled, should animate in.
• ~[ ] Block transform menu needs love.~ Tracked separately in #21478
• [x] "Saving" button state when saving reusable blocks has a bad gradient.

[mtias]

If both movers are disabled, it might be better to render the dotted-grid to signal dragging works.

The growing triangle on hover looks rough (pixelated) during the transition. It's so small that it might be better to not do anything:

On the navigator, the active state looks a bit excessive:

Let's make sure we open this more consistently to the bottom (and only top when there is no space):

Also, we should collapse this to single icon dropdown with tooltips.

[mtias]

Another small one — the dropdowns should open to the right and with a bit more spacing.

[mtias]

Another one that I'm not sure if it's after the design updates or not:

[ItsJonQ]

@mtias Just submitted a PR for the GradientPicker 👍

[jasmussen]

Fixed the tools menu:

[mtias]

Another small one: we should update the rounded borders and icon weight of the custom gallery controls.

[mtias]

Another small issue:

[jasmussen]

I checked the "Explore a directional "appear" animation to the block toolbar", as I tried making that happen, but could not get it buttery smooth, and it felt interruptive to the experience. So it's been explored, shelved for now, and therefore checked!

[jasmussen]

20782 fixes a few of the items outlined here, including the image dimensions issue.

[gziolo]

Some issues I noticed after rebasing with master:

1. [x] + icon on the bottom is black:
   

2. [x] The close icon is bigger than before but it might be correct, needs confirmation:
   

3. [x] The placeholder in Columns block when tabbing between variations to pick:
   

[jasmussen]

Thanks for the comment, @gziolo. I'll get to this as soon as I can.

Note that the black plus is a result of TwentyTwenty styling the plus when it shouldn't be. This is reported in Trac where it arguably should be fixed upstream. Separately we can discuss shadow domming such elements, so themes can't style them, intentionally or not. But I don't think we should override it in the block editor css even if we can.

[jasmussen]

We should consider rephrasing the Reusable blocks feature, and adding an icon to this one as it's one of the "bigger" features:

[pablohoneyhoney]

Here a tiny optimization to bold, italic, and strike icons. Reduced to 14 height instead of 16, to look more even in the toolbar. Green dot in this Figma file indicates update or optimization.

• Before
• After
  

[pablohoneyhoney]

One icon that needs an update is _Latest Posts_

[jasmussen]

We should explore making the tappable hit area of buttons in the top toolbar 48x48 like in the block toolbar, even if not the visual hit area.

[jasmussen]

@gziolo I can't reproduce your columns issue:

[gziolo]

I can't reproduce your columns issue:

Did you try hover + focus? If yes, then it might get fixed together with other changes :)

[jasmussen]

I did try hover and focus and I can't reproduce.

There are some related issues with the secondary button but none that produce the issue you saw. I think you may have had a ghost of the mixin?

[jasmussen]

I spent a bunch of time today in #21476, which fixes the overwhelming majority of issues listed in this thread. It doesn't get us to G2 perfection, but it gets us much farther, and very probably enough to close _this_ ticket in favor of separate individual tickets from now on.

One remaining issue is one of button sizes. First off, based on the comment here: https://github.com/WordPress/gutenberg/issues/20575#issuecomment-610795160 — bigger tap targets.

We can do that — icon buttons in the block toolbar are 48px tall, and unless there are multiple in sequence, they are also 48px wide. Like so:

But it does require a bit of jiggery pokery and positioning the focus rectangles so that they are actually visually useful and consistent — those need to become pseudo elements that are positioned carefully inside the _hit area_ of the button. To the question is: would that be an acceptable approach?