Migrate post editor editorMode to use preferences store and remove localAutosaveInterval preference

lib/compat/wordpress-5.9/block-editor-settings.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Adds settings to the block editor.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Extends the block editor with settings that are only in the plugin.
+ *
+ * This is a temporary solution until the Gutenberg plugin sets
+ * the required WordPress version to 5.9.
+ *
+ * @see https://core.trac.wordpress.org/ticket/52920
+ *
+ * @param array $settings Existing editor settings.
+ *
+ * @return array Filtered settings.
+ */
+function gutenberg_get_block_editor_settings_5_9( $settings ) {
+	$settings['__unstableEnableFullSiteEditingBlocks'] = current_theme_supports( 'block-templates' );
+
+	if ( wp_is_block_theme() ) {
+		$settings['defaultTemplatePartAreas'] = get_allowed_block_template_part_areas();
+	}
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_5_9' );

lib/compat/wordpress-6.0/block-editor-settings.php

@@ -159,6 +159,8 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 		unset( $settings['__experimentalFeatures']['spacing']['padding'] );
 	}
 
+	$settings['localAutosaveInterval'] = 15;
+
 	return $settings;
 }
 

lib/editor-settings.php

@@ -5,29 +5,6 @@
  * @package gutenberg
  */
 
-/**
- * Extends the block editor with settings that are only in the plugin.
- *
- * This is a temporary solution until the Gutenberg plugin sets
- * the required WordPress version to 5.9.
- *
- * @see https://core.trac.wordpress.org/ticket/52920
- *
- * @param array $settings Existing editor settings.
- *
- * @return array Filtered settings.
- */
-function gutenberg_extend_post_editor_settings( $settings ) {
-	$settings['__unstableEnableFullSiteEditingBlocks'] = current_theme_supports( 'block-templates' );
-
-	if ( wp_is_block_theme() ) {
-		$settings['defaultTemplatePartAreas'] = get_allowed_block_template_part_areas();
-	}
-
-	return $settings;
-}
-add_filter( 'block_editor_settings_all', 'gutenberg_extend_post_editor_settings' );
-
 /**
  * Initialize a block-based editor.
  *

packages/data/src/plugins/persistence/index.js

@@ -411,6 +411,11 @@ persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
 		'core/edit-post',
 		'hiddenBlockTypes'
 	);
+	migrateIndividualPreferenceToPreferencesStore(
+		persistence,
+		'core/edit-post',
+		'editorMode'
+	);
 	migrateFeaturePreferencesToPreferencesStore(
 		persistence,
 		'core/edit-site'

packages/e2e-tests/specs/editor/various/autosave.test.js

@@ -56,9 +56,9 @@ async function getCurrentPostId() {
 
 async function setLocalAutosaveInterval( value ) {
 	return page.evaluate( ( _value ) => {
-		window.wp.data
-			.dispatch( 'core/edit-post' )
-			.__experimentalUpdateLocalAutosaveInterval( _value );
+		window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+			localAutosaveInterval: _value,
+		} );
 	}, value );
 }
 

packages/e2e-tests/specs/performance/post-editor.test.js

@@ -86,12 +86,10 @@ describe( 'Post Editor Performance', () => {
 	beforeEach( async () => {
 		// Disable auto-save to avoid impacting the metrics.
 		await page.evaluate( () => {
-			window.wp.data
-				.dispatch( 'core/edit-post' )
-				.__experimentalUpdateLocalAutosaveInterval( 100000000000 );
-			window.wp.data
-				.dispatch( 'core/editor' )
-				.updateEditorSettings( { autosaveInterval: 100000000000 } );
+			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+				autosaveInterval: 100000000000,
+				localAutosaveInterval: 100000000000,
+			} );
 		} );
 	} );
 

packages/edit-post/src/editor.js

@@ -43,7 +43,6 @@ function Editor( {
 		preferredStyleVariations,
 		hiddenBlockTypes,
 		blockTypes,
-		__experimentalLocalAutosaveInterval,
 		keepCaretInsideBlock,
 		isTemplateMode,
 		template,
@@ -92,9 +91,6 @@ function Editor( {
 				),
 				hiddenBlockTypes: getHiddenBlockTypes(),
 				blockTypes: getBlockTypes(),
-				__experimentalLocalAutosaveInterval: getPreference(
-					'localAutosaveInterval'
-				),
 				keepCaretInsideBlock: isFeatureActive( 'keepCaretInsideBlock' ),
 				isTemplateMode: isEditingTemplate(),
 				template:
@@ -121,7 +117,6 @@ function Editor( {
 			hasFixedToolbar,
 			focusMode,
 			hasReducedUI,
-			__experimentalLocalAutosaveInterval,
 
 			// This is marked as experimental to give time for the quick inserter to mature.
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
@@ -156,7 +151,6 @@ function Editor( {
 		hiddenBlockTypes,
 		blockTypes,
 		preferredStyleVariations,
-		__experimentalLocalAutosaveInterval,
 		setIsInserterOpened,
 		updatePreferredStyleVariations,
 		keepCaretInsideBlock,

packages/edit-post/src/index.js

@@ -107,6 +107,7 @@ export function initializeEditor(
 	);
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
+		editorMode: 'visual',
 		fixedToolbar: false,
 		fullscreenMode: true,
 		hiddenBlockTypes: [],

packages/edit-post/src/index.native.js

@@ -3,6 +3,8 @@
  */
 import '@wordpress/core-data';
 import '@wordpress/format-library';
+import { dispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -19,5 +21,13 @@ import Editor from './editor';
  * @param {Object} postId   ID of the post to edit (unused right now)
  */
 export function initializeEditor( id, postType, postId ) {
+	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
+		editorMode: 'visual',
+		fixedToolbar: false,
+		fullscreenMode: true,
+		hiddenBlockTypes: [],
+		welcomeGuide: true,
+	} );
+
 	return <Editor postId={ postId } postType={ postType } />;
 }

packages/edit-post/src/store/actions.js

@@ -155,11 +155,10 @@ export const toggleFeature = ( feature ) => ( { registry } ) =>
  *
  * @param {string} mode The editor mode.
  */
-export const switchEditorMode = ( mode ) => ( { dispatch, registry } ) => {
-	dispatch( {
-		type: 'SWITCH_MODE',
-		mode,
-	} );
+export const switchEditorMode = ( mode ) => ( { registry } ) => {
+	registry
+		.dispatch( preferencesStore )
+		.set( 'core/edit-post', 'editorMode', mode );
 
 	// Unselect blocks when we switch to the code editor.
 	if ( mode !== 'visual' ) {
@@ -204,20 +203,6 @@ export function updatePreferredStyleVariations( blockName, blockStyle ) {
 	};
 }
 
-/**
- * Returns an action object used in signalling that the editor should attempt
- * to locally autosave the current post every `interval` seconds.
- *
- * @param {number} interval The new interval, in seconds.
- * @return {Object} Action object.
- */
-export function __experimentalUpdateLocalAutosaveInterval( interval ) {
-	return {
-		type: 'UPDATE_LOCAL_AUTOSAVE_INTERVAL',
-		interval,
-	};
-}
-
 /**
  * Update the provided block types to be visible.
  *

packages/edit-post/src/store/defaults.js

@@ -1,11 +1,9 @@
 export const PREFERENCES_DEFAULTS = {
-	editorMode: 'visual',
 	panels: {
 		'post-status': {
 			opened: true,
 		},
 	},
 	hiddenBlockTypes: [],
 	preferredStyleVariations: {},
-	localAutosaveInterval: 15,
 };

packages/edit-post/src/store/reducer.js

@@ -78,13 +78,6 @@ export const preferences = flow( [
 
 		return state;
 	},
-	editorMode( state, action ) {
-		if ( action.type === 'SWITCH_MODE' ) {
-			return action.mode;
-		}
-
-		return state;
-	},
 	preferredStyleVariations( state, action ) {
 		switch ( action.type ) {
 			case 'UPDATE_PREFERRED_STYLE_VARIATIONS': {
@@ -102,14 +95,6 @@ export const preferences = flow( [
 		}
 		return state;
 	},
-	localAutosaveInterval( state, action ) {
-		switch ( action.type ) {
-			case 'UPDATE_LOCAL_AUTOSAVE_INTERVAL':
-				return action.interval;
-		}
-
-		return state;
-	},
 } );
 
 /**

packages/edit-post/src/store/selectors.js

@@ -22,9 +22,9 @@ const EMPTY_ARRAY = [];
  *
  * @return {string} Editing mode.
  */
-export function getEditorMode( state ) {
-	return getPreference( state, 'editorMode', 'visual' );
-}
+export const getEditorMode = createRegistrySelector( ( select ) => () =>
+	select( preferencesStore ).get( 'core/edit-post', 'editorMode' ) ?? 'visual'
+);
 
 /**
  * Returns true if the editor sidebar is opened.
@@ -91,7 +91,7 @@ export const getActiveGeneralSidebarName = createRegistrySelector(
 
 // The current list of preference keys that have been migrated to the
 // preferences package.
-const MIGRATED_KEYS = [ 'hiddenBlockTypes' ];
+const MIGRATED_KEYS = [ 'hiddenBlockTypes', 'editorMode' ];
 
 /**
  * Returns the preferences (these preferences are persisted locally).

packages/edit-post/src/store/test/actions.js

@@ -71,13 +71,22 @@ describe( 'actions', () => {
 
 	describe( 'switchEditorMode', () => {
 		it( 'to visual', () => {
+			// Switch to text first, since the default is visual.
+			registry.dispatch( editPostStore ).switchEditorMode( 'text' );
+			expect( registry.select( editPostStore ).getEditorMode() ).toEqual(
+				'text'
+			);
 			registry.dispatch( editPostStore ).switchEditorMode( 'visual' );
 			expect( registry.select( editPostStore ).getEditorMode() ).toEqual(
 				'visual'
 			);
 		} );
 
 		it( 'to text', () => {
+			// It defaults to visual.
+			expect( registry.select( editPostStore ).getEditorMode() ).toEqual(
+				'visual'
+			);
 			// Add a selected client id and make sure it's there.
 			const clientId = 'clientId_1';
 			registry.dispatch( blockEditorStore ).selectionChange( clientId );
@@ -89,6 +98,9 @@ describe( 'actions', () => {
 			expect(
 				registry.select( blockEditorStore ).getSelectedBlockClientId()
 			).toBeNull();
+			expect( registry.select( editPostStore ).getEditorMode() ).toEqual(
+				'text'
+			);
 		} );
 	} );
 
@@ -196,21 +208,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( '__experimentalUpdateLocalAutosaveInterval', () => {
-		it( 'sets the local autosave interval', () => {
-			registry
-				.dispatch( editPostStore )
-				.__experimentalUpdateLocalAutosaveInterval( 42 );
-
-			// TODO - remove once `getPreference` is deprecated.
-			expect(
-				registry
-					.select( editPostStore )
-					.getPreference( 'localAutosaveInterval' )
-			).toBe( 42 );
-		} );
-	} );
-
 	describe( 'toggleEditorPanelEnabled', () => {
 		it( 'toggles panels to be enabled and not enabled', () => {
 			const defaultState = {

packages/edit-post/src/store/test/reducer.js

@@ -142,15 +142,6 @@ describe( 'state', () => {
 				'post-status': { opened: false },
 			} );
 		} );
-
-		it( 'should return switched mode', () => {
-			const state = preferences( deepFreeze( { editorMode: 'visual' } ), {
-				type: 'SWITCH_MODE',
-				mode: 'text',
-			} );
-
-			expect( state.editorMode ).toBe( 'text' );
-		} );
 	} );
 
 	describe( 'activeModal', () => {

packages/edit-post/src/store/test/selectors.js

@@ -7,7 +7,6 @@ import deepFreeze from 'deep-freeze';
  * Internal dependencies
  */
 import {
-	getEditorMode,
 	getPreference,
 	isEditorPanelOpened,
 	isModalActive,
@@ -22,24 +21,6 @@ import {
 } from '../selectors';
 
 describe( 'selectors', () => {
-	describe( 'getEditorMode', () => {
-		it( 'should return the selected editor mode', () => {
-			const state = {
-				preferences: { editorMode: 'text' },
-			};
-
-			expect( getEditorMode( state ) ).toEqual( 'text' );
-		} );
-
-		it( 'should fallback to visual if not set', () => {
-			const state = {
-				preferences: {},
-			};
-
-			expect( getEditorMode( state ) ).toEqual( 'visual' );
-		} );
-	} );
-
 	describe( 'getPreference', () => {
 		it( 'should return the preference value if set', () => {
 			const state = {

packages/editor/src/components/local-autosave-monitor/README.md

@@ -6,7 +6,14 @@
 -   warn the user upon loading a post that there is a local copy that can be loaded;
 -   defer to remote autosaves, if any is available.
 
-`LocalAutosaveMonitor` observes a saving interval defined specifically for local autosaves, in contrast with remote (server-side) autosaving. See editor setting `__experimentalLocalAutosaveInterval` and setter `__experimentalUpdateLocalAutosaveInterval`.
+`LocalAutosaveMonitor` observes a saving interval defined specifically for local autosaves, in contrast with remote (server-side) autosaving.
+
+The interval used for the local autosave can be modified by updating the editor settings
+```js
+wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+	localAutosaveInterval: 100000000000,
+} );
+```
 
 ## Example