Revert "Revert "Fullscreen Mode: Change the "Back" button to toggle the sidebar (#21121)" (#21929)"

Jon Q · Jon Q · commit 0e1898f45a6b · 2020-05-20T14:00:30.000-04:00
This reverts commit caf52c1.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js b/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();
 	} );
 } );
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -14,7 +14,6 @@ import {
 /**
  * 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';
@@ -32,6 +31,7 @@ function Header( {
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
+		isFullscreenActive,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -48,6 +48,9 @@ function Header( {
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
 			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
+			isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
+				'fullscreenMode'
+			),
 			deviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
diff --git a/packages/edit-post/src/style.scss b/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";
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -95,6 +95,15 @@ export default function Header( { openEntitiesSavedStates } ) {
 		} catch ( err ) {}
 	}, [] );
 
+	const { isFullscreenActive } = useSelect(
+		( select ) => ( {
+			isFullscreenActive: select( 'core/edit-site' ).isFeatureActive(
+				'fullscreenMode'
+			),
+		} ),
+		[]
+	);
+
 	const deviceType = useSelect( ( select ) => {
 		return select( 'core/edit-site' ).__experimentalGetPreviewDeviceType();
 	}, [] );
diff --git a/packages/edit-site/src/style.scss b/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";
diff --git a/packages/interface/package.json b/packages/interface/package.json
@@ -32,6 +32,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"
diff --git a/packages/interface/src/components/admin-menu-toggle/index.js b/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;
diff --git a/packages/interface/src/components/admin-menu-toggle/style.scss b/packages/interface/src/components/admin-menu-toggle/style.scss
@@ -0,0 +1,52 @@
+.interface-admin-menu-toggle.has-icon {
+	// Do not show the toolbar icon on small screens,
+	// when Fullscreen Mode is not an option in the "More" menu.
+	display: none;
+
+	@include break-medium() {
+		display: flex;
+		align-items: center;
+		align-self: stretch;
+		border: none;
+		border-radius: 0;
+		height: auto;
+		width: $header-height;
+		background: #23282e; // WP-admin gray.
+		transition: all 0.12s ease-in-out;
+
+		svg {
+			padding: 6px;
+			pointer-events: none;
+			border-radius: 2px;
+			width: 44px;
+			height: 44px;
+			fill: $white;
+		}
+
+		&:hover {
+			svg {
+				fill: rgba($white, 0.8);
+			}
+		}
+
+		&:active {
+			color: $white;
+		}
+
+		&:focus {
+			box-shadow: none;
+
+			svg {
+				box-shadow: 0 0 0 1.5px color($theme-color);
+			}
+		}
+
+		body.is-showing-admin-menu & {
+			width: 160px;
+		}
+
+		body.is-showing-admin-menu.folded & {
+			width: $header-height;
+		}
+	}
+}
diff --git a/packages/interface/src/components/fullscreen-mode/style.scss b/packages/interface/src/components/fullscreen-mode/style.scss
@@ -1,19 +1,69 @@
-body.js.is-fullscreen-mode {
-
+body.is-fullscreen-mode {
 	@include break-medium {
 		// Reset the html.wp-topbar padding.
 		// Because this uses negative margins, we have to compensate for the height.
 		margin-top: -$admin-bar-height;
 		height: calc(100% + #{ $admin-bar-height });
 
-		#adminmenumain,
+		// Hide the top adminbar toolbar.
 		#wpadminbar {
 			display: none;
 		}
 
+		// Layer the sidebar above the editor's top bar and
+		// setup the transition
+		#adminmenumain {
+			z-index: 1;
+			transform: translateX(-160px);
+			transition: transform 0.12s ease-in-out;
+		}
+
+		// Display the sidebar offscreen, and then transition in when needed.
+		#adminmenumain,
+		#adminmenuback {
+			position: fixed;
+			top: 60px;
+			left: 0;
+			bottom: 0;
+		}
+
+		// Hides the admin menu
+		// This prevents keyboard navigation from accessing inner links
+		#adminmenuwrap {
+			//display: none;
+		}
+
+		.interface-interface-skeleton__body,
+		.interface-interface-skeleton__footer {
+			transition: margin-left 0.12s ease-in-out;
+		}
+
 		#wpcontent,
 		#wpfooter {
 			margin-left: 0;
 		}
 	}
 }
+
+body.is-showing-admin-menu {
+	#adminmenumain {
+		transform: translateX(0);
+	}
+
+	// Show the admin menu
+	#adminmenuwrap {
+		display: block;
+	}
+
+	.interface-interface-skeleton__body,
+	.interface-interface-skeleton__footer {
+		margin-left: 160px;
+	}
+}
+
+body.is-showing-admin-menu.folded {
+	.interface-interface-skeleton__body,
+	.interface-interface-skeleton__footer {
+		margin-left: 36px;
+	}
+}
diff --git a/packages/interface/src/components/index.js b/packages/interface/src/components/index.js
@@ -3,3 +3,4 @@ export { default as FullscreenMode } from './fullscreen-mode';
 export { default as InterfaceSkeleton } from './interface-skeleton';
 export { default as PinnedItems } from './pinned-items';
 export { default as __experimentalMainDashboardButton } from './main-dashboard-button';
+export { default as AdminMenuToggle } from './admin-menu-toggle';
diff --git a/packages/interface/src/style.scss b/packages/interface/src/style.scss
