Open afercia opened 1 year ago
The scrollability issue should be fixed in https://github.com/WordPress/gutenberg/pull/55069.
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.
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
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
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