Migrate block editor insert usage to preferences store

packages/block-editor/src/store/actions.js

@@ -373,11 +373,11 @@ export const replaceBlocks =
 				type: 'REPLACE_BLOCKS',
 				clientIds,
 				blocks,
-				time: Date.now(),
 				indexToSelect,
 				initialPosition,
 				meta,
 			} );
+			dispatch.updateInsertUsage( blocks );
 			// To avoid a focus loss when removing the last block, assure there is
 			// always a default block if the last of the blocks have been removed.
 			dispatch.ensureDefaultBlock();
@@ -577,11 +577,11 @@ export const insertBlocks =
 				blocks: allowedBlocks,
 				index,
 				rootClientId,
-				time: Date.now(),
 				updateSelection,
 				initialPosition: updateSelection ? initialPosition : null,
 				meta,
 			} );
+			dispatch.updateInsertUsage( allowedBlocks );
 		}
 	};
 
@@ -1394,7 +1394,6 @@ export function replaceInnerBlocks(
 		blocks,
 		updateSelection,
 		initialPosition: updateSelection ? initialPosition : null,
-		time: Date.now(),
 	};
 }
 

packages/block-editor/src/store/defaults.js

@@ -3,10 +3,6 @@
  */
 import { __, _x } from '@wordpress/i18n';
 
-export const PREFERENCES_DEFAULTS = {
-	insertUsage: {},
-};
-
 /**
  * The default editor settings
  *

packages/block-editor/src/store/defaults.native.js

@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	PREFERENCES_DEFAULTS,
-	SETTINGS_DEFAULTS as SETTINGS,
-} from './defaults.js';
+import { SETTINGS_DEFAULTS as SETTINGS } from './defaults.js';
 
 const SETTINGS_DEFAULTS = {
 	...SETTINGS,
@@ -20,4 +17,4 @@ const SETTINGS_DEFAULTS = {
 	},
 };
 
-export { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS };
+export { SETTINGS_DEFAULTS };

packages/block-editor/src/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createReduxStore, registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,24 +32,8 @@ export const storeConfig = {
  */
 export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,
-	persist: [ 'preferences' ],
 } );
 
-// We will be able to use the `register` function once we switch
-// the "preferences" persistence to use the new preferences package.
-const registeredStore = registerStore( STORE_NAME, {
-	...storeConfig,
-	persist: [ 'preferences' ],
-} );
-unlock( registeredStore ).registerPrivateActions( privateActions );
-unlock( registeredStore ).registerPrivateSelectors( privateSelectors );
-
-// TODO: Remove once we switch to the `register` function (see above).
-//
-// Until then, private functions also need to be attached to the original
-// `store` descriptor in order to avoid unit tests failing, which could happen
-// when tests create new registries in which they register stores.
-//
-// @see https://github.com/WordPress/gutenberg/pull/51145#discussion_r1239999590
 unlock( store ).registerPrivateActions( privateActions );
 unlock( store ).registerPrivateSelectors( privateSelectors );
+register( store );

packages/block-editor/src/store/private-actions.js

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { store as blocksStore } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -382,3 +384,69 @@ export const modifyContentLockBlock =
 			focusModeToRevert
 		);
 	};
+
+/**
+ * Updates the inserter usage statistics in the preferences store.
+ *
+ * Note: this function is an internal and not intended to ever be made
+ * non-private.
+ *
+ * @param {Array} blocks The array of blocks that were inserted.
+ */
+export const updateInsertUsage =
+	( blocks ) =>
+	( { registry } ) => {
+		const previousInsertUsage =
+			registry.select( preferencesStore ).get( 'core', 'insertUsage' ) ??
+			{};
+
+		const time = Date.now();
+
+		let updatedInsertUsage = blocks.reduce( ( previousState, block ) => {
+			const { attributes, name: blockName } = block;
+			let id = blockName;
+			const variation = registry
+				.select( blocksStore )
+				.getActiveBlockVariation( blockName, attributes );
+
+			if ( variation?.name ) {
+				id += '/' + variation.name;
+			}
+
+			if ( blockName === 'core/block' ) {
+				id += '/' + attributes.ref;
+			}
+
+			const previousCount = previousState?.[ id ]?.count ?? 0;
+
+			return {
+				...previousState,
+				[ id ]: {
+					time,
+					count: previousCount + 1,
+				},
+			};
+		}, previousInsertUsage );
+
+		// Ensure the list of blocks doesn't grow above `limit` items.
+		// This is to ensure the preferences store data doesn't grow too big
+		// given it's persisted in the database.
+		const limit = 100;
+		const entries = Object.entries( updatedInsertUsage );
+		if ( entries.length > limit ) {
+			// Most recently inserted blocks first.
+			entries.sort( ( a, b ) => b[ 1 ].time - a[ 1 ].time );
+
+			// Slice an array of items that are the newest and convert them
+			// back into object form.
+			const entriesToKeep = entries.slice( 0, limit );
+			updatedInsertUsage = Object.fromEntries( entriesToKeep );
+		}
+
+		unlock(
+			registry.dispatch( preferencesStore )
+		).markNextChangeAsExpensive();
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'insertUsage', updatedInsertUsage );
+	};

packages/block-editor/src/store/private-selectors.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createSelector, createRegistrySelector } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -31,6 +32,8 @@ import {
 
 export { getBlockSettings } from './get-block-settings';
 
+const EMPTY_OBJECT = {};
+
 /**
  * Returns true if the block interface is hidden, or false otherwise.
  *
@@ -511,3 +514,19 @@ export function getTemporarilyEditingAsBlocks( state ) {
 export function getTemporarilyEditingFocusModeToRevert( state ) {
 	return state.temporarilyEditingFocusModeRevert;
 }
+
+/**
+ * Return all insert usage stats.
+ *
+ * This is only exported since registry selectors need to be exported. It's marked
+ * as unstable so that it's not considered part of the public API.
+ *
+ * @return {Object<string,Object>} An object with an `id` key representing the type
+ *                                 of block and an object value that contains
+ *                                 block insertion statistics.
+ */
+export const getInsertUsage = createRegistrySelector(
+	( registrySelect ) => () =>
+		registrySelect( preferencesStore ).get( 'core', 'insertUsage' ) ??
+		EMPTY_OBJECT
+);

packages/block-editor/src/store/reducer.js

@@ -7,12 +7,12 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { pipe } from '@wordpress/compose';
-import { combineReducers, select } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import { combineReducers } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
+import { SETTINGS_DEFAULTS } from './defaults';
 import { insertAt, moveTo } from './array';
 
 const identity = ( x ) => x;
@@ -1676,58 +1676,6 @@ export function settings( state = SETTINGS_DEFAULTS, action ) {
 	return state;
 }
 
-/**
- * Reducer returning the user preferences.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {string} Updated state.
- */
-export function preferences( state = PREFERENCES_DEFAULTS, action ) {
-	switch ( action.type ) {
-		case 'INSERT_BLOCKS':
-		case 'REPLACE_BLOCKS': {
-			const nextInsertUsage = action.blocks.reduce(
-				( prevUsage, block ) => {
-					const { attributes, name: blockName } = block;
-					let id = blockName;
-					// If a block variation match is found change the name to be the same with the
-					// one that is used for block variations in the Inserter (`getItemFromVariation`).
-					const match = select( blocksStore ).getActiveBlockVariation(
-						blockName,
-						attributes
-					);
-					if ( match?.name ) {
-						id += '/' + match.name;
-					}
-					if ( blockName === 'core/block' ) {
-						id += '/' + attributes.ref;
-					}
-
-					return {
-						...prevUsage,
-						[ id ]: {
-							time: action.time,
-							count: prevUsage[ id ]
-								? prevUsage[ id ].count + 1
-								: 1,
-						},
-					};
-				},
-				state.insertUsage
-			);
-
-			return {
-				...state,
-				insertUsage: nextInsertUsage,
-			};
-		}
-	}
-
-	return state;
-}
-
 /**
  * Reducer returning an object where each key is a block client ID, its value
  * representing the settings for its nested blocks.
@@ -2083,7 +2031,6 @@ const combinedReducers = combineReducers( {
 	insertionPoint,
 	template,
 	settings,
-	preferences,
 	lastBlockAttributesChange,
 	lastFocus,
 	editorMode,

packages/block-editor/src/store/selectors.js

@@ -34,6 +34,7 @@ import { unlock } from '../lock-unlock';
 
 import {
 	getContentLockingParent,
+	getInsertUsage,
 	getTemporarilyEditingAsBlocks,
 	getTemporarilyEditingFocusModeToRevert,
 } from './private-selectors';
@@ -1819,20 +1820,6 @@ export function canLockBlockType( state, nameOrType ) {
 	return !! state.settings?.canLockBlocks;
 }
 
-/**
- * Returns information about how recently and frequently a block has been inserted.
- *
- * @param {Object} state Global application state.
- * @param {string} id    A string which identifies the insert, e.g. 'core/block/12'
- *
- * @return {?{ time: number, count: number }} An object containing `time` which is when the last
- *                                            insert occurred as a UNIX epoch, and `count` which is
- *                                            the number of inserts that have occurred.
- */
-function getInsertUsage( state, id ) {
-	return state.preferences.insertUsage?.[ id ] ?? null;
-}
-
 /**
  * Returns whether we can show a block type in the inserter
  *
@@ -1859,7 +1846,8 @@ const canIncludeBlockTypeInInserter = ( state, blockType, rootClientId ) => {
  */
 const getItemFromVariation = ( state, item ) => ( variation ) => {
 	const variationId = `${ item.id }/${ variation.name }`;
-	const { time, count = 0 } = getInsertUsage( state, variationId ) || {};
+	const insertUsage = getInsertUsage();
+	const { time, count = 0 } = insertUsage?.[ variationId ] ?? {};
 	return {
 		...item,
 		id: variationId,
@@ -1934,7 +1922,8 @@ const buildBlockTypeItem =
 			).some( ( { name } ) => name === blockType.name );
 		}
 
-		const { time, count = 0 } = getInsertUsage( state, id ) || {};
+		const insertUsage = getInsertUsage();
+		const { time, count = 0 } = insertUsage?.[ id ] ?? {};
 		const blockItemBase = {
 			id,
 			name: blockType.name,
@@ -2003,7 +1992,8 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 					  }
 					: symbol;
 				const id = `core/block/${ reusableBlock.id }`;
-				const { time, count = 0 } = getInsertUsage( state, id ) || {};
+				const insertUsage = getInsertUsage();
+				const { time, count = 0 } = insertUsage?.[ id ] ?? {};
 				const frecency = calculateFrecency( time, count );
 
 				return {
@@ -2147,7 +2137,7 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 			getBlockTypes(),
 			unlock( select( STORE_NAME ) ).getReusableBlocks(),
 			state.blocks.order,
-			state.preferences.insertUsage,
+			getInsertUsage(),
 			...getInsertBlockTypeDependants( state, rootClientId ),
 		]
 	)
@@ -2214,7 +2204,7 @@ export const getBlockTransformItems = createSelector(
 	},
 	( state, blocks, rootClientId ) => [
 		getBlockTypes(),
-		state.preferences.insertUsage,
+		getInsertUsage(),
 		...getInsertBlockTypeDependants( state, rootClientId ),
 	]
 );