make top toolbar and distraction free work in tandem across editors a…

…nd preference UIs
WordPress · Nov 28, 2023 · 5082611 · 5082611
1 parent fee46cf
commit 5082611
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 47 deletions.
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
@@ -10,7 +10,6 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -19,11 +18,6 @@ import { store as postEditorStore } from '../../../store';
 
 function WritingMenu() {
 	const registry = useRegistry();
-	const isDistractionFree = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().isDistractionFree,
-		[]
-	);
 
 	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
 		useDispatch( postEditorStore );
@@ -38,6 +32,10 @@ function WritingMenu() {
 		} );
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core/edit-post', 'distractionFree', false );
+	};
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	if ( ! isLargeViewport ) {
 		return null;
@@ -47,15 +45,25 @@ function WritingMenu() {
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
-				disabled={ isDistractionFree }
 				name="fixedToolbar"
+				onToggle={ turnOffDistractionFree }
 				label={ __( 'Top toolbar' ) }
 				info={ __(
 					'Access all block and document tools in a single place'
 				) }
 				messageActivated={ __( 'Top toolbar activated' ) }
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
+			<PreferenceToggleMenuItem
+				scope="core/edit-post"
+				name="distractionFree"
+				onToggle={ toggleDistractionFree }
+				label={ __( 'Distraction free' ) }
+				info={ __( 'Write with calmness' ) }
+				messageActivated={ __( 'Distraction free mode activated' ) }
+				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
+				shortcut={ displayShortcut.primaryShift( '\\' ) }
+			/>
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
 				name="focusMode"
@@ -73,16 +81,6 @@ function WritingMenu() {
 				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
 				shortcut={ displayShortcut.secondary( 'f' ) }
 			/>
-			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				name="distractionFree"
-				onToggle={ toggleDistractionFree }
-				label={ __( 'Distraction free' ) }
-				info={ __( 'Write with calmness' ) }
-				messageActivated={ __( 'Distraction free mode activated' ) }
-				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
-				shortcut={ displayShortcut.primaryShift( '\\' ) }
-			/>
 		</MenuGroup>
 	);
 }

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
@@ -76,6 +76,10 @@ export default function EditPostPreferencesModal() {
 		closeGeneralSidebar();
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core/edit-post', 'distractionFree', false );
+	};
+
 	const sections = useMemo(
 		() => [
 			{
@@ -171,6 +175,7 @@ export default function EditPostPreferencesModal() {
 					>
 						<EnableFeature
 							featureName="fixedToolbar"
+							onToggle={ turnOffDistractionFree }
 							help={ __(
 								'Access all block and document tools in a single place.'
 							) }

diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { external } from '@wordpress/icons';
 import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
@@ -36,14 +36,6 @@ import { store as siteEditorStore } from '../../../store';
 
 export default function MoreMenu( { showIconLabels } ) {
 	const registry = useRegistry();
-	const isDistractionFree = useSelect(
-		( select ) =>
-			select( preferencesStore ).get(
-				'core/edit-site',
-				'distractionFree'
-			),
-		[]
-	);
 
 	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
 		useDispatch( siteEditorStore );
@@ -59,6 +51,10 @@ export default function MoreMenu( { showIconLabels } ) {
 		} );
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core/edit-site', 'distractionFree', false );
+	};
+
 	return (
 		<>
 			<MoreMenuDropdown
@@ -73,7 +69,7 @@ export default function MoreMenu( { showIconLabels } ) {
 							<PreferenceToggleMenuItem
 								scope="core/edit-site"
 								name="fixedToolbar"
-								disabled={ isDistractionFree }
+								onToggle={ turnOffDistractionFree }
 								label={ __( 'Top toolbar' ) }
 								info={ __(
 									'Access all block and document tools in a single place'
@@ -85,18 +81,6 @@ export default function MoreMenu( { showIconLabels } ) {
 									'Top toolbar deactivated'
 								) }
 							/>
-							<PreferenceToggleMenuItem
-								scope="core/edit-site"
-								name="focusMode"
-								label={ __( 'Spotlight mode' ) }
-								info={ __( 'Focus on one block at a time' ) }
-								messageActivated={ __(
-									'Spotlight mode activated'
-								) }
-								messageDeactivated={ __(
-									'Spotlight mode deactivated'
-								) }
-							/>
 							<PreferenceToggleMenuItem
 								scope="core/edit-site"
 								name="distractionFree"
@@ -113,6 +97,18 @@ export default function MoreMenu( { showIconLabels } ) {
 									'\\'
 								) }
 							/>
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="focusMode"
+								label={ __( 'Spotlight mode' ) }
+								info={ __( 'Focus on one block at a time' ) }
+								messageActivated={ __(
+									'Spotlight mode activated'
+								) }
+								messageDeactivated={ __(
+									'Spotlight mode deactivated'
+								) }
+							/>
 						</MenuGroup>
 						<ModeSwitcher />
 						<ActionItem.Slot

diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
@@ -41,6 +41,10 @@ export default function EditSitePreferencesModal() {
 		} );
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core/edit-site', 'distractionFree', false );
+	};
+
 	const sections = useMemo( () => [
 		{
 			name: 'general',
@@ -76,6 +80,7 @@ export default function EditSitePreferencesModal() {
 				>
 					<EnableFeature
 						featureName="fixedToolbar"
+						onToggle={ turnOffDistractionFree }
 						help={ __(
 							'Access all block and document tools in a single place.'
 						) }
@@ -96,13 +101,6 @@ export default function EditSitePreferencesModal() {
 						) }
 						label={ __( 'Spotlight mode' ) }
 					/>
-					<EnableFeature
-						featureName="showBlockBreadcrumbs"
-						help={ __(
-							'Shows block breadcrumbs at the bottom of the editor.'
-						) }
-						label={ __( 'Display block breadcrumbs' ) }
-					/>
 				</PreferencesModalSection>
 			),
 		},