ListView: Replace prop drilldown by a stable ref in store (#57198)

WordPress · Dec 19, 2023 · e31781a · e31781a
1 parent 8ba8173
commit e31781a
Show file tree

Hide file tree

Showing 19 changed files with 112 additions and 106 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -32,7 +32,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
+function HeaderToolbar( { hasFixedToolbar } ) {
 	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
@@ -43,10 +43,12 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
+		listViewToggleRef,
 	} = useSelect( ( select ) => {
 		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
 			select( blockEditorStore );
-		const { getEditorSettings, isListViewOpened } = select( editorStore );
+		const { getEditorSettings, isListViewOpened, getListViewToggleRef } =
+			unlock( select( editorStore ) );
 		const { getEditorMode, isFeatureActive } = select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
@@ -65,6 +67,7 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-post/toggle-list-view'
 			),
+			listViewToggleRef: getListViewToggleRef(),
 		};
 	}, [] );
 
@@ -103,7 +106,7 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 				showTooltip={ ! showIconLabels }
 				variant={ showIconLabels ? 'tertiary' : undefined }
 				aria-expanded={ isListViewOpen }
-				ref={ setListViewToggleElement }
+				ref={ listViewToggleRef }
 				size="compact"
 			/>
 		</>

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -55,10 +55,7 @@ const slideX = {
 	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
 };
 
-function Header( {
-	setEntitiesSavedStatesCallback,
-	setListViewToggleElement,
-} ) {
+function Header( { setEntitiesSavedStatesCallback } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
@@ -111,10 +108,7 @@ function Header( {
 				transition={ { type: 'tween', delay: 0.8 } }
 				className="edit-post-header__toolbar"
 			>
-				<HeaderToolbar
-					hasFixedToolbar={ hasFixedToolbar }
-					setListViewToggleElement={ setListViewToggleElement }
-				/>
+				<HeaderToolbar hasFixedToolbar={ hasFixedToolbar } />
 				{ hasFixedToolbar && isLargeViewport && (
 					<>
 						<div

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -232,9 +232,6 @@ function Layout() {
 	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
 		useState( false );
 
-	const [ listViewToggleElement, setListViewToggleElement ] =
-		useState( null );
-
 	const closeEntitiesSavedStates = useCallback(
 		( arg ) => {
 			if ( typeof entitiesSavedStatesCallback === 'function' ) {
@@ -268,11 +265,7 @@ function Layout() {
 			return <InserterSidebar />;
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
-			return (
-				<ListViewSidebar
-					listViewToggleElement={ listViewToggleElement }
-				/>
-			);
+			return <ListViewSidebar />;
 		}
 
 		return null;
@@ -313,7 +306,6 @@ function Layout() {
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
-						setListViewToggleElement={ setListViewToggleElement }
 					/>
 				}
 				editorNotices={ <EditorNotices /> }

diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -4,7 +4,7 @@
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button, TabPanel } from '@wordpress/components';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { useCallback, useRef, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
@@ -17,18 +17,20 @@ import { store as editorStore } from '@wordpress/editor';
  * Internal dependencies
  */
 import ListViewOutline from './list-view-outline';
+import { unlock } from '../../lock-unlock';
 
-export default function ListViewSidebar( { listViewToggleElement } ) {
+export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editorStore );
+	const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
 
 	// This hook handles focus when the sidebar first renders.
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 
 	// When closing the list view, focus should return to the toggle button.
 	const closeListView = useCallback( () => {
 		setIsListViewOpened( false );
-		listViewToggleElement?.focus();
-	}, [ listViewToggleElement, setIsListViewOpened ] );
+		getListViewToggleRef().current?.focus();
+	}, [ getListViewToggleRef, setIsListViewOpened ] );
 
 	const closeOnEscape = useCallback(
 		( event ) => {

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -84,7 +84,7 @@ const blockRemovalRules = {
 	),
 };
 
-export default function Editor( { listViewToggleElement, isLoading } ) {
+export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -251,13 +251,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 						secondarySidebar={
 							isEditMode &&
 							( ( shouldShowInserter && <InserterSidebar /> ) ||
-								( shouldShowListView && (
-									<ListViewSidebar
-										listViewToggleElement={
-											listViewToggleElement
-										}
-									/>
-								) ) )
+								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={
 							isEditMode &&

diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
@@ -35,27 +35,30 @@ export default function DocumentTools( {
 	hasFixedToolbar,
 	isDistractionFree,
 	showIconLabels,
-	setListViewToggleElement,
 } ) {
 	const inserterButton = useRef();
-	const { isInserterOpen, isListViewOpen, listViewShortcut, isVisualMode } =
-		useSelect( ( select ) => {
-			const { getEditorMode } = select( editSiteStore );
-			const { getShortcutRepresentation } = select(
-				keyboardShortcutsStore
-			);
-			const { isInserterOpened, isListViewOpened } =
-				select( editorStore );
+	const {
+		isInserterOpen,
+		isListViewOpen,
+		listViewShortcut,
+		isVisualMode,
+		listViewToggleRef,
+	} = useSelect( ( select ) => {
+		const { getEditorMode } = select( editSiteStore );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const { isInserterOpened, isListViewOpened, getListViewToggleRef } =
+			unlock( select( editorStore ) );
 
-			return {
-				isInserterOpen: isInserterOpened(),
-				isListViewOpen: isListViewOpened(),
-				listViewShortcut: getShortcutRepresentation(
-					'core/edit-site/toggle-list-view'
-				),
-				isVisualMode: getEditorMode() === 'visual',
-			};
-		}, [] );
+		return {
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			listViewShortcut: getShortcutRepresentation(
+				'core/edit-site/toggle-list-view'
+			),
+			isVisualMode: getEditorMode() === 'visual',
+			listViewToggleRef: getListViewToggleRef(),
+		};
+	}, [] );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const { setDeviceType, setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
@@ -161,7 +164,7 @@ export default function DocumentTools( {
 								/* translators: button label text should, if possible, be under 16 characters. */
 								label={ __( 'List View' ) }
 								onClick={ toggleListView }
-								ref={ setListViewToggleElement }
+								ref={ listViewToggleRef }
 								shortcut={ listViewShortcut }
 								showTooltip={ ! showIconLabels }
 								variant={

diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -44,7 +44,7 @@ import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
 
-export default function HeaderEditMode( { setListViewToggleElement } ) {
+export default function HeaderEditMode() {
 	const {
 		templateType,
 		isDistractionFree,
@@ -137,7 +137,6 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 						blockEditorMode={ blockEditorMode }
 						isDistractionFree={ isDistractionFree }
 						showIconLabels={ showIconLabels }
-						setListViewToggleElement={ setListViewToggleElement }
 					/>
 					{ isTopToolbar && (
 						<>

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -129,8 +129,6 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const [ listViewToggleElement, setListViewToggleElement ] =
-		useState( null );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -258,11 +256,7 @@ export default function Layout() {
 									ease: 'easeOut',
 								} }
 							>
-								<Header
-									setListViewToggleElement={
-										setListViewToggleElement
-									}
-								/>
+								<Header />
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
@@ -367,9 +361,6 @@ export default function Layout() {
 													} }
 												>
 													<Editor
-														listViewToggleElement={
-															listViewToggleElement
-														}
 														isLoading={
 															isEditorLoading
 														}

diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
@@ -4,7 +4,7 @@
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
@@ -20,17 +20,18 @@ import { unlock } from '../../lock-unlock';
 
 const { PrivateListView } = unlock( blockEditorPrivateApis );
 
-export default function ListViewSidebar( { listViewToggleElement } ) {
+export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editorStore );
+	const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
 
 	// This hook handles focus when the sidebar first renders.
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 
 	// When closing the list view, focus should return to the toggle button.
 	const closeListView = useCallback( () => {
 		setIsListViewOpened( false );
-		listViewToggleElement?.focus();
-	}, [ listViewToggleElement, setIsListViewOpened ] );
+		getListViewToggleRef().current?.focus();
+	}, [ getListViewToggleRef, setIsListViewOpened ] );
 
 	const closeOnEscape = useCallback(
 		( event ) => {

diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
@@ -53,7 +53,8 @@
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/url": "file:../url",
 		"@wordpress/widgets": "file:../widgets",
-		"classnames": "^2.3.1"
+		"classnames": "^2.3.1",
+		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

diff --git a/packages/edit-widgets/src/components/header/document-tools/index.js b/packages/edit-widgets/src/components/header/document-tools/index.js
@@ -24,7 +24,7 @@ import { unlock } from '../../../lock-unlock';
 
 const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
 
-function DocumentTools( { setListViewToggleElement } ) {
+function DocumentTools() {
 	const isMediumViewport = useViewportMatch( 'medium' );
 	const inserterButton = useRef();
 	const widgetAreaClientId = useLastSelectedWidgetArea();
@@ -35,14 +35,18 @@ function DocumentTools( { setListViewToggleElement } ) {
 			),
 		[ widgetAreaClientId ]
 	);
-	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
-		const { isInserterOpened, isListViewOpened } =
-			select( editWidgetsStore );
-		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-		};
-	}, [] );
+	const { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(
+		( select ) => {
+			const { isInserterOpened, isListViewOpened, getListViewToggleRef } =
+				unlock( select( editWidgetsStore ) );
+			return {
+				isInserterOpen: isInserterOpened(),
+				isListViewOpen: isListViewOpened(),
+				listViewToggleRef: getListViewToggleRef(),
+			};
+		},
+		[]
+	);
 	const { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editWidgetsStore );
 	const { selectBlock } = useDispatch( blockEditorStore );
@@ -119,7 +123,7 @@ function DocumentTools( { setListViewToggleElement } ) {
 						/* translators: button label text should, if possible, be under 16 characters. */
 						label={ __( 'List View' ) }
 						onClick={ toggleListView }
-						ref={ setListViewToggleElement }
+						ref={ listViewToggleRef }
 					/>
 				</>
 			) }

diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
@@ -17,7 +17,7 @@ import DocumentTools from './document-tools';
 import SaveButton from '../save-button';
 import MoreMenu from '../more-menu';
 
-function Header( { setListViewToggleElement } ) {
+function Header() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const { hasFixedToolbar } = useSelect(
@@ -47,9 +47,7 @@ function Header( { setListViewToggleElement } ) {
 							{ __( 'Widgets' ) }
 						</VisuallyHidden>
 					) }
-					<DocumentTools
-						setListViewToggleElement={ setListViewToggleElement }
-					/>
+					<DocumentTools />
 					{ hasFixedToolbar && isLargeViewport && (
 						<>
 							<div className="selected-block-tools-wrapper">