Switch block to pattern menu: CSS issues impact operability

[afercia]

Description

Discovered while working on https://github.com/WordPress/gutenberg/pull/50577

When a block can be transformed into a Pattern, the Block Switcher menu shows a 'Pattern' item that expands a popover with the list of available patterns. Turns out there are a few CSS issues that seriously impact this feature at the point it can't be used, given some conditions.

First issue

The list of patterns is not scrollable. This is a regression and originates from https://github.com/WordPress/gutenberg/pull/44079

• When the block has some long content and
• There's more than one available pattern the block can be transformed into
• The list of Patterns is not scrollable. It's impossible to scroll the list and click the second / third / etx. available pattern.

Screenshots to illustrate:

When the block content is short, the available patterns will likely all fit into the patterns list. However, there's no guarantee this will always be operable. When there are 4-5 or more patterns, it sill be impossible to scroll and click the last patterns within the list.

When the block content is a bit longer, it is likely the second pattern in the list will be cut-off. Still, there's no way to scroll the list.

When the block content is very long, all the Patterns but the first one will be hidden. There's no way to scroll the list and click on them:

For this example, I used the Heading block but this can happen with any block with long content and more than one pattern provided either by the Patterns directory or the active theme.

Second issue

On small screens, clicking the 'Pattern' item in the Block switcher menu does nothing. Actually, on small screens the popover with the Patterns list is always hidden with display: none. It gets visible only on the break-medium breakpoint. As such, this can't be operated on small screens.

Third issue

When clicking the 'Patterns' item in the menu, the popover with the Patterns preview opens and stays open. Clicking the 'Patterns' item again, closes the popover. When the popover is open, hovering on the other items in the Block switcher menu shows other 'previews' which are shown on top of the Pattern popover. While this doesn't fully break the operability of the feature, it's still not great to see and it's a minor usability issue.

Screenshot: on the left, click to open the popover. On teh right, hover the other items.

Step-by-step reproduction instructions

• For testing purposes, activate Twenty Twenty-one so that the Heading block will have two available patterns it can be transformed into:
  • A 'Heading' pattern that comes from the Patterns directory.
  • A 'Large text' pattern provided by the theme.
• Edit a post, add a Heading block.
• Insert some long content in the Heading block. Hint: press Shift+Enter to go in a new line and insert several lines of content.
• Click the block switcher in the block toolbar and then click 'Patterns'.
• The popover with the available patterns list open.
• Observe the patterns list can't be scrolled.
• Observe it's impossible to scroll and click the second pattern.
  • Note: it's still possible to use thje keyboardL when focus is on the first pattern, use the Down and Up arrow keys/
• Close the block switcher menu.
• Emulate a small screen by using your browser dev tools.
• Click the block switcher in the block toolbar and then click 'Patterns'.
• Observe that, visually, nothing happens.
  • Note: the popover with the patterns list is actually rendered but it's hidden with CSS.
• Close the block switcher menu.
• Stop emulating a small screen.
• Click the block switcher in the block toolbar and then click 'Patterns'.
• Hover the other items in the menu: Paragraph, List, Quote, etc.
• Observe the Paragraph, List, Quote, etc. previews are shown on top of the Patterns preview.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

The scrollability issue should be fixed in https://github.com/WordPress/gutenberg/pull/55069.

[t-hamano]

As a separate issue, I'd like to leave a comment regarding the keyboard interaction issue. As mentioned earlier in this comment, I discovered an issue where the popover preview loses focus when you press the escape key.