Write/Design tool: Persist as a user preference (#65945)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: oandregal <[email protected]> Co-authored-by: mtias <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: richtabor <[email protected]>
WordPress · Oct 12, 2024 · fa8b36f · fa8b36f · github-actions · Oct 13, 2024
1 parent ad6e130
commit fa8b36f
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 29 deletions.
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
@@ -21,6 +21,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -1668,7 +1669,7 @@ export const setNavigationMode =
  */
 export const __unstableSetEditorMode =
 	( mode ) =>
-	( { dispatch, select } ) => {
+	( { dispatch, select, registry } ) => {
 		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
@@ -1708,7 +1709,7 @@ export const __unstableSetEditorMode =
 			}
 		}
 
-		dispatch( { type: 'SET_EDITOR_MODE', mode } );
+		registry.dispatch( preferencesStore ).set( 'core', 'editorTool', mode );
 
 		if ( mode === 'navigation' ) {
 			speak(

diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
@@ -1786,22 +1786,6 @@ export const blockListSettings = ( state = {}, action ) => {
 	return state;
 };
 
-/**
- * Reducer returning which mode is enabled.
- *
- * @param {string} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {string} Updated state.
- */
-export function editorMode( state = 'edit', action ) {
-	if ( action.type === 'SET_EDITOR_MODE' ) {
-		return action.mode;
-	}
-
-	return state;
-}
-
 /**
  * Reducer return an updated state representing the most recent block attribute
  * update. The state is structured as an object where the keys represent the
@@ -2117,7 +2101,6 @@ const combinedReducers = combineReducers( {
 	preferences,
 	lastBlockAttributesChange,
 	lastFocus,
-	editorMode,
 	expandedBlock,
 	highlightedBlock,
 	lastBlockInserted,

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -16,6 +16,7 @@ import { symbol } from '@wordpress/icons';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 import { createSelector, createRegistrySelector } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -2691,7 +2692,7 @@ export function __experimentalGetLastBlockAttributeChanges( state ) {
  * @return {boolean} Is navigation mode enabled.
  */
 export function isNavigationMode( state ) {
-	return state.editorMode === 'navigation';
+	return __unstableGetEditorMode( state ) === 'navigation';
 }
 
 /**
@@ -2701,9 +2702,11 @@ export function isNavigationMode( state ) {
  *
  * @return {string} the editor mode.
  */
-export function __unstableGetEditorMode( state ) {
-	return state.editorMode;
-}
+export const __unstableGetEditorMode = createRegistrySelector(
+	( select ) => () => {
+		return select( preferencesStore ).get( 'core', 'editorTool' );
+	}
+);
 
 /**
  * Returns whether block moving mode is enabled.

diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js
@@ -11,7 +11,7 @@ import {
 	isDragging,
 	getBlockStyles,
 } from '../private-selectors';
-import { getBlockEditingMode } from '../selectors';
+import { getBlockEditingMode, __unstableGetEditorMode } from '../selectors';
 
 describe( 'private selectors', () => {
 	describe( 'isBlockInterfaceHidden', () => {
@@ -125,11 +125,17 @@ describe( 'private selectors', () => {
 		};
 
 		const hasContentRoleAttribute = jest.fn( () => false );
+		const get = jest.fn( () => 'edit' );
 		getBlockEditingMode.registry = {
 			select: jest.fn( () => ( {
 				hasContentRoleAttribute,
 			} ) ),
 		};
+		__unstableGetEditorMode.registry = {
+			select: jest.fn( () => ( {
+				get,
+			} ) ),
+		};
 
 		it( 'should return false when top level block is not disabled', () => {
 			const state = {

diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
@@ -9,6 +9,7 @@ import {
 import { RawHTML } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
 import { select, dispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -4470,7 +4471,6 @@ describe( 'getBlockEditingMode', () => {
 
 	const navigationModeStateWithRootSection = {
 		...baseState,
-		editorMode: 'navigation',
 		settings: {
 			[ sectionRootClientIdKey ]: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', // The group is the "main" container
 		},
@@ -4480,12 +4480,18 @@ describe( 'getBlockEditingMode', () => {
 
 	const fauxPrivateAPIs = {};
 
-	lock( fauxPrivateAPIs, { hasContentRoleAttribute } );
+	lock( fauxPrivateAPIs, {
+		hasContentRoleAttribute,
+	} );
 
 	getBlockEditingMode.registry = {
 		select: jest.fn( () => fauxPrivateAPIs ),
 	};
 
+	afterEach( () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', undefined );
+	} );
+
 	it( 'should return default by default', () => {
 		expect(
 			getBlockEditingMode(
@@ -4610,6 +4616,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, the root section container is default', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,
@@ -4619,6 +4626,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, anything outside the section container is disabled', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,
@@ -4628,6 +4636,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, sections are contentOnly', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,
@@ -4643,6 +4652,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode(
@@ -4661,6 +4671,7 @@ describe( 'getBlockEditingMode', () => {
 	} );
 
 	it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
+		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
 		expect(
 			getBlockEditingMode(
 				navigationModeStateWithRootSection,

diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
@@ -19,9 +19,6 @@ export const setCanvasMode =
 			registry.batch( () => {
 				registry.dispatch( blockEditorStore ).clearSelectedBlock();
 				registry.dispatch( editorStore ).setDeviceType( 'Desktop' );
-				registry
-					.dispatch( blockEditorStore )
-					.__unstableSetEditorMode( 'edit' );
 				const isPublishSidebarOpened = registry
 					.select( editorStore )
 					.isPublishSidebarOpened();

diff --git a/packages/reusable-blocks/src/store/test/actions.js b/packages/reusable-blocks/src/store/test/actions.js
@@ -12,6 +12,7 @@ import {
 
 import { store as coreStore } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -31,6 +32,7 @@ function createRegistryWithStores() {
 	registry.register( blockEditorStore );
 	registry.register( reusableBlocksStore );
 	registry.register( blocksStore );
+	registry.register( preferencesStore );
 
 	// Register entity here instead of mocking API handlers for loadPostTypeEntities()
 	registry.dispatch( coreStore ).addEntities( [