@wordpress/edit-post 6.2.0 → 6.3.0

package/src/store/reducer.js

@@ -1,85 +1,13 @@
 /**
  * External dependencies
  */
-import { flow, get, includes } 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;
-	},
-} );
-
 /**
  * Reducer storing the list of all programmatically removed panels.
  *
@@ -263,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.
@@ -89,13 +91,57 @@ export const getActiveGeneralSidebarName = createRegistrySelector(
 	}
 );
 
-// The current list of preference keys that have been migrated to the
-// preferences package.
-const MIGRATED_KEYS = [
-	'hiddenBlockTypes',
-	'editorMode',
-	'preferredStyleVariations',
-];
+/**
+ * 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).
@@ -104,34 +150,50 @@ const MIGRATED_KEYS = [
  *
  * @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,
+	};
+} );
 
 /**
  *
@@ -142,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;
 }
@@ -198,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
@@ -216,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

@@ -157,7 +157,6 @@ describe( 'actions', () => {
 
 			const expected = [ 'core/quote', 'core/table' ];
 
-			// TODO - remove once `getPreference` is deprecated.
 			expect(
 				registry
 					.select( editPostStore )
@@ -167,6 +166,9 @@ describe( 'actions', () => {
 			expect(
 				registry.select( editPostStore ).getHiddenBlockTypes()
 			).toEqual( expected );
+
+			// Expect a deprecation message for `getPreference`.
+			expect( console ).toHaveWarned();
 		} );
 	} );
 
@@ -178,7 +180,6 @@ describe( 'actions', () => {
 
 			const expectedA = [ 'core/quote', 'core/table' ];
 
-			// TODO - remove once `getPreference` is deprecated.
 			expect(
 				registry
 					.select( editPostStore )
@@ -195,7 +196,6 @@ describe( 'actions', () => {
 
 			const expectedB = [ 'core/quote' ];
 
-			// TODO - remove once `getPreference` is deprecated.
 			expect(
 				registry
 					.select( editPostStore )
@@ -210,22 +210,21 @@ describe( 'actions', () => {
 
 	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,
 				},
@@ -236,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,
 				},
@@ -276,15 +273,15 @@ 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( {
-				...defaultState,
-				'control-panel': {
-					opened: false,
-				},
-			} );
+			).toEqual( {} );
 		} );
 	} );
 

package/src/store/test/reducer.js

@@ -7,7 +7,6 @@ import deepFreeze from 'deep-freeze';
  * Internal dependencies
  */
 import {
-	preferences,
 	activeModal,
 	isSavingMetaBoxes,
 	metaBoxLocations,
@@ -15,135 +14,10 @@ import {
 	blockInserterPanel,
 	listViewPanel,
 } from '../reducer';
-import { PREFERENCES_DEFAULTS } from '../defaults';
 
 import { setIsInserterOpened, setIsListViewOpened } from '../actions';
 
 describe( 'state', () => {
-	describe( 'preferences()', () => {
-		it( 'should apply all defaults', () => {
-			const state = preferences( undefined, {} );
-
-			expect( state ).toEqual( PREFERENCES_DEFAULTS );
-		} );
-
-		it( 'should disable panels by default', () => {
-			const original = deepFreeze( {
-				panels: {},
-			} );
-			const state = preferences( original, {
-				type: 'TOGGLE_PANEL_ENABLED',
-				panelName: 'post-status',
-			} );
-			expect( state.panels ).toEqual( {
-				'post-status': { enabled: false },
-			} );
-		} );
-
-		it( 'should disable panels that are enabled', () => {
-			const original = deepFreeze( {
-				panels: {
-					'post-status': { enabled: true },
-				},
-			} );
-			const state = preferences( original, {
-				type: 'TOGGLE_PANEL_ENABLED',
-				panelName: 'post-status',
-			} );
-			expect( state.panels ).toEqual( {
-				'post-status': { enabled: false },
-			} );
-		} );
-
-		it( 'should enable panels that are disabled', () => {
-			const original = deepFreeze( {
-				panels: {
-					'post-status': { enabled: false },
-				},
-			} );
-			const state = preferences( original, {
-				type: 'TOGGLE_PANEL_ENABLED',
-				panelName: 'post-status',
-			} );
-			expect( state.panels ).toEqual( {
-				'post-status': { enabled: true },
-			} );
-		} );
-
-		it( 'should open panels by default', () => {
-			const original = deepFreeze( {
-				panels: {},
-			} );
-			const state = preferences( original, {
-				type: 'TOGGLE_PANEL_OPENED',
-				panelName: 'post-status',
-			} );
-			expect( state.panels ).toEqual( {
-				'post-status': { opened: true },
-			} );
-		} );
-
-		it( 'should open panels that are closed', () => {
-			const original = deepFreeze( {
-				panels: {
-					'post-status': { opened: false },
-				},
-			} );
-			const state = preferences( original, {
-				type: 'TOGGLE_PANEL_OPENED',
-				panelName: 'post-status',
-			} );
-			expect( state.panels ).toEqual( {
-				'post-status': { opened: true },
-			} );
-		} );
-
-		it( 'should close panels that are opened', () => {
-			const original = deepFreeze( {
-				panels: {
-					'post-status': { opened: true },
-				},
-			} );
-			const state = preferences( original, {
-				type: 'TOGGLE_PANEL_OPENED',
-				panelName: 'post-status',
-			} );
-			expect( state.panels ).toEqual( {
-				'post-status': { opened: false },
-			} );
-		} );
-
-		it( 'should open panels that are legacy closed', () => {
-			const original = deepFreeze( {
-				panels: {
-					'post-status': false,
-				},
-			} );
-			const state = preferences( original, {
-				type: 'TOGGLE_PANEL_OPENED',
-				panelName: 'post-status',
-			} );
-			expect( state.panels ).toEqual( {
-				'post-status': { opened: true },
-			} );
-		} );
-
-		it( 'should close panels that are legacy opened', () => {
-			const original = deepFreeze( {
-				panels: {
-					'post-status': true,
-				},
-			} );
-			const state = preferences( original, {
-				type: 'TOGGLE_PANEL_OPENED',
-				panelName: 'post-status',
-			} );
-			expect( state.panels ).toEqual( {
-				'post-status': { opened: false },
-			} );
-		} );
-	} );
-
 	describe( 'activeModal', () => {
 		it( 'should default to null', () => {
 			const state = activeModal( undefined, {} );