Move all ref selectors to block editor

WordPress · Aug 12, 2024 · 4cdc026 · 4cdc026
1 parent bf454a0
commit 4cdc026
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 41 deletions.
diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
@@ -435,10 +435,6 @@ _Related_
 
 -   getInserterItems in core/block-editor store.
 
-### getInserterSearchInputRef
-
-Undocumented declaration.
-
 ### getLastMultiSelectedBlockClientId
 
 _Related_

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -33,7 +33,9 @@ function ZoomOutModeInserters() {
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
 			isBlockInsertionPointVisible,
-		} = select( blockEditorStore );
+			getInserterSearchInputRef,
+		} = unlock( select( blockEditorStore ) );
+
 		const { sectionRootClientId: root } = unlock( getSettings() );
 
 		return {
@@ -46,8 +48,7 @@ function ZoomOutModeInserters() {
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
 			hoveredBlockClientId: getHoveredBlockClientId(),
-			inserterSearchInputRef:
-				getSettings().__experimentalGetInserterSearchInputRef(),
+			inserterSearchInputRef: getInserterSearchInputRef(),
 		};
 	}, [] );
 

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -33,6 +33,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
 import { useZoomOut } from '../../hooks/use-zoom-out';
+import { unlock } from '../../lock-unlock';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -50,15 +51,19 @@ function InserterMenu(
 		onClose,
 		__experimentalInitialTab,
 		__experimentalInitialCategory,
-		__experimentalSearchInputRef,
 	},
 	ref
 ) {
-	const isZoomOutMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
-		[]
-	);
+	const { isZoomOutMode, inserterSearchInputRef } = useSelect( ( select ) => {
+		const { __unstableGetEditorMode, getInserterSearchInputRef } = unlock(
+			select( blockEditorStore )
+		);
+		return {
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			inserterSearchInputRef: getInserterSearchInputRef(),
+		};
+	}, [] );
+
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -105,7 +110,7 @@ function InserterMenu(
 				}
 			} );
 		},
-		[ onInsertBlocks, onSelect, shouldFocusBlock ]
+		[ onInsertBlocks, onSelect, ref, shouldFocusBlock ]
 	);
 
 	const onInsertPattern = useCallback(
@@ -114,7 +119,7 @@ function InserterMenu(
 			onInsertBlocks( blocks, { patternName } );
 			onSelect();
 		},
-		[ onInsertBlocks, onSelect ]
+		[ onInsertBlocks, onSelect, onToggleInsertionPoint ]
 	);
 
 	const onHover = useCallback(
@@ -165,7 +170,7 @@ function InserterMenu(
 					value={ filterValue }
 					label={ __( 'Search for blocks and patterns' ) }
 					placeholder={ __( 'Search' ) }
-					ref={ __experimentalSearchInputRef }
+					ref={ inserterSearchInputRef }
 				/>
 
 				{ !! delayedFilterValue && (
@@ -189,7 +194,7 @@ function InserterMenu(
 	}, [
 		selectedTab,
 		filterValue,
-		__experimentalSearchInputRef,
+		inserterSearchInputRef,
 		delayedFilterValue,
 		onSelect,
 		onHover,

diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -511,3 +511,7 @@ export function getTemporarilyEditingAsBlocks( state ) {
 export function getTemporarilyEditingFocusModeToRevert( state ) {
 	return state.temporarilyEditingFocusModeRevert;
 }
+
+export function getInserterSearchInputRef( state ) {
+	return state.inserterSearchInputRef;
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
@@ -2085,6 +2085,10 @@ export function hoveredBlockClientId( state = false, action ) {
 	return state;
 }
 
+export function inserterSearchInputRef( state = { current: null } ) {
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2118,6 +2122,7 @@ const combinedReducers = combineReducers( {
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
 	hoveredBlockClientId,
+	inserterSearchInputRef,
 } );
 
 function withAutomaticChangeReset( reducer ) {

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
@@ -27,12 +27,10 @@ export default function InserterSidebar() {
 		insertionPoint,
 		showMostUsedBlocks,
 		sidebarIsOpened,
-
-		inserterSearchInputRef,
 	} = useSelect( ( select ) => {
 		const {
 			getInserterSidebarToggleRef,
-			getInserterSearchInputRef,
+
 			getInsertionPoint,
 			isPublishSidebarOpened,
 		} = unlock( select( editorStore ) );
@@ -57,8 +55,6 @@ export default function InserterSidebar() {
 			sidebarIsOpened: !! (
 				getActiveComplementaryArea( 'core' ) || isPublishSidebarOpened()
 			),
-
-			inserterSearchInputRef: getInserterSearchInputRef(),
 		};
 	}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );
@@ -104,7 +100,6 @@ export default function InserterSidebar() {
 				}
 				ref={ libraryRef }
 				onClose={ closeInserterSidebar }
-				__experimentalSearchInputRef={ inserterSearchInputRef }
 			/>
 		</div>
 	);

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -226,13 +226,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		[ settingsBlockPatternCategories, restBlockPatternCategories ]
 	);
 
-	const { _getInserterSearchInputRef } = useSelect( ( select ) => {
-		const { getInserterSearchInputRef } = select( editorStore );
-		return {
-			_getInserterSearchInputRef: getInserterSearchInputRef,
-		};
-	}, [] );
-
 	const { undo, setIsInserterOpened } = useDispatch( editorStore );
 
 	const { saveEntityRecord } = useDispatch( coreStore );
@@ -332,7 +325,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
-			__experimentalGetInserterSearchInputRef: _getInserterSearchInputRef,
 		};
 		lock( blockEditorSettings, {
 			sectionRootClientId,
@@ -362,7 +354,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		sectionRootClientId,
 		globalStylesData,
 		globalStylesLinksData,
-		_getInserterSearchInputRef,
 	] );
 }
 

diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js
@@ -372,10 +372,6 @@ export function inserterSidebarToggleRef( state = { current: null } ) {
 	return state;
 }
 
-export function inserterSearchInputRef( state = { current: null } ) {
-	return state;
-}
-
 export function publishSidebarActive( state = false, action ) {
 	switch ( action.type ) {
 		case 'OPEN_PUBLISH_SIDEBAR':
@@ -408,5 +404,4 @@ export default combineReducers( {
 	listViewToggleRef,
 	publishSidebarActive,
 	dataviews: dataviewsReducer,
-	inserterSearchInputRef,
 } );
diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js
@@ -1796,7 +1796,3 @@ export const getPostTypeLabel = createRegistrySelector(
 export function isPublishSidebarOpened( state ) {
 	return state.publishSidebarActive;
 }
-
-export function getInserterSearchInputRef( state ) {
-	return state.inserterSearchInputRef;
-}