@wordpress/edit-post 6.1.0 → 6.3.0

package/src/store/reducer.js

@@ -1,117 +1,13 @@
 /**
  * External dependencies
  */
-import { flow, get, includes, omit } from 'lodash';
+import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { combineReducers } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { PREFERENCES_DEFAULTS } from './defaults';
-
-/**
- * Higher-order reducer creator which provides the given initial state for the
- * original reducer.
- *
- * @param {*} initialState Initial state to provide to reducer.
- *
- * @return {Function} Higher-order reducer.
- */
-const createWithInitialState = ( initialState ) => ( reducer ) => {
-	return ( state = initialState, action ) => reducer( state, action );
-};
-
-/**
- * Reducer returning the user preferences.
- *
- * @param {Object}  state                           Current state.
- * @param {string}  state.mode                      Current editor mode, either
- *                                                  "visual" or "text".
- * @param {boolean} state.isGeneralSidebarDismissed Whether general sidebar is
- *                                                  dismissed. False by default
- *                                                  or when closing general
- *                                                  sidebar, true when opening
- *                                                  sidebar.
- * @param {boolean} state.isSidebarOpened           Whether the sidebar is
- *                                                  opened or closed.
- * @param {Object}  state.panels                    The state of the different
- *                                                  sidebar panels.
- * @param {Object}  action                          Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export const preferences = flow( [
-	combineReducers,
-	createWithInitialState( PREFERENCES_DEFAULTS ),
-] )( {
-	panels( state, action ) {
-		switch ( action.type ) {
-			case 'TOGGLE_PANEL_ENABLED': {
-				const { panelName } = action;
-				return {
-					...state,
-					[ panelName ]: {
-						...state[ panelName ],
-						enabled: ! get( state, [ panelName, 'enabled' ], true ),
-					},
-				};
-			}
-
-			case 'TOGGLE_PANEL_OPENED': {
-				const { panelName } = action;
-				const isOpen =
-					state[ panelName ] === true ||
-					get( state, [ panelName, 'opened' ], false );
-				return {
-					...state,
-					[ panelName ]: {
-						...state[ panelName ],
-						opened: ! isOpen,
-					},
-				};
-			}
-		}
-
-		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': {
-				if ( ! action.blockName ) {
-					return state;
-				}
-				if ( ! action.blockStyle ) {
-					return omit( state, [ action.blockName ] );
-				}
-				return {
-					...state,
-					[ action.blockName ]: action.blockStyle,
-				};
-			}
-		}
-		return state;
-	},
-	localAutosaveInterval( state, action ) {
-		switch ( action.type ) {
-			case 'UPDATE_LOCAL_AUTOSAVE_INTERVAL':
-				return action.interval;
-		}
-
-		return state;
-	},
-} );
-
 /**
  * Reducer storing the list of all programmatically removed panels.
  *
@@ -295,7 +191,6 @@ const metaBoxes = combineReducers( {
 export default combineReducers( {
 	activeModal,
 	metaBoxes,
-	preferences,
 	publishSidebarActive,
 	removedPanels,
 	deviceType,

package/src/store/selectors.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { get, includes, some, flatten, values } from 'lodash';
+import { includes, some, flatten, values } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -12,8 +12,10 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import deprecated from '@wordpress/deprecated';
 
 const EMPTY_ARRAY = [];
+const EMPTY_OBJECT = {};
 
 /**
  * Returns the current editing mode.
@@ -22,9 +24,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.
@@ -89,9 +91,57 @@ export const getActiveGeneralSidebarName = createRegistrySelector(
 	}
 );
 
-// The current list of preference keys that have been migrated to the
-// preferences package.
-const MIGRATED_KEYS = [ 'hiddenBlockTypes' ];
+/**
+ * Converts panels from the new preferences store format to the old format
+ * that the post editor previously used.
+ *
+ * The resultant converted data should look like this:
+ * {
+ *     panelName: {
+ *         enabled: false,
+ *         opened: true,
+ *     },
+ *     anotherPanelName: {
+ *         opened: true
+ *     },
+ * }
+ *
+ * @param {string[] | undefined} inactivePanels An array of inactive panel names.
+ * @param {string[] | undefined} openPanels     An array of open panel names.
+ *
+ * @return {Object} The converted panel data.
+ */
+function convertPanelsToOldFormat( inactivePanels, openPanels ) {
+	// First reduce the inactive panels.
+	const panelsWithEnabledState = inactivePanels?.reduce(
+		( accumulatedPanels, panelName ) => ( {
+			...accumulatedPanels,
+			[ panelName ]: {
+				enabled: false,
+			},
+		} ),
+		{}
+	);
+
+	// Then reduce the open panels, passing in the result of the previous
+	// reduction as the initial value so that both open and inactive
+	// panel state is combined.
+	const panels = openPanels?.reduce( ( accumulatedPanels, panelName ) => {
+		const currentPanelState = accumulatedPanels?.[ panelName ];
+		return {
+			...accumulatedPanels,
+			[ panelName ]: {
+				...currentPanelState,
+				opened: true,
+			},
+		};
+	}, panelsWithEnabledState ?? {} );
+
+	// The panels variable will only be set if openPanels wasn't `undefined`.
+	// If it isn't set just return `panelsWithEnabledState`, and if that isn't
+	// set return an empty object.
+	return panels ?? panelsWithEnabledState ?? EMPTY_OBJECT;
+}
 
 /**
  * Returns the preferences (these preferences are persisted locally).
@@ -100,34 +150,50 @@ const MIGRATED_KEYS = [ 'hiddenBlockTypes' ];
  *
  * @return {Object} Preferences Object.
  */
-export const getPreferences = createRegistrySelector(
-	( select ) => ( state ) => {
-		const editPostPreferences = state.preferences;
-
-		// Some preferences now exist in the preferences store.
-		// Fetch them so that they can be merged into the post
-		// editor preferences.
-		const preferenceStorePreferences = MIGRATED_KEYS.reduce(
-			( accumulatedPrefs, preferenceKey ) => {
-				const value = select( preferencesStore ).get(
-					'core/edit-post',
-					preferenceKey
-				);
-
-				return {
-					...accumulatedPrefs,
-					[ preferenceKey ]: value,
-				};
-			},
-			{}
+export const getPreferences = createRegistrySelector( ( select ) => () => {
+	deprecated( `wp.data.select( 'core/edit-post' ).getPreferences`, {
+		since: '6.0',
+		alternative: `wp.data.select( 'core/preferences' ).get`,
+	} );
+
+	// These preferences now exist in the preferences store.
+	// Fetch them so that they can be merged into the post
+	// editor preferences.
+	const preferences = [
+		'hiddenBlockTypes',
+		'editorMode',
+		'preferredStyleVariations',
+	].reduce( ( accumulatedPrefs, preferenceKey ) => {
+		const value = select( preferencesStore ).get(
+			'core/edit-post',
+			preferenceKey
 		);
 
 		return {
-			...editPostPreferences,
-			...preferenceStorePreferences,
+			...accumulatedPrefs,
+			[ preferenceKey ]: value,
 		};
-	}
-);
+	}, {} );
+
+	// Panels were a preference, but the data structure changed when the state
+	// was migrated to the preferences store. They need to be converted from
+	// the new preferences store format to old format to ensure no breaking
+	// changes for plugins.
+	const inactivePanels = select( preferencesStore ).get(
+		'core/edit-post',
+		'inactivePanels'
+	);
+	const openPanels = select( preferencesStore ).get(
+		'core/edit-post',
+		'openPanels'
+	);
+	const panels = convertPanelsToOldFormat( inactivePanels, openPanels );
+
+	return {
+		...preferences,
+		panels,
+	};
+} );
 
 /**
  *
@@ -138,11 +204,13 @@ export const getPreferences = createRegistrySelector(
  * @return {*} Preference Value.
  */
 export function getPreference( state, preferenceKey, defaultValue ) {
+	deprecated( `wp.data.select( 'core/edit-post' ).getPreference`, {
+		since: '6.0',
+		alternative: `wp.data.select( 'core/preferences' ).get`,
+	} );
+
 	// Avoid using the `getPreferences` registry selector where possible.
-	const isMigratedKey = MIGRATED_KEYS.includes( preferenceKey );
-	const preferences = isMigratedKey
-		? getPreferences( state )
-		: state.preferences;
+	const preferences = getPreferences( state );
 	const value = preferences[ preferenceKey ];
 	return value === undefined ? defaultValue : value;
 }
@@ -194,14 +262,18 @@ export function isEditorPanelRemoved( state, panelName ) {
  *
  * @return {boolean} Whether or not the panel is enabled.
  */
-export function isEditorPanelEnabled( state, panelName ) {
-	const panels = getPreference( state, 'panels' );
-
-	return (
-		! isEditorPanelRemoved( state, panelName ) &&
-		get( panels, [ panelName, 'enabled' ], true )
-	);
-}
+export const isEditorPanelEnabled = createRegistrySelector(
+	( select ) => ( state, panelName ) => {
+		const inactivePanels = select( preferencesStore ).get(
+			'core/edit-post',
+			'inactivePanels'
+		);
+		return (
+			! isEditorPanelRemoved( state, panelName ) &&
+			! inactivePanels?.includes( panelName )
+		);
+	}
+);
 
 /**
  * Returns true if the given panel is open, or false otherwise. Panels are
@@ -212,13 +284,15 @@ export function isEditorPanelEnabled( state, panelName ) {
  *
  * @return {boolean} Whether or not the panel is open.
  */
-export function isEditorPanelOpened( state, panelName ) {
-	const panels = getPreference( state, 'panels' );
-	return (
-		get( panels, [ panelName ] ) === true ||
-		get( panels, [ panelName, 'opened' ] ) === true
-	);
-}
+export const isEditorPanelOpened = createRegistrySelector(
+	( select ) => ( state, panelName ) => {
+		const openPanels = select( preferencesStore ).get(
+			'core/edit-post',
+			'openPanels'
+		);
+		return !! openPanels?.includes( panelName );
+	}
+);
 
 /**
  * Returns true if a modal is active, or false otherwise.

package/src/store/test/actions.js

@@ -71,6 +71,11 @@ 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'
@@ -78,6 +83,10 @@ describe( 'actions', () => {
 		} );
 
 		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'
+			);
 		} );
 	} );
 
@@ -145,7 +157,6 @@ describe( 'actions', () => {
 
 			const expected = [ 'core/quote', 'core/table' ];
 
-			// TODO - remove once `getPreference` is deprecated.
 			expect(
 				registry
 					.select( editPostStore )
@@ -155,6 +166,9 @@ describe( 'actions', () => {
 			expect(
 				registry.select( editPostStore ).getHiddenBlockTypes()
 			).toEqual( expected );
+
+			// Expect a deprecation message for `getPreference`.
+			expect( console ).toHaveWarned();
 		} );
 	} );
 
@@ -166,7 +180,6 @@ describe( 'actions', () => {
 
 			const expectedA = [ 'core/quote', 'core/table' ];
 
-			// TODO - remove once `getPreference` is deprecated.
 			expect(
 				registry
 					.select( editPostStore )
@@ -183,7 +196,6 @@ describe( 'actions', () => {
 
 			const expectedB = [ 'core/quote' ];
 
-			// TODO - remove once `getPreference` is deprecated.
 			expect(
 				registry
 					.select( editPostStore )
@@ -196,39 +208,23 @@ 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 = {
-				'post-status': {
-					opened: true,
-				},
-			};
-
 			// This will switch it off, since the default is on.
 			registry
 				.dispatch( editPostStore )
 				.toggleEditorPanelEnabled( 'control-panel' );
 
-			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry
+					.select( editPostStore )
+					.isEditorPanelEnabled( 'control-panel' )
+			).toBe( false );
+
+			// Also check that the `getPreference` selector includes panels.
 			expect(
 				registry.select( editPostStore ).getPreference( 'panels' )
 			).toEqual( {
-				...defaultState,
 				'control-panel': {
 					enabled: false,
 				},
@@ -239,36 +235,34 @@ describe( 'actions', () => {
 				.dispatch( editPostStore )
 				.toggleEditorPanelEnabled( 'control-panel' );
 
-			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry
+					.select( editPostStore )
+					.isEditorPanelEnabled( 'control-panel' )
+			).toBe( true );
+
 			expect(
 				registry.select( editPostStore ).getPreference( 'panels' )
-			).toEqual( {
-				...defaultState,
-				'control-panel': {
-					enabled: true,
-				},
-			} );
+			).toEqual( {} );
 		} );
 	} );
 
 	describe( 'toggleEditorPanelOpened', () => {
 		it( 'toggles panels open and closed', () => {
-			const defaultState = {
-				'post-status': {
-					opened: true,
-				},
-			};
-
 			// This will open it, since the default is closed.
 			registry
 				.dispatch( editPostStore )
 				.toggleEditorPanelOpened( 'control-panel' );
 
-			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry
+					.select( editPostStore )
+					.isEditorPanelOpened( 'control-panel' )
+			).toBe( true );
+
 			expect(
 				registry.select( editPostStore ).getPreference( 'panels' )
 			).toEqual( {
-				...defaultState,
 				'control-panel': {
 					opened: true,
 				},
@@ -279,14 +273,63 @@ describe( 'actions', () => {
 				.dispatch( editPostStore )
 				.toggleEditorPanelOpened( 'control-panel' );
 
-			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry
+					.select( editPostStore )
+					.isEditorPanelOpened( 'control-panel' )
+			).toBe( false );
+
 			expect(
 				registry.select( editPostStore ).getPreference( 'panels' )
+			).toEqual( {} );
+		} );
+	} );
+
+	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( {
-				...defaultState,
-				'control-panel': {
-					opened: false,
-				},
+				'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',
 			} );
 		} );
 	} );