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

This reverts commit caf52c1.

Author: Jon Q

package-lock.json

@@ -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/e2e-tests/specs/editor/various/fullscreen-mode.test.js

@@ -6,12 +6,11 @@ import { Button } from '@wordpress/components';
 import { PostSavedState, PostPreviewButton } 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(
@@ -41,6 +41,9 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
 			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
+			isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
+				'fullscreenMode'
+			),
 			deviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
@@ -62,7 +65,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/components/header/fullscreen-mode-close/index.js

@@ -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-post/src/components/header/fullscreen-mode-close/style.scss

@@ -9,13 +9,12 @@ import {
 	__experimentalPreviewOptions as PreviewOptions,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { PinnedItems } from '@wordpress/interface';
+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';
@@ -52,6 +51,15 @@ export default function Header() {
 		[]
 	);
 
+	const { isFullscreenActive } = useSelect(
+		( select ) => ( {
+			isFullscreenActive: select( 'core/edit-site' ).isFeatureActive(
+				'fullscreenMode'
+			),
+		} ),
+		[]
+	);
+
 	const deviceType = useSelect( ( select ) => {
 		return select( 'core/edit-site' ).__experimentalGetPreviewDeviceType();
 	}, [] );
@@ -62,7 +70,7 @@ export default function Header() {
 
 	return (
 		<div className="edit-site-header">
-			<FullscreenModeClose />
+			{ isFullscreenActive && <AdminMenuToggle /> }
 			<div className="edit-site-header__toolbar">
 				<Inserter
 					position="bottom right"

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

@@ -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";