@wordpress/interface 4.3.0 → 4.5.0

package/src/store/actions.js

@@ -1,87 +1,87 @@
 /**
- * Returns an action object used in signalling that an active area should be changed.
- *
- * @param {string} itemType Type of item.
- * @param {string} scope    Item scope.
- * @param {string} item     Item identifier.
- *
- * @return {Object} Action object.
+ * WordPress dependencies
  */
-function setSingleEnableItem( itemType, scope, item ) {
-	return {
-		type: 'SET_SINGLE_ENABLE_ITEM',
-		itemType,
-		scope,
-		item,
-	};
-}
+import deprecated from '@wordpress/deprecated';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
- * Returns an action object used in signalling that a complementary item should be enabled.
+ * Enable the complementary area.
  *
  * @param {string} scope Complementary area scope.
  * @param {string} area  Area identifier.
- *
- * @return {Object} Action object.
  */
-export function enableComplementaryArea( scope, area ) {
-	return setSingleEnableItem( 'complementaryArea', scope, area );
-}
+export const enableComplementaryArea = ( scope, area ) => ( { registry } ) => {
+	// Return early if there's no area.
+	if ( ! area ) {
+		return;
+	}
+
+	registry
+		.dispatch( preferencesStore )
+		.set( scope, 'complementaryArea', area );
+};
 
 /**
- * Returns an action object used in signalling that the complementary area of a given scope should be disabled.
+ * Disable the complementary area.
  *
  * @param {string} scope Complementary area scope.
- *
- * @return {Object} Action object.
  */
-export function disableComplementaryArea( scope ) {
-	return setSingleEnableItem( 'complementaryArea', scope, undefined );
-}
+export const disableComplementaryArea = ( scope ) => ( { registry } ) => {
+	registry
+		.dispatch( preferencesStore )
+		.set( scope, 'complementaryArea', null );
+};
 
 /**
- * Returns an action object to make an area enabled/disabled.
+ * Pins an item.
  *
- * @param {string}  itemType Type of item.
- * @param {string}  scope    Item scope.
- * @param {string}  item     Item identifier.
- * @param {boolean} isEnable Boolean indicating if an area should be pinned or not.
+ * @param {string} scope Item scope.
+ * @param {string} item  Item identifier.
  *
  * @return {Object} Action object.
  */
-function setMultipleEnableItem( itemType, scope, item, isEnable ) {
-	return {
-		type: 'SET_MULTIPLE_ENABLE_ITEM',
-		itemType,
-		scope,
-		item,
-		isEnable,
-	};
-}
+export const pinItem = ( scope, item ) => ( { registry } ) => {
+	// Return early if there's no item.
+	if ( ! item ) {
+		return;
+	}
 
-/**
- * Returns an action object used in signalling that an item should be pinned.
- *
- * @param {string} scope  Item scope.
- * @param {string} itemId Item identifier.
- *
- * @return {Object} Action object.
- */
-export function pinItem( scope, itemId ) {
-	return setMultipleEnableItem( 'pinnedItems', scope, itemId, true );
-}
+	const pinnedItems = registry
+		.select( preferencesStore )
+		.get( scope, 'pinnedItems' );
+
+	// The item is already pinned, there's nothing to do.
+	if ( pinnedItems?.[ item ] === true ) {
+		return;
+	}
+
+	registry.dispatch( preferencesStore ).set( scope, 'pinnedItems', {
+		...pinnedItems,
+		[ item ]: true,
+	} );
+};
 
 /**
- * Returns an action object used in signalling that an item should be unpinned.
- *
- * @param {string} scope  Item scope.
- * @param {string} itemId Item identifier.
+ * Unpins an item.
  *
- * @return {Object} Action object.
+ * @param {string} scope Item scope.
+ * @param {string} item  Item identifier.
  */
-export function unpinItem( scope, itemId ) {
-	return setMultipleEnableItem( 'pinnedItems', scope, itemId, false );
-}
+export const unpinItem = ( scope, item ) => ( { registry } ) => {
+	// Return early if there's no item.
+	if ( ! item ) {
+		return;
+	}
+
+	const pinnedItems = registry
+		.select( preferencesStore )
+		.get( scope, 'pinnedItems' );
+
+	registry.dispatch( preferencesStore ).set( scope, 'pinnedItems', {
+		...pinnedItems,
+		[ item ]: false,
+	} );
+};
 
 /**
  * Returns an action object used in signalling that a feature should be toggled.
@@ -90,9 +90,13 @@ export function unpinItem( scope, itemId ) {
  * @param {string} featureName The feature name.
  */
 export function toggleFeature( scope, featureName ) {
-	return function ( { select, dispatch } ) {
-		const currentValue = select.isFeatureActive( scope, featureName );
-		dispatch.setFeatureValue( scope, featureName, ! currentValue );
+	return function ( { registry } ) {
+		deprecated( `wp.dispatch( 'core/interface' ).toggleFeature`, {
+			since: '6.0',
+			alternative: `wp.dispatch( 'core/preferences' ).toggle`,
+		} );
+
+		registry.dispatch( preferencesStore ).toggle( scope, featureName );
 	};
 }
 
@@ -107,11 +111,15 @@ export function toggleFeature( scope, featureName ) {
  * @return {Object} Action object.
  */
 export function setFeatureValue( scope, featureName, value ) {
-	return {
-		type: 'SET_FEATURE_VALUE',
-		scope,
-		featureName,
-		value: !! value,
+	return function ( { registry } ) {
+		deprecated( `wp.dispatch( 'core/interface' ).setFeatureValue`, {
+			since: '6.0',
+			alternative: `wp.dispatch( 'core/preferences' ).set`,
+		} );
+
+		registry
+			.dispatch( preferencesStore )
+			.set( scope, featureName, !! value );
 	};
 }
 
@@ -124,9 +132,12 @@ export function setFeatureValue( scope, featureName, value ) {
  * @return {Object} Action object.
  */
 export function setFeatureDefaults( scope, defaults ) {
-	return {
-		type: 'SET_FEATURE_DEFAULTS',
-		scope,
-		defaults,
+	return function ( { registry } ) {
+		deprecated( `wp.dispatch( 'core/interface' ).setFeatureDefaults`, {
+			since: '6.0',
+			alternative: `wp.dispatch( 'core/preferences' ).setDefaults`,
+		} );
+
+		registry.dispatch( preferencesStore ).setDefaults( scope, defaults );
 	};
 }

package/src/store/index.js

@@ -1,23 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { createReduxStore, registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import reducer from './reducer';
 import * as actions from './actions';
 import * as selectors from './selectors';
 import { STORE_NAME } from './constants';
 
-const storeConfig = {
-	reducer,
-	actions,
-	selectors,
-	persist: [ 'enableItems', 'preferences' ],
-};
-
 /**
  * Store definition for the interface namespace.
  *
@@ -25,8 +17,12 @@ const storeConfig = {
  *
  * @type {Object}
  */
-export const store = createReduxStore( STORE_NAME, storeConfig );
+export const store = createReduxStore( STORE_NAME, {
+	reducer: () => {},
+	actions,
+	selectors,
+} );
 
 // Once we build a more generic persistence plugin that works across types of stores
 // we'd be able to replace this with a register call.
-registerStore( STORE_NAME, storeConfig );
+register( store );

package/src/store/selectors.js

@@ -1,20 +1,9 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { get } from 'lodash';
-
-/**
- * Returns the item that is enabled in a given scope.
- *
- * @param {Object} state    Global application state.
- * @param {string} itemType Type of item.
- * @param {string} scope    Item scope.
- *
- * @return {?string|null} The item that is enabled in the passed scope and type.
- */
-function getSingleEnableItem( state, itemType, scope ) {
-	return get( state.enableItems.singleEnableItems, [ itemType, scope ] );
-}
+import { createRegistrySelector } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Returns the complementary area that is active in a given scope.
@@ -24,27 +13,11 @@ function getSingleEnableItem( state, itemType, scope ) {
  *
  * @return {string} The complementary area that is active in the given scope.
  */
-export function getActiveComplementaryArea( state, scope ) {
-	return getSingleEnableItem( state, 'complementaryArea', scope );
-}
-
-/**
- * Returns a boolean indicating if an item is enabled or not in a given scope.
- *
- * @param {Object} state    Global application state.
- * @param {string} itemType Type of item.
- * @param {string} scope    Scope.
- * @param {string} item     Item to check.
- *
- * @return {boolean|undefined} True if the item is enabled, false otherwise if the item is explicitly disabled, and undefined if there is no information for that item.
- */
-function isMultipleEnabledItemEnabled( state, itemType, scope, item ) {
-	return get( state.enableItems.multipleEnableItems, [
-		itemType,
-		scope,
-		item,
-	] );
-}
+export const getActiveComplementaryArea = createRegistrySelector(
+	( select ) => ( state, scope ) => {
+		return select( preferencesStore ).get( scope, 'complementaryArea' );
+	}
+);
 
 /**
  * Returns a boolean indicating if an item is pinned or not.
@@ -55,12 +28,15 @@ function isMultipleEnabledItemEnabled( state, itemType, scope, item ) {
  *
  * @return {boolean} True if the item is pinned and false otherwise.
  */
-export function isItemPinned( state, scope, item ) {
-	return (
-		isMultipleEnabledItemEnabled( state, 'pinnedItems', scope, item ) !==
-		false
-	);
-}
+export const isItemPinned = createRegistrySelector(
+	( select ) => ( state, scope, item ) => {
+		const pinnedItems = select( preferencesStore ).get(
+			scope,
+			'pinnedItems'
+		);
+		return pinnedItems?.[ item ] ?? true;
+	}
+);
 
 /**
  * Returns a boolean indicating whether a feature is active for a particular
@@ -72,12 +48,16 @@ export function isItemPinned( state, scope, item ) {
  *
  * @return {boolean} Is the feature enabled?
  */
-export function isFeatureActive( state, scope, featureName ) {
-	const featureValue = state.preferences.features[ scope ]?.[ featureName ];
-	const defaultedFeatureValue =
-		featureValue !== undefined
-			? featureValue
-			: state.preferenceDefaults.features[ scope ]?.[ featureName ];
+export const isFeatureActive = createRegistrySelector(
+	( select ) => ( state, scope, featureName ) => {
+		deprecated(
+			`wp.select( 'core/interface' ).isFeatureActive( scope, featureName )`,
+			{
+				since: '6.0',
+				alternative: `!! wp.select( 'core/preferences' ).isFeatureActive( scope, featureName )`,
+			}
+		);
 
-	return !! defaultedFeatureValue;
-}
+		return !! select( preferencesStore ).get( scope, featureName );
+	}
+);

package/src/store/test/actions.js

@@ -0,0 +1,259 @@
+/**
+ * WordPress dependencies
+ */
+import { createRegistry } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as interfaceStore } from '../';
+
+function createRegistryWithStores() {
+	// Create a registry and register used stores.
+	const registry = createRegistry();
+	[ interfaceStore, preferencesStore ].forEach( registry.register );
+	return registry;
+}
+
+describe( 'actions', () => {
+	let registry;
+	beforeEach( () => {
+		registry = createRegistryWithStores();
+	} );
+
+	describe( 'enableComplementaryArea', () => {
+		it( 'sets a single area as active in the complementary area', () => {
+			// Starts off as `undefined`.
+			expect(
+				registry
+					.select( interfaceStore )
+					.getActiveComplementaryArea( 'my-plugin' )
+			).toBeUndefined();
+
+			registry
+				.dispatch( interfaceStore )
+				.enableComplementaryArea( 'my-plugin', 'custom-sidebar-1' );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.getActiveComplementaryArea( 'my-plugin' )
+			).toBe( 'custom-sidebar-1' );
+
+			registry
+				.dispatch( interfaceStore )
+				.enableComplementaryArea( 'my-plugin', 'custom-sidebar-2' );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.getActiveComplementaryArea( 'my-plugin' )
+			).toBe( 'custom-sidebar-2' );
+		} );
+	} );
+
+	describe( 'disableComplementaryArea', () => {
+		it( 'removes any assignment to a complementary area', () => {
+			registry
+				.dispatch( interfaceStore )
+				.enableComplementaryArea( 'my-plugin', 'custom-sidebar' );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.getActiveComplementaryArea( 'my-plugin' )
+			).toBe( 'custom-sidebar' );
+
+			registry
+				.dispatch( interfaceStore )
+				.disableComplementaryArea( 'my-plugin' );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.getActiveComplementaryArea( 'my-plugin' )
+			).toBeNull();
+		} );
+	} );
+
+	describe( 'pinItem / unpinItem', () => {
+		it( 'can be used to pin and unpin multiple items using successive calls', () => {
+			// Items are pinned by default.
+			expect(
+				registry
+					.select( interfaceStore )
+					.isItemPinned( 'my-plugin', 'ui-item-1' )
+			).toBe( true );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isItemPinned( 'my-plugin', 'ui-item-2' )
+			).toBe( true );
+
+			// Unpinning the default value works.
+			registry
+				.dispatch( interfaceStore )
+				.unpinItem( 'my-plugin', 'ui-item-1' );
+
+			registry
+				.dispatch( interfaceStore )
+				.unpinItem( 'my-plugin', 'ui-item-2' );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isItemPinned( 'my-plugin', 'ui-item-1' )
+			).toBe( false );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isItemPinned( 'my-plugin', 'ui-item-2' )
+			).toBe( false );
+
+			// Now explicitly set the items to be pinned.
+			registry
+				.dispatch( interfaceStore )
+				.pinItem( 'my-plugin', 'ui-item-1' );
+
+			registry
+				.dispatch( interfaceStore )
+				.pinItem( 'my-plugin', 'ui-item-2' );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isItemPinned( 'my-plugin', 'ui-item-1' )
+			).toBe( true );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isItemPinned( 'my-plugin', 'ui-item-2' )
+			).toBe( true );
+
+			// Unpinning should still work.
+			registry
+				.dispatch( interfaceStore )
+				.unpinItem( 'my-plugin', 'ui-item-1' );
+
+			registry
+				.dispatch( interfaceStore )
+				.unpinItem( 'my-plugin', 'ui-item-2' );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isItemPinned( 'my-plugin', 'ui-item-1' )
+			).toBe( false );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isItemPinned( 'my-plugin', 'ui-item-2' )
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'setFeatureDefaults', () => {
+		it( 'results in default values being present', () => {
+			registry.dispatch( interfaceStore ).setFeatureDefaults( 'test', {
+				feature1: true,
+				feature2: false,
+			} );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isFeatureActive( 'test', 'feature1' )
+			).toBe( true );
+			expect(
+				registry
+					.select( interfaceStore )
+					.isFeatureActive( 'test', 'feature2' )
+			).toBe( false );
+
+			// Expect a deprecation message.
+			expect( console ).toHaveWarned();
+		} );
+	} );
+
+	describe( 'setFeatureValue', () => {
+		it( 'sets a feature to a boolean value', () => {
+			registry
+				.dispatch( interfaceStore )
+				.setFeatureValue( 'test', 'feature1', false );
+			registry
+				.dispatch( interfaceStore )
+				.setFeatureValue( 'test', 'feature2', true );
+			expect(
+				registry
+					.select( interfaceStore )
+					.isFeatureActive( 'test', 'feature1' )
+			).toBe( false );
+			expect(
+				registry
+					.select( interfaceStore )
+					.isFeatureActive( 'test', 'feature2' )
+			).toBe( true );
+
+			// Expect a deprecation message.
+			expect( console ).toHaveWarned();
+		} );
+
+		it( 'coerces non-boolean values into booleans', () => {
+			registry
+				.dispatch( interfaceStore )
+				.setFeatureValue( 'test', 'feature1', 'avocado' );
+			registry
+				.dispatch( interfaceStore )
+				.setFeatureValue( 'test', 'feature2', 0 );
+
+			expect(
+				registry
+					.select( interfaceStore )
+					.isFeatureActive( 'test', 'feature1' )
+			).toBe( true );
+			expect(
+				registry
+					.select( interfaceStore )
+					.isFeatureActive( 'test', 'feature2' )
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'toggleFeature', () => {
+		it( 'changes a value that was true to false', () => {
+			registry
+				.dispatch( interfaceStore )
+				.setFeatureValue( 'test', 'feature1', true );
+			registry
+				.dispatch( interfaceStore )
+				.toggleFeature( 'test', 'feature1' );
+			expect(
+				registry
+					.select( interfaceStore )
+					.isFeatureActive( 'test', 'feature1' )
+			).toBe( false );
+
+			// Expect a deprecation message.
+			expect( console ).toHaveWarned();
+		} );
+
+		it( 'changes a value that was false to true', () => {
+			registry
+				.dispatch( interfaceStore )
+				.setFeatureValue( 'test', 'feature1', false );
+			registry
+				.dispatch( interfaceStore )
+				.toggleFeature( 'test', 'feature1' );
+			expect(
+				registry
+					.select( interfaceStore )
+					.isFeatureActive( 'test', 'feature1' )
+			).toBe( true );
+		} );
+	} );
+} );