Update the position of the patterns tab in the inserter menu #55688
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
carolinan
added
[Focus] Accessibility (a11y)
|
Size Change: -58 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
|
Not sure if this one is ready for review, but I still see a few places where I guess they won't do anything now so can be removed. I'm not really sure what should be done about the quick inserter, which also has a similar prop. In testing I struggled to get it to trigger, as the sibling inserter doesn't seem to be visible (is that a bug or a feature?). |
|
Flaky tests detected in 3358d71. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6901618808
|
Thank you, I have removed them.
I did not understand. What does not trigger in the quick inserter? |
I struggled to get the root level quick or sibling inserter to show at all in some templates because there's no gap between the blocks. It's easier if you're in a blank template though. I did a screen capture of what I was concerned about below. If you trigger the quick inserter at root level in the site editor, it shows patterns by default, but 'Browse All' still takes you to blocks (and I think it should possibly open the patterns tab). This experience is a bit disjointed, so maybe it needs more design feedback (cc @richtabor): Kapture.2023-11-17.at.16.37.39.mp4 |
|
I actually find it annoying that only patterns show in the quick inserter 😅 I still haven't developed a habit to use |
As we continue consolidating the site and post editor experiences, I'm in favor of having block and pattern insertion flows 1:1 across both experiences. I'd say the same for the quick inserter on both editors as well, having both surface blocks. Surfacing patterns is important, but not by simply replacing blocks with patterns. Rather by exploring pattern-specific flows, such as a top-level dedicated inserter that indicates pattern insertion, which opens the patterns tab. Something dedicated along these lines perhaps (a separate exploration): CleanShot.2023-11-17.at.13.23.30.mp4I'd like input from others as well @WordPress/gutenberg-design. |
|
Hi @talldan @richtabor What is the status of this PR? :) |
I would say a separate PR. |
|
@WordPress/gutenberg-design what do you think here? |
|
Looks good to me. I like the consistency and agree the quick inserter can be treated as a separate issue. |
talldan
approved these changes
Jan 4, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
In the block inserter menu, which can be opened from the "Toggle block inserter" button in the toolbar in the editors,
blocks, patterns and media are displayed as tabs. The order of the tabs were different on different screens; the first tab would show blocks on some screens, and patterns when editing templates.
This PR aims to change the order so that the order is the same in the editors:
1 ) Blocks 2) Patterns 3) Media.
Closes #47113
Why?
The inconsistent order may be confusing. Please see more details in the issue.
How?
The PR removes the "prioritizePatterns" prop and the condition that was used to place the patterns tab before the blocks.
The condition is no longer needed since the order of the tabs should be the same.
Testing Instructions
Classic theme:
Please open the block inserter menu and confirm the order of the tabs on the following screens:
WordPress admin > Posts /Pages > Add new
WordPress admin > Widgets: Confirm that this screen is unchanged and does not show patterns in the tab.
Create or select a user-created block pattern. Test the inserter menu on the pattern creation screen.
After activating a block theme:
Please open the block inserter menu and confirm the order of the tabs on the following screens:
Testing Instructions for Keyboard
With a block theme active, create a new post or page.
Inside the Editor top bar region, navigate past the "View posts" link.
Inside the document tools toolbar, activate the button with the aria-label "Toggle block inserter" (The plus icon).
Navigate past the search input field.
With a screen reader,
"Blocks" should be announced as tab 1 of 3. Use the right arrow key to select the next tab.
"Patterns" should be announced as tab 2 of 3. Use the right arrow key to select the next tab.
"Media" should tab 3 of 3.
Next please do the same test when editing a block template.
Go to WordPress admin, open the Appearance menu, select Editor, and next, select Templates.
Chose any template in the list, press the Enter key to open that template in the editor.
With the template open, navigate to the tabs in the block inserter menu again and confirm that the tab order is the same:
Blocks, patterns media.