@wordpress/edit-widgets 5.25.0 → 5.26.0

package/src/components/secondary-sidebar/index.js

@@ -13,7 +13,7 @@ import { store as editWidgetsStore } from '../../store';
 import InserterSidebar from './inserter-sidebar';
 import ListViewSidebar from './list-view-sidebar';
 
-export default function SecondarySidebar( { listViewToggleElement } ) {
+export default function SecondarySidebar() {
 	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
 		const { isInserterOpened, isListViewOpened } =
 			select( editWidgetsStore );
@@ -27,9 +27,7 @@ export default function SecondarySidebar( { listViewToggleElement } ) {
 		return <InserterSidebar />;
 	}
 	if ( isListViewOpen ) {
-		return (
-			<ListViewSidebar listViewToggleElement={ listViewToggleElement } />
-		);
+		return <ListViewSidebar />;
 	}
 	return null;
 }

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -4,7 +4,7 @@
 import { __experimentalListView as ListView } 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, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
@@ -14,9 +14,11 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-export default function ListViewSidebar( { listViewToggleElement } ) {
+export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editWidgetsStore );
+	const { getListViewToggleRef } = unlock( useSelect( editWidgetsStore ) );
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the dropZoneElement updates.
@@ -27,8 +29,8 @@ export default function ListViewSidebar( { listViewToggleElement } ) {
 	// 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 ) => {

package/src/store/index.js

@@ -11,7 +11,9 @@ import reducer from './reducer';
 import * as resolvers from './resolvers';
 import * as selectors from './selectors';
 import * as actions from './actions';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Block editor data store configuration.
@@ -47,3 +49,5 @@ apiFetch.use( function ( options, next ) {
 
 	return next( options );
 } );
+
+unlock( store ).registerPrivateSelectors( privateSelectors );

package/src/store/private-selectors.js

@@ -0,0 +1,3 @@
+export function getListViewToggleRef( state ) {
+	return state.listViewToggleRef;
+}

package/src/store/reducer.js

@@ -68,6 +68,17 @@ export function listViewPanel( state = false, action ) {
 	return state;
 }
 
+/**
+ * This reducer does nothing aside initializing a ref to the list view toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the list view toggle button.
+ */
+export function listViewToggleRef( state = { current: null } ) {
+	return state;
+}
+
 export default combineReducers( {
 	blockInserterPanel,
 	listViewPanel,