@wordpress/edit-post 7.3.2 → 7.4.0

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

@@ -14,10 +14,12 @@ import {
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,6 +33,7 @@ export default function ListViewSidebar() {
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
+
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
@@ -40,12 +43,63 @@ export default function ListViewSidebar() {
 
 	const [ tab, setTab ] = useState( 'list-view' );
 
+	// This ref refers to the sidebar as a whole.
+	const sidebarRef = useRef();
+	// This ref refers to the list view tab button.
+	const listViewTabRef = useRef();
+	// This ref refers to the outline tab button.
+	const outlineTabRef = useRef();
+	// This ref refers to the list view application area.
+	const listViewRef = useRef();
+
+	/*
+	 * Callback function to handle list view or outline focus.
+	 *
+	 * @param {string} currentTab The current tab. Either list view or outline.
+	 *
+	 * @return void
+	 */
+	function handleSidebarFocus( currentTab ) {
+		// List view tab is selected.
+		if ( currentTab === 'list-view' ) {
+			// Either focus the list view or the list view tab button. Must have a fallback because the list view does not render when there are no blocks.
+			const listViewApplicationFocus = focus.tabbable.find(
+				listViewRef.current
+			)[ 0 ];
+			const listViewFocusArea = sidebarRef.current.contains(
+				listViewApplicationFocus
+			)
+				? listViewApplicationFocus
+				: listViewTabRef.current;
+			listViewFocusArea.focus();
+			// Outline tab is selected.
+		} else {
+			outlineTabRef.current.focus();
+		}
+	}
+
+	// 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', () => {
+		// 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.
+		} else {
+			handleSidebarFocus( tab );
+		}
+	} );
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			aria-label={ __( 'Document Overview' ) }
 			className="edit-post-editor__document-overview-panel"
 			onKeyDown={ closeOnEscape }
+			ref={ sidebarRef }
 		>
 			<div
 				className="edit-post-editor__document-overview-panel-header components-panel__header edit-post-sidebar__panel-tabs"
@@ -59,6 +113,7 @@ export default function ListViewSidebar() {
 				<ul>
 					<li>
 						<Button
+							ref={ listViewTabRef }
 							onClick={ () => {
 								setTab( 'list-view' );
 							} }
@@ -73,6 +128,7 @@ export default function ListViewSidebar() {
 					</li>
 					<li>
 						<Button
+							ref={ outlineTabRef }
 							onClick={ () => {
 								setTab( 'outline' );
 							} }
@@ -91,6 +147,7 @@ export default function ListViewSidebar() {
 				ref={ useMergeRefs( [
 					contentFocusReturnRef,
 					focusOnMountRef,
+					listViewRef,
 				] ) }
 				className="edit-post-editor__list-view-container"
 			>

package/src/editor.js

@@ -7,7 +7,7 @@ import {
 	ErrorBoundary,
 	PostLockedModal,
 	store as editorStore,
-	experiments as editorExperiments,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
@@ -21,9 +21,9 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import { store as editPostStore } from './store';
-import { unlock } from './experiments';
+import { unlock } from './private-apis';
 
-const { ExperimentalEditorProvider } = unlock( editorExperiments );
+const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	const {
@@ -139,6 +139,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	}, [
 		settings,
 		hasFixedToolbar,
+		hasInlineToolbar,
 		focusMode,
 		isDistractionFree,
 		hiddenBlockTypes,

package/src/{experiments.js → private-apis.js}

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(

package/build/experiments.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-post/src/experiments.js"],"names":["lock","unlock"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,sBAFD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/edit-post'\n\t);\n"]}

package/build-module/experiments.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-post/src/experiments.js"],"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","lock","unlock"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAT,QAAiE,wBAAjE;AAEA,OAAO,MAAM;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZF,gDAAgD,CAC/C,8GAD+C,EAE/C,sBAF+C,CAD1C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/edit-post'\n\t);\n"]}