Adds the distraction free mode keyboard shortcut

WordPress · Jun 23, 2023 · ed86a44 · ed86a44
1 parent 7236c95
commit ed86a44
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 30 deletions.
diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -223,8 +223,6 @@ function KeyboardShortcuts() {
 	} );
 
 	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
-		closeGeneralSidebar();
-		setIsListViewOpened( false );
 		toggleDistractionFree();
 		toggleFeature( 'distractionFree' );
 		createInfoNotice(

diff --git a/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js b/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js
@@ -1,12 +1,15 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -29,15 +32,31 @@ function KeyboardShortcutsEditMode() {
 		[]
 	);
 	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened, switchEditorMode } =
-		useDispatch( editSiteStore );
+	const {
+		isFeatureActive,
+		setIsListViewOpened,
+		switchEditorMode,
+		toggleFeature,
+		setIsInserterOpened,
+		closeGeneralSidebar,
+	} = useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
 
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	const toggleDistractionFree = () => {
+		setPreference( 'core/edit-site', 'fixedToolbar', false );
+		setIsInserterOpened( false );
+		setIsListViewOpened( false );
+		closeGeneralSidebar();
+	};
+
 	const handleTextLevelShortcut = ( event, level ) => {
 		event.preventDefault();
 		const destinationBlockName =
@@ -114,6 +133,20 @@ function KeyboardShortcutsEditMode() {
 		);
 	} );
 
+	useShortcut( 'core/edit-site/toggle-distraction-free', () => {
+		toggleDistractionFree();
+		toggleFeature( 'distractionFree' );
+		createInfoNotice(
+			isFeatureActive( 'distractionFree' )
+				? __( 'Distraction free mode turned on.' )
+				: __( 'Distraction free mode turned off.' ),
+			{
+				id: 'core/edit-site/distraction-free-mode/notice',
+				type: 'snackbar',
+			}
+		);
+	} );
+
 	return null;
 }
 

diff --git a/packages/edit-site/src/components/keyboard-shortcuts/register.js b/packages/edit-site/src/components/keyboard-shortcuts/register.js
@@ -149,6 +149,16 @@ function KeyboardShortcutsRegister() {
 				},
 			} );
 		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/toggle-distraction-free',
+			category: 'global',
+			description: __( 'Toggle distraction free mode.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: '\\',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -72,31 +72,36 @@ export default function Layout() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isListPage = getIsListPage( params, isMobileViewport );
 	const isEditorPage = ! isListPage;
-<<<<<<< HEAD
-	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
-		useSelect( ( select ) => {
-			const { getAllShortcutKeyCombinations } = select(
-				keyboardShortcutsStore
-			);
-			const { getCanvasMode } = unlock( select( editSiteStore ) );
-			return {
-				canvasMode: getCanvasMode(),
-				previousShortcut: getAllShortcutKeyCombinations(
-					'core/edit-site/previous-region'
-				),
-				nextShortcut: getAllShortcutKeyCombinations(
-					'core/edit-site/next-region'
-				),
-				hasFixedToolbar: select( preferencesStore ).get(
-					'core/edit-site',
-					'fixedToolbar'
-				),
-				isDistractionFree: select( preferencesStore ).get(
-					'core/edit-site',
-					'distractionFree'
-				),
-			};
-		}, [] );
+
+	const {
+		isDistractionFree,
+		hasFixedToolbar,
+		canvasMode,
+		previousShortcut,
+		nextShortcut,
+	} = useSelect( ( select ) => {
+		const { getAllShortcutKeyCombinations } = select(
+			keyboardShortcutsStore
+		);
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		return {
+			canvasMode: getCanvasMode(),
+			previousShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/previous-region'
+			),
+			nextShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/next-region'
+			),
+			hasFixedToolbar: select( preferencesStore ).get(
+				'core/edit-site',
+				'fixedToolbar'
+			),
+			isDistractionFree: select( preferencesStore ).get(
+				'core/edit-site',
+				'distractionFree'
+			),
+		};
+	}, [] );
 	const isEditing = canvasMode === 'edit';
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -253,6 +253,9 @@
 	// so the fixed toolbar can be positioned on top of it
 	// but only on desktop
 	@include break-medium() {
+		.edit-site-layout__canvas-container {
+			z-index: 5;
+		}
 		.edit-site-site-hub {
 			z-index: 4;
 		}
@@ -270,7 +273,7 @@
 		top: 0;
 		left: 0;
 		right: 0;
-		z-index: 9998;
+		z-index: z-index(".edit-site-layout__header-container");
 		width: 100%;
 
 		// We need ! important because we override inline styles