Zoom Out: Focus search when showing an insertion point

[scruffian]

What problem does this address?

In zoom out, when you click on the inserter button [+] the insertion marker shows, but it's not clear to users what is happening.

What is your proposed solution?

When the inserter button is clicked we should focus the search input so users can see where their next action should be.

[getdave]

I've looked into this a bit. The search component is here

gutenberg/packages/block-editor/src/components/inserter/menu.js

Lines 155 to 167 in 34b5219

	<SearchControl
	__nextHasNoMarginBottom
	className="block-editor-inserter__search"
	onChange={ ( value ) => {
	if ( hoveredItem ) {
	setHoveredItem( null );
	}
	setFilterValue( value );
	} }
	value={ filterValue }
	label={ __( 'Search for blocks and patterns' ) }
	placeholder={ __( 'Search' ) }
	/>

It is possible to wrap this in a <div> and use the useFocusOnMount hook to programmatically focus the search. This can be done conditionally by passing the ref returned from useFocusOnMount or just passing null.

The problem is how to do this conditionally? It will require some new global state to track whether or not to focus the search.

We already have setIsInserterOpened, but that is Boolean. We could add options to that action to allow consumers to control a separate focus state.

[scruffian]

I believe setIsInserterOpened uses setInserterIsOpened which takes whole load of options:

gutenberg/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js

Line 104 in 34b5219

setInserterIsOpened( {

[getdave]

Thanks. Funnily enough I just found that bit. I'm manipulating it now.