Migrate post editor preferred style variations to preferences store

docs/reference-guides/data/data-core-edit-post.md

@@ -551,8 +551,4 @@ _Parameters_
 -   _blockName_ `string`: Name of the block.
 -   _blockStyle_ `?string`: Name of the style that should be auto applied. If undefined, the "auto apply" setting of the block is removed.
 
-_Returns_
-
--   `Object`: Action object.
-
 <!-- END TOKEN(Autogenerated actions|../../../packages/edit-post/src/store/actions.js) -->

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

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

packages/edit-post/src/index.js

@@ -111,6 +111,7 @@ export function initializeEditor(
 		fixedToolbar: false,
 		fullscreenMode: true,
 		hiddenBlockTypes: [],
+		preferredStyleVariations: {},
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
 		themeStyles: true,

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

@@ -26,6 +26,7 @@ export function initializeEditor( id, postType, postId ) {
 		fixedToolbar: false,
 		fullscreenMode: true,
 		hiddenBlockTypes: [],
+		preferredStyleVariations: {},
 		welcomeGuide: true,
 	} );
 

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

@@ -192,16 +192,44 @@ export const togglePinnedPluginItem = ( pluginName ) => ( { registry } ) => {
  *
  * @param {string}  blockName  Name of the block.
  * @param {?string} blockStyle Name of the style that should be auto applied. If undefined, the "auto apply" setting of the block is removed.
- *
- * @return {Object} Action object.
  */
-export function updatePreferredStyleVariations( blockName, blockStyle ) {
-	return {
-		type: 'UPDATE_PREFERRED_STYLE_VARIATIONS',
-		blockName,
-		blockStyle,
-	};
-}
+export const updatePreferredStyleVariations = ( blockName, blockStyle ) => ( {
+	registry,
+} ) => {
+	if ( ! blockName ) {
+		return;
+	}
+
+	const existingVariations =
+		registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'preferredStyleVariations' ) ?? {};
+
+	// When the blockStyle is omitted, remove the block's preferred variation.
+	if ( ! blockStyle ) {
+		const updatedVariations = {
+			...existingVariations,
+		};
+
+		delete updatedVariations[ blockName ];
+
+		registry
+			.dispatch( preferencesStore )
+			.set(
+				'core/edit-post',
+				'preferredStyleVariations',
+				updatedVariations
+			);
+	} else {
+		// Else add the variation.
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core/edit-post', 'preferredStyleVariations', {
+				...existingVariations,
+				[ blockName ]: blockStyle,
+			} );
+	}
+};
 
 /**
  * Update the provided block types to be visible.

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

@@ -4,6 +4,4 @@ export const PREFERENCES_DEFAULTS = {
 			opened: true,
 		},
 	},
-	hiddenBlockTypes: [],
-	preferredStyleVariations: {},
 };

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { flow, get, includes, omit } from 'lodash';
+import { flow, get, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -78,23 +78,6 @@ export const preferences = flow( [
 
 		return state;
 	},
-	preferredStyleVariations( state, action ) {
-		switch ( action.type ) {
-			case 'UPDATE_PREFERRED_STYLE_VARIATIONS': {
-				if ( ! action.blockName ) {
-					return state;
-				}
-				if ( ! action.blockStyle ) {
-					return omit( state, [ action.blockName ] );
-				}
-				return {
-					...state,
-					[ action.blockName ]: action.blockStyle,
-				};
-			}
-		}
-		return state;
-	},
 } );
 
 /**

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

@@ -91,7 +91,11 @@ export const getActiveGeneralSidebarName = createRegistrySelector(
 
 // The current list of preference keys that have been migrated to the
 // preferences package.
-const MIGRATED_KEYS = [ 'hiddenBlockTypes', 'editorMode' ];
+const MIGRATED_KEYS = [
+	'hiddenBlockTypes',
+	'editorMode',
+	'preferredStyleVariations',
+];
 
 /**
  * Returns the preferences (these preferences are persisted locally).

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

@@ -287,4 +287,53 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'updatePreferredStyleVariations', () => {
+		it( 'sets a preferred style variation for a block when a style name is passed', () => {
+			registry
+				.dispatch( 'core/edit-post' )
+				.updatePreferredStyleVariations( 'core/paragraph', 'fancy' );
+			registry
+				.dispatch( 'core/edit-post' )
+				.updatePreferredStyleVariations( 'core/quote', 'posh' );
+
+			expect(
+				registry
+					.select( editPostStore )
+					.getPreference( 'preferredStyleVariations' )
+			).toEqual( {
+				'core/paragraph': 'fancy',
+				'core/quote': 'posh',
+			} );
+		} );
+
+		it( 'removes a preferred style variation for a block when a style name is omitted', () => {
+			registry
+				.dispatch( 'core/edit-post' )
+				.updatePreferredStyleVariations( 'core/paragraph', 'fancy' );
+			registry
+				.dispatch( 'core/edit-post' )
+				.updatePreferredStyleVariations( 'core/quote', 'posh' );
+			expect(
+				registry
+					.select( editPostStore )
+					.getPreference( 'preferredStyleVariations' )
+			).toEqual( {
+				'core/paragraph': 'fancy',
+				'core/quote': 'posh',
+			} );
+
+			registry
+				.dispatch( 'core/edit-post' )
+				.updatePreferredStyleVariations( 'core/paragraph' );
+
+			expect(
+				registry
+					.select( editPostStore )
+					.getPreference( 'preferredStyleVariations' )
+			).toEqual( {
+				'core/quote': 'posh',
+			} );
+		} );
+	} );
 } );