Focus pattern inserter search when activating zoom out inserter #64396
+39
−14
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
|
This is currently a WIP. It will focus the search input, but there are problems with it not re-focusing when you click on another |
|
Size Change: +40 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
|
I'm now thinking it might be better to use a approach similar to |
getdave
commented
Aug 9, 2024
getdave
commented
Aug 9, 2024
packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
Outdated
Show resolved
Hide resolved
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
FWIW I prefer the approach in 6eae006. What were the bugs in that version caused by? I suspect it's because you're using |
The issue is that in that method we're storing the need to focus the search in global state (i.e. editor store). In general I would consider that to be an anti-pattern. It also means the state needs to be cleared back to The main issue however is that even if you don't use the
I tried resetting the state once the zoom out mode inserter is no longer selected but it didn't work. I'm going to dive in a little deeper to see if we have any existing patterns for managing this type of thing in the editor. |
|
Flaky tests detected in 4cdc026. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10349416145
|
scruffian
reviewed
Aug 12, 2024
scruffian
approved these changes
Aug 12, 2024
getdave
added a commit
that referenced
this pull request
Aug 14, 2024
* Add new search focus option for inserter panel * Try focusing when inserter clicked in Zoom Out * Store search input ref in block editor settings * Remove legacy selector * Remove more legacy code * Move all ref selectors to block editor * Update packages/editor/src/components/inserter-sidebar/index.js --------- Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org>
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?
Focuses the Pattern inserter search when an inserter is clicked in Zoom Out mode.
Closes #63867
Why?
Currently when clicking on
+inserters in Zoom Out mode nothing happens. You just get an insertion point show up but nothing else. The idea in #63896 is that the insertion point expands so it's obvious that you use drag and drop but this won't work for keyboard users.Therefore we need a means for keyboard users to be able to insert patterns into the canvas.
How?
Exposes a
refwhich is programmatically focused when an inserter is activated in Zoom Out mode.Because Zoom Out is part of the
core/block-editorpackage and the search input is part ofcore/editorpackage we cannot select from theeditorstore inside the Zoom Out inserter components. Nor is it feasible to pass a prop down to the Zoom Out inserters.Therefore this PR utilises the block editor settings to expose the ref from the editor package to the block editor package code.
Testing Instructions
Testing Instructions for Keyboard
Repeat the steps above but use the keyboard and ensure that you can access the patterns inserter.
Screenshots or screencast
Screen.Capture.on.2024-08-09.at.15-39-49.mp4