Refactor editor 'feature' preferences to interface package

packages/data/CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### New Features
 
- - Added a `batch` registry method to batch dispatch calls for performance reasons.
+-   Added a `batch` registry method to batch dispatch calls for performance reasons.
+-   Add a new migration for the persistence plugin to migrate edit-widgets preferences to the interface package. As part of this change deprecated migrations for the persistence plugin have been removed ([#33774](https://github.com/WordPress/gutenberg/pull/33774)).
 
 ## 6.0.0 (2021-07-29)
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { merge, isPlainObject, get, has } from 'lodash';
+import { merge, isPlainObject } from 'lodash';
 
 /**
  * Internal dependencies
@@ -223,75 +223,64 @@ function persistencePlugin( registry, pluginOptions ) {
 }
 
 /**
- * Deprecated: Remove this function and the code in WordPress Core that calls
- * it once WordPress 5.4 is released.
+ * Move the 'features' object in local storage from the sourceStoreName to the
+ * interface store.
+ *
+ * @param {Object} persistence     The persistence interface.
+ * @param {string} sourceStoreName The name of the store that has persisted
+ *                                 preferences to migrate to the interface
+ *                                 package.
  */
-
-persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
-	const persistence = createPersistenceInterface( pluginOptions );
-
+export function migrateFeaturePreferencesToInterfaceStore(
+	persistence,
+	sourceStoreName
+) {
+	const interfaceStoreName = 'core/interface';
 	const state = persistence.get();
+	const sourcePreferences = state[ sourceStoreName ]?.preferences;
+	const sourceFeatures = sourcePreferences?.features;
+
+	if ( sourceFeatures ) {
+		const targetFeatures =
+			state[ interfaceStoreName ]?.preferences?.features;
+
+		// Avoid migrating features again if they've previously been migrated.
+		if ( ! targetFeatures?.[ sourceStoreName ] ) {
+			// Set the feature values in the interface store, the features
+			// object is keyed by 'scope', which matches the store name for
+			// the source.
+			persistence.set( interfaceStoreName, {
+				preferences: {
+					features: {
+						...targetFeatures,
+						[ sourceStoreName ]: sourceFeatures,
+					},
+				},
+			} );
 
-	// Migrate 'insertUsage' from 'core/editor' to 'core/block-editor'
-	const editorInsertUsage = state[ 'core/editor' ]?.preferences?.insertUsage;
-	if ( editorInsertUsage ) {
-		const blockEditorInsertUsage =
-			state[ 'core/block-editor' ]?.preferences?.insertUsage;
-		persistence.set( 'core/block-editor', {
-			preferences: {
-				insertUsage: {
-					...editorInsertUsage,
-					...blockEditorInsertUsage,
+			// Remove feature preferences from the source.
+			persistence.set( sourceStoreName, {
+				preferences: {
+					...sourcePreferences,
+					features: undefined,
 				},
-			},
-		} );
+			} );
+		}
 	}
+}
 
-	let editPostState = state[ 'core/edit-post' ];
-
-	// Default `fullscreenMode` to `false` if any persisted state had existed
-	// and the user hadn't made an explicit choice about fullscreen mode. This
-	// is needed since `fullscreenMode` previously did not have a default value
-	// and was implicitly false by its absence. It is now `true` by default, but
-	// this change is not intended to affect upgrades from earlier versions.
-	const hadPersistedState = Object.keys( state ).length > 0;
-	const hadFullscreenModePreference = has( state, [
-		'core/edit-post',
-		'preferences',
-		'features',
-		'fullscreenMode',
-	] );
-	if ( hadPersistedState && ! hadFullscreenModePreference ) {
-		editPostState = merge( {}, editPostState, {
-			preferences: { features: { fullscreenMode: false } },
-		} );
-	}
+/**
+ * Deprecated: Remove this function and the code in WordPress Core that calls
+ * it once WordPress 6.0 is released.
+ */
 
-	// Migrate 'areTipsEnabled' from 'core/nux' to 'showWelcomeGuide' in 'core/edit-post'
-	const areTipsEnabled = get( state, [
-		'core/nux',
-		'preferences',
-		'areTipsEnabled',
-	] );
-	const hasWelcomeGuide = has( state, [
-		'core/edit-post',
-		'preferences',
-		'features',
-		'welcomeGuide',
-	] );
-	if ( areTipsEnabled !== undefined && ! hasWelcomeGuide ) {
-		editPostState = merge( {}, editPostState, {
-			preferences: {
-				features: {
-					welcomeGuide: areTipsEnabled,
-				},
-			},
-		} );
-	}
+persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
+	const persistence = createPersistenceInterface( pluginOptions );
 
-	if ( editPostState !== state[ 'core/edit-post' ] ) {
-		persistence.set( 'core/edit-post', editPostState );
-	}
+	migrateFeaturePreferencesToInterfaceStore(
+		persistence,
+		'core/edit-widgets'
+	);
 };
 
 export default persistencePlugin;

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

@@ -6,7 +6,11 @@ import deepFreeze from 'deep-freeze';
 /**
  * Internal dependencies
  */
-import plugin, { createPersistenceInterface, withLazySameState } from '../';
+import plugin, {
+	createPersistenceInterface,
+	withLazySameState,
+	migrateFeaturePreferencesToInterfaceStore,
+} from '../';
 import objectStorage from '../storage/object';
 import { createRegistry } from '../../../';
 
@@ -377,3 +381,115 @@ describe( 'persistence', () => {
 		} );
 	} );
 } );
+
+describe( 'migrateFeaturePreferencesToInterfaceStore', () => {
+	it( 'migrates preferences from the source to the interface store', () => {
+		const persistenceInterface = createPersistenceInterface( {
+			storageKey: 'test-username',
+		} );
+
+		const initialState = {
+			preferences: {
+				features: {
+					featureA: true,
+					featureB: false,
+					featureC: true,
+				},
+			},
+		};
+
+		persistenceInterface.set( 'core/test', initialState );
+
+		migrateFeaturePreferencesToInterfaceStore(
+			persistenceInterface,
+			'core/test'
+		);
+
+		expect( persistenceInterface.get() ).toEqual( {
+			'core/interface': {
+				preferences: {
+					features: {
+						'core/test': {
+							featureA: true,
+							featureB: false,
+							featureC: true,
+						},
+					},
+				},
+			},
+			'core/test': {
+				preferences: {
+					features: undefined,
+				},
+			},
+		} );
+	} );
+
+	it( 'handles multiple preferences from different stores to be migrated', () => {
+		const persistenceInterface = createPersistenceInterface( {
+			storageKey: 'test-username',
+		} );
+
+		const initialStateA = {
+			preferences: {
+				features: {
+					featureA: true,
+					featureB: false,
+					featureC: true,
+				},
+			},
+		};
+
+		const initialStateB = {
+			preferences: {
+				features: {
+					featureD: true,
+					featureE: false,
+					featureF: true,
+				},
+			},
+		};
+
+		persistenceInterface.set( 'core/test-a', initialStateA );
+		persistenceInterface.set( 'core/test-b', initialStateB );
+
+		migrateFeaturePreferencesToInterfaceStore(
+			persistenceInterface,
+			'core/test-a'
+		);
+
+		migrateFeaturePreferencesToInterfaceStore(
+			persistenceInterface,
+			'core/test-b'
+		);
+
+		expect( persistenceInterface.get() ).toEqual( {
+			'core/interface': {
+				preferences: {
+					features: {
+						'core/test-a': {
+							featureA: true,
+							featureB: false,
+							featureC: true,
+						},
+						'core/test-b': {
+							featureD: true,
+							featureE: false,
+							featureF: true,
+						},
+					},
+				},
+			},
+			'core/test-a': {
+				preferences: {
+					features: undefined,
+				},
+			},
+			'core/test-b': {
+				preferences: {
+					features: undefined,
+				},
+			},
+		} );
+	} );
+} );

packages/e2e-tests/specs/widgets/editing-widgets.test.js

@@ -27,14 +27,14 @@ describe( 'Widgets screen', () => {
 		// Disable welcome guide if it is enabled.
 		const isWelcomeGuideActive = await page.evaluate( () =>
 			wp.data
-				.select( 'core/edit-widgets' )
-				.__unstableIsFeatureActive( 'welcomeGuide' )
+				.select( 'core/interface' )
+				.isFeatureActive( 'core/edit-widgets', 'welcomeGuide' )
 		);
 		if ( isWelcomeGuideActive ) {
 			await page.evaluate( () =>
 				wp.data
-					.dispatch( 'core/edit-widgets' )
-					.__unstableToggleFeature( 'welcomeGuide' )
+					.dispatch( 'core/interface' )
+					.toggleFeature( 'core/edit-widgets', 'welcomeGuide' )
 			);
 		}
 

packages/edit-widgets/src/components/layout/interface.js

@@ -61,8 +61,8 @@ function Interface( { blockEditorSettings } ) {
 			).getActiveComplementaryArea( editWidgetsStore.name ),
 			isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
 			hasBlockBreadCrumbsEnabled: select(
-				editWidgetsStore
-			).__unstableIsFeatureActive( 'showBlockBreadcrumbs' ),
+				interfaceStore
+			).isFeatureActive( 'core/edit-widgets', 'showBlockBreadcrumbs' ),
 			previousShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutRawKeyCombinations(