diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 878177c250f841..5265cac569239f 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -210,6 +210,10 @@ function Layout() {
// Note 'truthy' callback implies an open panel.
const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
useState( false );
+
+ const [ listViewToggleElement, setListViewToggleElement ] =
+ useState( null );
+
const closeEntitiesSavedStates = useCallback(
( arg ) => {
if ( typeof entitiesSavedStatesCallback === 'function' ) {
@@ -244,7 +248,11 @@ function Layout() {
return ;
}
if ( mode === 'visual' && isListViewOpened ) {
- return ;
+ return (
+
+ );
}
return null;
@@ -285,6 +293,7 @@ function Layout() {
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
+ setListViewToggleElement={ setListViewToggleElement }
/>
}
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
index 77a56617cb1c63..0d96606e9e0434 100644
--- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -3,14 +3,10 @@
*/
import { __experimentalListView as ListView } from '@wordpress/block-editor';
import { Button, TabPanel } from '@wordpress/components';
-import {
- useFocusOnMount,
- useFocusReturn,
- useMergeRefs,
-} from '@wordpress/compose';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import { focus } from '@wordpress/dom';
-import { useRef, useState } from '@wordpress/element';
+import { useCallback, useRef, useState } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -22,21 +18,27 @@ import { ESCAPE } from '@wordpress/keycodes';
import { store as editPostStore } from '../../store';
import ListViewOutline from './list-view-outline';
-export default function ListViewSidebar() {
+export default function ListViewSidebar( { listViewToggleElement } ) {
const { setIsListViewOpened } = useDispatch( editPostStore );
// This hook handles focus when the sidebar first renders.
const focusOnMountRef = useFocusOnMount( 'firstElement' );
- // The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
- const headerFocusReturnRef = useFocusReturn();
- const contentFocusReturnRef = useFocusReturn();
- function closeOnEscape( event ) {
- if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
- event.preventDefault();
- setIsListViewOpened( false );
- }
- }
+ // When closing the list view, focus should return to the toggle button.
+ const closeListView = useCallback( () => {
+ setIsListViewOpened( false );
+ listViewToggleElement?.focus();
+ }, [ listViewToggleElement, setIsListViewOpened ] );
+
+ const closeOnEscape = useCallback(
+ ( event ) => {
+ if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+ event.preventDefault();
+ closeListView();
+ }
+ },
+ [ closeListView ]
+ );
// Use internal state instead of a ref to make sure that the component
// re-renders when the dropZoneElement updates.
@@ -53,7 +55,6 @@ export default function ListViewSidebar() {
// Must merge the refs together so focus can be handled properly in the next function.
const listViewContainerRef = useMergeRefs( [
- contentFocusReturnRef,
focusOnMountRef,
listViewRef,
setDropZoneElement,
@@ -87,20 +88,26 @@ export default function ListViewSidebar() {
}
}
- // This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
- useShortcut( 'core/edit-post/toggle-list-view', () => {
+ const handleToggleListViewShortcut = useCallback( () => {
// If the sidebar has focus, it is safe to close.
if (
sidebarRef.current.contains(
sidebarRef.current.ownerDocument.activeElement
)
) {
- setIsListViewOpened( false );
- // If the list view or outline does not have focus, focus should be moved to it.
+ closeListView();
} else {
+ // If the list view or outline does not have focus, focus should be moved to it.
handleSidebarFocus( tab );
}
- } );
+ }, [ closeListView, tab ] );
+
+ // This only fires when the sidebar is open because of the conditional rendering.
+ // It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+ useShortcut(
+ 'core/edit-post/toggle-list-view',
+ handleToggleListViewShortcut
+ );
/**
* Render tab content for a given tab name.
@@ -127,10 +134,9 @@ export default function ListViewSidebar() {
>