enhances the effect of the reduceUI preference to hide all the chrome…

… of the editor, including the block toolbar, top bar, most top bar buttons, insertion point and closes any sidebars

packages/block-editor/src/components/block-toolbar/index.js

@@ -125,7 +125,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 						) }
 						<BlockMover
 							clientIds={ blockClientIds }
-							hideDragHandle={ hideDragHandle || hasReducedUI }
+							hideDragHandle={ hideDragHandle }
 						/>
 					</ToolbarGroup>
 				) }

packages/block-editor/src/components/block-tools/insertion-point.js

@@ -33,6 +33,8 @@ function InsertionPointPopover( {
 		nextClientId,
 		rootClientId,
 		isInserterShown,
+		hasReducedUI,
+		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -41,6 +43,8 @@ function InsertionPointPopover( {
 			isBlockBeingDragged,
 			getPreviousBlockClientId,
 			getNextBlockClientId,
+			getSettings,
+			isNavigationMode: _isNavigationMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
@@ -60,13 +64,17 @@ function InsertionPointPopover( {
 			_nextClientId = getNextBlockClientId( _nextClientId );
 		}
 
+		const settings = getSettings();
+
 		return {
 			previousClientId: _previousClientId,
 			nextClientId: _nextClientId,
 			orientation:
 				getBlockListSettings( insertionPoint.rootClientId )
 					?.orientation || 'vertical',
 			rootClientId: insertionPoint.rootClientId,
+			isNavigationMode: _isNavigationMode(),
+			hasReducedUI: settings.hasReducedUI,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
@@ -169,6 +177,10 @@ function InsertionPointPopover( {
 		},
 	};
 
+	if ( hasReducedUI && ! isNavigationMode ) {
+		return null;
+	}
+
 	const className = classnames(
 		'block-editor-block-list__insertion-point',
 		'is-' + orientation

packages/block-editor/src/components/block-tools/selected-block-popover.js

@@ -160,6 +160,8 @@ function wrapperSelector( select ) {
 		getBlockRootClientId,
 		getBlock,
 		getBlockParents,
+		getSettings,
+		isNavigationMode: _isNavigationMode,
 		__experimentalGetBlockListSettingsForBlocks,
 	} = select( blockEditorStore );
 
@@ -186,10 +188,14 @@ function wrapperSelector( select ) {
 				?.__experimentalCaptureToolbars
 	);
 
+	const settings = getSettings();
+
 	return {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
+		hasReducedUI: settings.hasReducedUI,
+		isNavigationMode: _isNavigationMode(),
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -212,8 +218,14 @@ export default function WrappedBlockPopover( {
 		name,
 		isEmptyDefaultBlock,
 		capturingClientId,
+		hasReducedUI,
+		isNavigationMode,
 	} = selected;
 
+	if ( hasReducedUI && ! isNavigationMode ) {
+		return null;
+	}
+
 	if ( ! name ) {
 		return null;
 	}

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

@@ -29,26 +29,23 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		isPublishSidebarOpened,
 		isSaving,
 		showIconLabels,
-		hasReducedUI,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isPublishSidebarOpened:
-				select( editPostStore ).isPublishSidebarOpened(),
+			isPublishSidebarOpened: select(
+				editPostStore
+			).isPublishSidebarOpened(),
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			hasReducedUI:
-				select( editPostStore ).isFeatureActive( 'reducedUI' ),
+			showIconLabels: select( editPostStore ).isFeatureActive(
+				'showIconLabels'
+			),
 		} ),
 		[]
 	);
 
 	const isLargeViewport = useViewportMatch( 'large' );
 
-	const classes = classnames( 'edit-post-header', {
-		'has-reduced-ui': hasReducedUI,
-	} );
+	const classes = classnames( 'edit-post-header' );
 
 	return (
 		<div className={ classes }>

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

@@ -36,7 +36,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 							scope="core/edit-post"
 						/>
 					) }
-					<WritingMenu />
+					<WritingMenu onClose={ onClose } />
 					<ModeSwitcher />
 					<ActionItem.Slot
 						name="core/edit-post/plugin-more-menu"

packages/edit-post/src/components/header/style.scss

@@ -31,6 +31,71 @@
 	}
 }
 
+.is-distraction-free {
+	.edit-post-header {
+		position: absolute;
+		width: 100%;
+		background-color: rgba(255, 255, 255, 0);
+		border-bottom: 0 solid #fff;
+
+		// hide everything
+		& > .edit-post-header__settings > *,
+		& > .edit-post-header__toolbar {
+			visibility: hidden;
+		}
+
+		& > .edit-post-header__settings > .editor-post-publish-button,
+		& > .edit-post-header__settings > .editor-post-publish-panel__toggle,
+		& > .edit-post-header__settings .interface-more-menu-dropdown {
+			visibility: visible;
+			transition: opacity 0.4s;
+			opacity: 0;
+		}
+
+		// remove the pinned items
+		& .interface-pinned-items {
+			display: none;
+		}
+
+		// show the full screen toggle
+		& > div:first-child {
+			opacity: 1;
+			a {
+				transition: width 0.2s, height 0.2s, margin 0.2s, border-radius 0.2s;
+				width: 50px;
+				height: 50px;
+				margin: 5px;
+				border-radius: 4px;
+			}
+		}
+
+		&:hover {
+			transition: background-color 0.4s, border-bottom 0.4s;
+			background-color: rgba(255, 255, 255, 1);
+			border-bottom: 1px solid #e0e0e0;
+
+			// show the publish button and the more button
+			> .edit-post-header__settings > .editor-post-publish-button,
+			> .edit-post-header__settings > .editor-post-publish-panel__toggle,
+			> .edit-post-header__settings .interface-more-menu-dropdown {
+				transition: opacity 0.2s;
+				opacity: 1;
+			}
+
+		}
+
+		.components-editor-notices__dismissible {
+			position: absolute;
+			top: 0;
+			width: 100vw;
+			z-index: z-index(".interface-interface-skeleton__actions");
+		}
+
+
+	}
+
+}
+
 .edit-post-header__toolbar {
 	display: flex;
 	flex-grow: 1;

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

@@ -1,13 +1,37 @@
 /**
  * WordPress dependencies
  */
+import { useSelect, useDispatch } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { displayShortcut } from '@wordpress/keycodes';
 import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
-function WritingMenu() {
+/**
+ * Internal dependencies
+ */
+import { store as postEditorStore } from '../../../store';
+
+function WritingMenu( { onClose } ) {
+	const hasReducedUI = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().hasReducedUI,
+		[]
+	);
+
+	const {
+		setIsInserterOpened,
+		setIsListViewOpened,
+		closeGeneralSidebar,
+	} = useDispatch( postEditorStore );
+
+	const toggleDistractionFree = () => {
+		setIsInserterOpened( false );
+		setIsListViewOpened( false );
+		closeGeneralSidebar();
+		onClose();
+	};
 	const isLargeViewport = useViewportMatch( 'medium' );
 	if ( ! isLargeViewport ) {
 		return null;
@@ -17,6 +41,7 @@ function WritingMenu() {
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
+				disabled={ hasReducedUI }
 				name="fixedToolbar"
 				label={ __( 'Top toolbar' ) }
 				info={ __(
@@ -27,6 +52,7 @@ function WritingMenu() {
 			/>
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
+				disabled={ hasReducedUI }
 				name="focusMode"
 				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
@@ -35,13 +61,24 @@ function WritingMenu() {
 			/>
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
+				disabled={ hasReducedUI }
 				name="fullscreenMode"
 				label={ __( 'Fullscreen mode' ) }
-				info={ __( 'Work without distraction' ) }
+				info={ __( 'Show and hide admin UI' ) }
 				messageActivated={ __( 'Fullscreen mode activated' ) }
 				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
 				shortcut={ displayShortcut.secondary( 'f' ) }
 			/>
+			<PreferenceToggleMenuItem
+				scope="core/edit-post"
+				name="reducedUI"
+				toggleHandler={ toggleDistractionFree }
+				label={ __( 'Toggle interface' ) }
+				info={ __( 'Work without distraction' ) }
+				messageActivated={ __( 'Distraction free mode activated' ) }
+				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
+				shortcut={ displayShortcut.primaryShift( '\\' ) }
+			/>
 		</MenuGroup>
 	);
 }

packages/edit-post/src/components/keyboard-shortcuts/index.js

@@ -7,9 +7,10 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -18,14 +19,21 @@ import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
 	const { getBlockSelectionStart } = useSelect( blockEditorStore );
-	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
-		useSelect( editPostStore );
+	const {
+		getEditorMode,
+		isEditorSidebarOpened,
+		isListViewOpened,
+		isFeatureActive,
+	} = useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
-		const { richEditingEnabled, codeEditingEnabled } =
-			select( editorStore ).getEditorSettings();
+		const { richEditingEnabled, codeEditingEnabled } = select(
+			editorStore
+		).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
 
+	const { createInfoNotice } = useDispatch( noticesStore );
+
 	const {
 		switchEditorMode,
 		openGeneralSidebar,
@@ -46,6 +54,16 @@ function KeyboardShortcuts() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/edit-post/toggle-distraction-free',
+			category: 'global',
+			description: __( 'Toggle disrtaction free mode.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: '\\',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/edit-post/toggle-fullscreen',
 			category: 'global',
@@ -135,6 +153,23 @@ function KeyboardShortcuts() {
 		toggleFeature( 'fullscreenMode' );
 	} );
 
+	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
+		closeGeneralSidebar();
+		setIsListViewOpened( false );
+		toggleFeature( 'reducedUI' );
+		const modeState = isFeatureActive( 'reducedUI' )
+			? __( 'on' )
+			: __( 'off' );
+		createInfoNotice(
+			// translators: Mode of distraction free can be 'on' or 'off';
+			sprintf( __( 'Distraction free mode turned %s.' ), modeState ),
+			{
+				speak: true,
+				type: 'snackbar',
+			}
+		);
+	} );
+
 	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
 		// This shortcut has no known clashes, but use preventDefault to prevent any
 		// obscure shortcuts from triggering.