Editor: Unify spotlight mode preference (#57533)

WordPress · Jan 4, 2024 · 81b8e05 · 81b8e05
1 parent 598b4a8
commit 81b8e05
Show file tree

Hide file tree

Showing 12 changed files with 16 additions and 19 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
@@ -67,7 +67,7 @@ function WritingMenu() {
 				shortcut={ displayShortcut.primaryShift( '\\' ) }
 			/>
 			<PreferenceToggleMenuItem
-				scope="core/edit-post"
+				scope="core"
 				name="focusMode"
 				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
@@ -202,6 +202,7 @@ export default function EditPostPreferencesModal() {
 							label={ __( 'Distraction free' ) }
 						/>
 						<EnableFeature
+							scope="core"
 							featureName="focusMode"
 							help={ __(
 								'Highlights the current block and fades other content.'

diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
@@ -42,7 +42,6 @@ function Editor( {
 
 	const {
 		hasFixedToolbar,
-		focusMode,
 		isDistractionFree,
 		hasInlineToolbar,
 		post,
@@ -91,7 +90,6 @@ function Editor( {
 			return {
 				hasFixedToolbar:
 					isFeatureActive( 'fixedToolbar' ) || ! isLargeViewport,
-				focusMode: isFeatureActive( 'focusMode' ),
 				isDistractionFree: isFeatureActive( 'distractionFree' ),
 				hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
 				preferredStyleVariations: select( preferencesStore ).get(
@@ -122,7 +120,6 @@ function Editor( {
 				onChange: updatePreferredStyleVariations,
 			},
 			hasFixedToolbar,
-			focusMode,
 			isDistractionFree,
 			hasInlineToolbar,
 
@@ -151,7 +148,6 @@ function Editor( {
 		settings,
 		hasFixedToolbar,
 		hasInlineToolbar,
-		focusMode,
 		isDistractionFree,
 		hiddenBlockTypes,
 		blockTypes,

diff --git a/packages/edit-post/src/editor.native.js b/packages/edit-post/src/editor.native.js
@@ -50,15 +50,13 @@ class Editor extends Component {
 	getEditorSettings(
 		settings,
 		hasFixedToolbar,
-		focusMode,
 		hiddenBlockTypes,
 		blockTypes
 	) {
 		settings = {
 			...settings,
 			isRTL: I18nManager.isRTL,
 			hasFixedToolbar,
-			focusMode,
 		};
 
 		// Omit hidden block types if exists and non-empty.
@@ -135,7 +133,6 @@ class Editor extends Component {
 		const {
 			settings,
 			hasFixedToolbar,
-			focusMode,
 			initialEdits,
 			hiddenBlockTypes,
 			blockTypes,
@@ -150,7 +147,6 @@ class Editor extends Component {
 		const editorSettings = this.getEditorSettings(
 			settings,
 			hasFixedToolbar,
-			focusMode,
 			hiddenBlockTypes,
 			blockTypes
 		);
@@ -198,7 +194,6 @@ export default compose( [
 
 		return {
 			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
-			focusMode: isFeatureActive( 'focusMode' ),
 			mode: getEditorMode(),
 			hiddenBlockTypes: getHiddenBlockTypes(),
 			blockTypes: getBlockTypes(),

diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js
@@ -105,7 +105,7 @@ export default function useCommonCommands() {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight mode' ),
 		callback: ( { close } ) => {
-			toggle( 'core/edit-post', 'focusMode' );
+			toggle( 'core', 'focusMode' );
 			close();
 		},
 	} );

diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
@@ -94,7 +94,6 @@ export function useSpecificEditorSettings() {
 	const getPostLinkProps = usePostLinkProps();
 	const {
 		templateSlug,
-		focusMode,
 		isDistractionFree,
 		hasFixedToolbar,
 		canvasMode,
@@ -121,7 +120,6 @@ export function useSpecificEditorSettings() {
 			const _context = getEditedPostContext();
 			return {
 				templateSlug: _record.slug,
-				focusMode: !! getPreference( 'core/edit-site', 'focusMode' ),
 				isDistractionFree: !! getPreference(
 					'core/edit-site',
 					'distractionFree'
@@ -144,7 +142,7 @@ export function useSpecificEditorSettings() {
 
 			richEditingEnabled: true,
 			supportsTemplateMode: true,
-			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
+			focusMode: canvasMode !== 'view',
 			isDistractionFree,
 			hasFixedToolbar,
 			defaultRenderingMode,
@@ -156,7 +154,6 @@ export function useSpecificEditorSettings() {
 	}, [
 		settings,
 		canvasMode,
-		focusMode,
 		isDistractionFree,
 		hasFixedToolbar,
 		defaultRenderingMode,

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
@@ -100,7 +100,7 @@ export default function MoreMenu( { showIconLabels } ) {
 								) }
 							/>
 							<PreferenceToggleMenuItem
-								scope="core/edit-site"
+								scope="core"
 								name="focusMode"
 								label={ __( 'Spotlight mode' ) }
 								info={ __( 'Focus on one block at a time' ) }

diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
@@ -107,6 +107,7 @@ export default function EditSitePreferencesModal() {
 						label={ __( 'Distraction free' ) }
 					/>
 					<EnableFeature
+						scope="core"
 						featureName="focusMode"
 						help={ __(
 							'Highlights the current block and fades other content.'

diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -273,7 +273,7 @@ function useEditUICommands() {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight mode' ),
 		callback: ( { close } ) => {
-			toggle( 'core/edit-site', 'focusMode' );
+			toggle( 'core', 'focusMode' );
 			close();
 		},
 	} );

diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
@@ -54,7 +54,6 @@ export function initializeEditor( id, settings ) {
 	dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
 		editorMode: 'visual',
 		fixedToolbar: false,
-		focusMode: false,
 		distractionFree: false,
 		welcomeGuide: true,
 		welcomeGuideStyles: true,
@@ -64,6 +63,7 @@ export function initializeEditor( id, settings ) {
 
 	dispatch( preferencesStore ).setDefaults( 'core', {
 		allowRightClickOverrides: true,
+		focusMode: false,
 		keepCaretInsideBlock: false,
 		showBlockBreadcrumbs: true,
 		showListViewByDefault: false,

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -46,7 +46,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'enableCustomSpacing',
 	'enableCustomUnits',
 	'enableOpenverseMediaCategory',
-	'focusMode',
 	'distractionFree',
 	'fontSizes',
 	'gradients',
@@ -90,6 +89,7 @@ const BLOCK_EDITOR_SETTINGS = [
 function useBlockEditorSettings( settings, postType, postId ) {
 	const {
 		allowRightClickOverrides,
+		focusMode,
 		keepCaretInsideBlock,
 		reusableBlocks,
 		hasUploadPermissions,
@@ -131,6 +131,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					postType,
 					postId
 				)?._links?.hasOwnProperty( 'wp:action-unfiltered-html' ),
+				focusMode: get( 'core', 'focusMode' ),
 				keepCaretInsideBlock: get( 'core', 'keepCaretInsideBlock' ),
 				reusableBlocks: isWeb
 					? getEntityRecords( 'postType', 'wp_block', {
@@ -214,6 +215,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		[ saveEntityRecord, userCanCreatePages ]
 	);
 
+	const forceDisableFocusMode = settings.focusMode === false;
+
 	return useMemo(
 		() => ( {
 			...Object.fromEntries(
@@ -222,6 +225,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				)
 			),
 			allowRightClickOverrides,
+			focusMode: focusMode && ! forceDisableFocusMode,
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalReusableBlocks: reusableBlocks,
@@ -257,6 +261,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		} ),
 		[
 			allowRightClickOverrides,
+			focusMode,
+			forceDisableFocusMode,
 			keepCaretInsideBlock,
 			settings,
 			hasUploadPermissions,

diff --git a/...references-persistence/src/migrations/preferences-package-data/convert-editor-settings.js b/...references-persistence/src/migrations/preferences-package-data/convert-editor-settings.js
@@ -6,6 +6,7 @@ export default function convertEditorSettings( data ) {
 	let newData = data;
 	const settingsToMoveToCore = [
 		'allowRightClickOverrides',
+		'focusMode',
 		'keepCaretInsideBlock',
 		'showBlockBreadcrumbs',
 		'showIconLabels',