Fullscreen Mode: Change W button to toggle wp-admin sidebar

packages/base-styles/index.js

@@ -5,6 +5,8 @@ exports.adminColorSchemes = {
 		toggle: '#11a0d2',
 		button: '#007cba',
 		outlines: '#007cba',
+		sidebar: '#23282d',
+		sidebarText: '#eee',
 	},
 	themes: {
 		'admin-color-light': {
@@ -13,48 +15,62 @@ exports.adminColorSchemes = {
 			toggle: '#11a0d2',
 			button: '#0085ba',
 			outlines: '#007cba',
+			sidebar: '#e5e5e5',
+			sidebarText: '#333',
 		},
 		'admin-color-blue': {
 			primary: '#82b4cb',
 			secondary: '#d9ab59',
 			toggle: '#82b4cb',
 			button: '#d9ab59',
 			outlines: '#417e9B',
+			sidebar: '#52accc',
+			sidebarText: '#fff',
 		},
 		'admin-color-coffee': {
 			primary: '#c2a68c',
 			secondary: '#9fa47b',
 			toggle: '#c2a68c',
 			button: '#c2a68c',
 			outlines: '#59524c',
+			sidebar: '#59524c',
+			sidebarText: '#fff',
 		},
 		'admin-color-ectoplasm': {
 			primary: '#a7b656',
 			secondary: '#c77430',
 			toggle: '#a7b656',
 			button: '#a7b656',
 			outlines: '#523f6d',
+			sidebar: '#523f6d',
+			sidebarText: '#fff',
 		},
 		'admin-color-midnight': {
 			primary: '#e14d43',
 			secondary: '#77a6b9',
 			toggle: '#77a6b9',
 			button: '#e14d43',
 			outlines: '#497b8d',
+			sidebar: '#363b3f',
+			sidebarText: '#fff',
 		},
 		'admin-color-ocean': {
 			primary: '#a3b9a2',
 			secondary: '#a89d8a',
 			toggle: '#a3b9a2',
 			button: '#a3b9a2',
 			outlines: '#5e7d5e',
+			sidebar: '#738e96',
+			sidebarText: '#fff',
 		},
 		'admin-color-sunrise': {
 			primary: '#d1864a',
 			secondary: '#c8b03c',
 			toggle: '#c8b03c',
 			button: '#d1864a',
 			outlines: '#837425',
+			sidebar: '#cf4944',
+			sidebarText: '#fff',
 		},
 	},
 };

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

@@ -1,17 +1,16 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
-import {
-	PinnedItems,
-	__experimentalMainDashboardButton as MainDashboardButton,
-} from '@wordpress/interface';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { cog } from '@wordpress/icons';
+import { PinnedItems } 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';
@@ -22,22 +21,50 @@ function Header( {
 	isInserterOpen,
 	setEntitiesSavedStatesCallback,
 } ) {
-	const { hasActiveMetaboxes, isPublishSidebarOpened, isSaving } = useSelect(
+	const {
+		shortcut,
+		hasActiveMetaboxes,
+		isEditorSidebarOpened,
+		isPublishSidebarOpened,
+		isSaving,
+		getBlockSelectionStart,
+	} = useSelect(
 		( select ) => ( {
+			shortcut: select(
+				'core/keyboard-shortcuts'
+			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
 			hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
+			isEditorSidebarOpened: select(
+				'core/edit-post'
+			).isEditorSidebarOpened(),
 			isPublishSidebarOpened: select(
 				'core/edit-post'
 			).isPublishSidebarOpened(),
 			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
+			getBlockSelectionStart: select( 'core/block-editor' )
+				.getBlockSelectionStart,
+			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
+			deviceType: select(
+				'core/edit-post'
+			).__experimentalGetPreviewDeviceType(),
 		} ),
 		[]
 	);
+	const { openGeneralSidebar, closeGeneralSidebar } = useDispatch(
+		'core/edit-post'
+	);
+
+	const toggleGeneralSidebar = isEditorSidebarOpened
+		? closeGeneralSidebar
+		: () =>
+				openGeneralSidebar(
+					getBlockSelectionStart()
+						? 'edit-post/block'
+						: 'edit-post/document'
+				);
 
 	return (
 		<div className="edit-post-header">
-			<MainDashboardButton.Slot>
-				<FullscreenModeClose />
-			</MainDashboardButton.Slot>
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar
 					onToggleInserter={ onToggleInserter }
@@ -68,6 +95,14 @@ function Header( {
 						setEntitiesSavedStatesCallback
 					}
 				/>
+				<Button
+					icon={ cog }
+					label={ __( 'Settings' ) }
+					onClick={ toggleGeneralSidebar }
+					isPressed={ isEditorSidebarOpened }
+					aria-expanded={ isEditorSidebarOpened }
+					shortcut={ shortcut }
+				/>
 				<PinnedItems.Slot scope="core/edit-post" />
 				<MoreMenu />
 			</div>

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

@@ -31,6 +31,8 @@ import {
 	ComplementaryArea,
 	FullscreenMode,
 	InterfaceSkeleton,
+	AdminMenuToggle,
+	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/interface';
 import { useState, useEffect, useCallback } from '@wordpress/element';
 import { close } from '@wordpress/icons';
@@ -140,6 +142,9 @@ function Layout() {
 	return (
 		<>
 			<FullscreenMode isActive={ isFullscreenActive } />
+			<MainDashboardButton.Slot>
+				{ isFullscreenActive && <AdminMenuToggle /> }
+			</MainDashboardButton.Slot>
 			<BrowserURL />
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />

packages/edit-post/src/index.js

@@ -159,4 +159,3 @@ export { default as PluginPostStatusInfo } from './components/sidebar/plugin-pos
 export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel';
 export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
-export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';

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

@@ -17,6 +17,7 @@ import {
 } from '@wordpress/data';
 import {
 	PinnedItems,
+	AdminMenuToggle,
 	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/interface';
 import { _x } from '@wordpress/i18n';
@@ -33,7 +34,6 @@ import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
-import FullscreenModeClose from './fullscreen-mode-close';
 
 /**
  * Browser dependencies
@@ -136,7 +136,7 @@ export default function Header( {
 	return (
 		<div className="edit-site-header">
 			<MainDashboardButton.Slot>
-				<FullscreenModeClose />
+				<AdminMenuToggle />
 			</MainDashboardButton.Slot>
 			<div className="edit-site-header__toolbar">
 				<Button

packages/edit-site/src/index.js

@@ -59,5 +59,3 @@ export function initialize( id, settings ) {
 	settings.__experimentalFetchLinkSuggestions = fetchLinkSuggestions;
 	render( <Editor settings={ settings } />, document.getElementById( id ) );
 }
-
-export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';

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/page-switcher/style.scss";