Fullscreen Mode: Change the "Back" button to toggle the sidebar

packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js

@@ -21,11 +21,5 @@ describe( 'Fullscreen Mode', () => {
 		} );
 
 		expect( isFullscreenEnabled ).toBe( true );
-
-		const fullscreenCloseButton = await page.$(
-			'.edit-post-fullscreen-mode-close'
-		);
-
-		expect( fullscreenCloseButton ).not.toBeNull();
 	} );
 } );

packages/edit-post/src/components/header/index.js

@@ -6,12 +6,11 @@ import { Button } from '@wordpress/components';
 import { PostPreviewButton, PostSavedState } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
-import { PinnedItems } from '@wordpress/interface';
+import { PinnedItems, AdminMenuToggle } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import FullscreenModeClose from './fullscreen-mode-close';
 import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
@@ -25,6 +24,7 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
+		isFullscreenActive,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -40,6 +40,9 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
+			isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
+				'fullscreenMode'
+			),
 		} ),
 		[]
 	);
@@ -58,7 +61,7 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 
 	return (
 		<div className="edit-post-header">
-			<FullscreenModeClose />
+			{ isFullscreenActive && <AdminMenuToggle /> }
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar
 					onToggleInserter={ onToggleInserter }

packages/edit-post/src/style.scss

@@ -3,7 +3,6 @@ $footer-height: $button-size-small;
 @import "../../interface/src/style.scss";
 
 @import "./components/header/style.scss";
-@import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/header-toolbar/style.scss";
 @import "./components/header/more-menu/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";

packages/edit-site/src/components/header/index.js

@@ -7,13 +7,13 @@ import {
 	ToolSelector,
 	Inserter,
 } from '@wordpress/block-editor';
-import { PinnedItems } from '@wordpress/interface';
+import { useSelect } from '@wordpress/data';
+import { PinnedItems, AdminMenuToggle } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import { useEditorContext } from '../editor';
-import FullscreenModeClose from './fullscreen-mode-close';
 import MoreMenu from './more-menu';
 import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
@@ -49,9 +49,19 @@ export default function Header() {
 			} ) ),
 		[]
 	);
+
+	const { isFullscreenActive } = useSelect(
+		( select ) => ( {
+			isFullscreenActive: select( 'core/edit-site' ).isFeatureActive(
+				'fullscreenMode'
+			),
+		} ),
+		[]
+	);
+
 	return (
 		<div className="edit-site-header">
-			<FullscreenModeClose />
+			{ isFullscreenActive && <AdminMenuToggle /> }
 			<div className="edit-site-header__toolbar">
 				<Inserter
 					position="bottom right"

packages/edit-site/src/style.scss

@@ -2,7 +2,6 @@
 
 @import "./components/block-editor/style.scss";
 @import "./components/header/style.scss";
-@import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/more-menu/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/sidebar/style.scss";

packages/interface/package.json

@@ -28,6 +28,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/plugins": "file:../plugins",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.15"

packages/interface/src/components/admin-menu-toggle/index.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useRef, useEffect, useState } from '@wordpress/element';
+import { ESCAPE, TAB } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
+import { wordpress } from '@wordpress/icons';
+
+function AdminMenuToggle() {
+	const buttonRef = useRef();
+	const toggleMenu = useToggle( { ref: buttonRef } );
+
+	return (
+		<Button
+			className="interface-admin-menu-toggle"
+			icon={ wordpress }
+			iconSize={ 36 }
+			onClick={ toggleMenu }
+			label={ __( 'Show sidebar menu' ) }
+			ref={ buttonRef }
+		/>
+	);
+}
+
+function useToggle( { ref } ) {
+	const [ isActive, setIsActive ] = useState( false );
+	const buttonNode = ref?.current;
+
+	const adminMenuNode = document.querySelector( '#adminmenumain' );
+
+	const toggleClassName = 'is-showing-admin-menu';
+
+	const toggleAdminMenu = () => setIsActive( ! isActive );
+	const closeAdminMenu = () => setIsActive( false );
+
+	const focusFirstAdminMenuItem = () => {
+		if ( ! buttonNode ) return;
+
+		const isButtonFocused = buttonNode.matches( ':focus' );
+		const item = adminMenuNode.querySelector( '#adminmenu > li > a' );
+
+		if ( isButtonFocused && item ) {
+			item.focus();
+		}
+	};
+
+	// Renders the open/closed UI for the admin menu
+	useEffect( () => {
+		if ( isActive ) {
+			document.body.classList.add( toggleClassName );
+		} else {
+			document.body.classList.remove( toggleClassName );
+		}
+	}, [ isActive ] );
+
+	// Handles closing the admin menu when clicking outside
+	useEffect( () => {
+		const handleOnClickOutside = ( event ) => {
+			if ( ! isActive ) return;
+
+			const { target } = event;
+
+			const didClickOutside =
+				! adminMenuNode.contains( target ) && target !== buttonNode;
+
+			if ( didClickOutside ) {
+				closeAdminMenu();
+			}
+		};
+
+		document.body.addEventListener( 'click', handleOnClickOutside );
+
+		return () => {
+			document.body.removeEventListener( 'click', handleOnClickOutside );
+		};
+	}, [ isActive, buttonNode ] );
+
+	// Handles admin menu keyboard interactions
+	useEffect( () => {
+		const handleOnKeyDown = ( event ) => {
+			if ( ! isActive ) return;
+
+			const { keyCode } = event;
+
+			if ( keyCode === ESCAPE ) {
+				closeAdminMenu();
+			}
+
+			if ( keyCode === TAB ) {
+				focusFirstAdminMenuItem();
+			}
+		};
+
+		document.body.addEventListener( 'keydown', handleOnKeyDown );
+
+		return () => {
+			document.body.removeEventListener( 'keydown', handleOnKeyDown );
+		};
+	}, [ isActive ] );
+
+	return toggleAdminMenu;
+}
+
+export default AdminMenuToggle;