Migrate block editor insert usage to preferences store

Update tests

Make updateInsertUsage a proper action that can be unit tested

Fix reusable block tests

docs/reference-guides/data/data-core-block-editor.md

@@ -1650,6 +1650,14 @@ _Returns_
 
 -   `Object`: Action object
 
+### updateInsertUsage
+
+Updates the inserter usage statistics in the preferences store.
+
+_Parameters_
+
+-   _blocks_ `Array`: The array of blocks that were inserted.
+
 ### updateSettings
 
 Action that updates the block editor settings.

packages/block-editor/package.json

@@ -52,6 +52,7 @@
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/notices": "file:../notices",
+		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/shortcode": "file:../shortcode",
 		"@wordpress/style-engine": "file:../style-engine",

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

@@ -11,11 +11,13 @@ import {
 	hasBlockSupport,
 	switchToBlockType,
 	synchronizeBlocksWithTemplate,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -406,6 +408,7 @@ export const replaceBlocks =
 				return;
 			}
 		}
+		dispatch.updateInsertUsage( blocks );
 		dispatch( {
 			type: 'REPLACE_BLOCKS',
 			clientIds,
@@ -558,6 +561,52 @@ export function insertBlock(
 	);
 }
 
+/**
+ * Updates the inserter usage statistics in the preferences store.
+ *
+ * @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();
+
+		const updatedInsertUsage = blocks.reduce( ( previousState, block ) => {
+			const { attributes, name: blockName } = block;
+			const match = registry
+				.select( blocksStore )
+				.getActiveBlockVariation( blockName, attributes );
+
+			// 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`).
+			let id = match?.name ? `${ blockName }/${ match.name }` : blockName;
+			const _insert = { name: id };
+			if ( blockName === 'core/block' ) {
+				_insert.ref = attributes.ref;
+				id += '/' + attributes.ref;
+			}
+
+			const previousCount = previousState?.[ id ]?.count ?? 0;
+
+			return {
+				...previousState,
+				[ id ]: {
+					time,
+					count: previousCount + 1,
+					insert: _insert,
+				},
+			};
+		}, previousInsertUsage );
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'insertUsage', updatedInsertUsage );
+	};
+
 /* eslint-disable jsdoc/valid-types */
 /**
  * Action that inserts an array of blocks, optionally at a specific index respective a root block list.
@@ -608,6 +657,7 @@ export const insertBlocks =
 			}
 		}
 		if ( allowedBlocks.length ) {
+			dispatch.updateInsertUsage( blocks );
 			dispatch( {
 				type: 'INSERT_BLOCKS',
 				blocks: allowedBlocks,
@@ -1238,7 +1288,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,
@@ -23,4 +20,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
@@ -29,11 +29,6 @@ export const storeConfig = {
  */
 export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,
-	persist: [ 'preferences' ],
 } );
 
-// Ideally we'd use register instead of register stores.
-registerStore( STORE_NAME, {
-	...storeConfig,
-	persist: [ 'preferences' ],
-} );
+register( store );

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

@@ -15,12 +15,12 @@ import {
  * 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;
@@ -1526,54 +1526,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':
-			return action.blocks.reduce( ( prevState, block ) => {
-				const { attributes, name: blockName } = block;
-				const match = select( blocksStore ).getActiveBlockVariation(
-					blockName,
-					attributes
-				);
-				// 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`).
-				let id = match?.name
-					? `${ blockName }/${ match.name }`
-					: blockName;
-				const insert = { name: id };
-				if ( blockName === 'core/block' ) {
-					insert.ref = attributes.ref;
-					id += '/' + attributes.ref;
-				}
-
-				return {
-					...prevState,
-					insertUsage: {
-						...prevState.insertUsage,
-						[ id ]: {
-							time: action.time,
-							count: prevState.insertUsage[ id ]
-								? prevState.insertUsage[ id ].count + 1
-								: 1,
-							insert,
-						},
-					},
-				};
-			}, state );
-	}
-
-	return state;
-}
-
 /**
  * Reducer returning an object where each key is a block client ID, its value
  * representing the settings for its nested blocks.
@@ -1812,7 +1764,6 @@ export default combineReducers( {
 	insertionPoint,
 	template,
 	settings,
-	preferences,
 	lastBlockAttributesChange,
 	editorMode,
 	hasBlockMovingClientId,

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

@@ -16,6 +16,7 @@ import {
 	parse,
 	switchToBlockType,
 } from '@wordpress/blocks';
+import { createRegistrySelector } from '@wordpress/data';
 import { Platform } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
@@ -27,6 +28,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import { mapRichTextSettings } from './utils';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * A block selection object.
@@ -54,6 +56,7 @@ const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
  * @type {Array}
  */
 const EMPTY_ARRAY = [];
+const EMPTY_OBJECT = {};
 
 /**
  * Returns a block's name given its client ID, or null if no block exists with
@@ -1736,19 +1739,43 @@ export function canLockBlockType( state, nameOrType ) {
 	return !! state.settings?.canLockBlocks;
 }
 
+/**
+ * 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 __unstableGetInsertUsage = createRegistrySelector(
+	( select ) => () =>
+		select( preferencesStore ).get( 'core', 'insertUsage' ) ?? EMPTY_OBJECT
+);
+
 /**
  * Returns information about how recently and frequently a block has been inserted.
  *
+ * 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.
+ *
  * @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;
-}
+export const __unstableGetInsertUsageForBlock = createRegistrySelector(
+	( select ) => ( state, id ) => {
+		const insertUsage = select( preferencesStore ).get(
+			'core',
+			'insertUsage'
+		);
+		return insertUsage?.[ id ] ?? null;
+	}
+);
 
 /**
  * Returns whether we can show a block type in the inserter
@@ -1776,7 +1803,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 { time, count = 0 } =
+		__unstableGetInsertUsageForBlock( state, variationId ) || {};
 	return {
 		...item,
 		id: variationId,
@@ -1854,7 +1882,8 @@ const buildBlockTypeItem =
 			);
 		}
 
-		const { time, count = 0 } = getInsertUsage( state, id ) || {};
+		const { time, count = 0 } =
+			__unstableGetInsertUsageForBlock( state, id ) || {};
 		const blockItemBase = {
 			id,
 			name: blockType.name,
@@ -1962,7 +1991,8 @@ export const getInserterItems = createSelector(
 			}
 
 			const id = `core/block/${ reusableBlock.id }`;
-			const { time, count = 0 } = getInsertUsage( state, id ) || {};
+			const { time, count = 0 } =
+				__unstableGetInsertUsageForBlock( state, id ) || {};
 			const frecency = calculateFrecency( time, count );
 
 			return {
@@ -2029,7 +2059,7 @@ export const getInserterItems = createSelector(
 		state.blockListSettings[ rootClientId ],
 		state.blocks.byClientId,
 		state.blocks.order,
-		state.preferences.insertUsage,
+		__unstableGetInsertUsage(),
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
 		getReusableBlocks( state ),
@@ -2112,7 +2142,7 @@ export const getBlockTransformItems = createSelector(
 	( state, rootClientId ) => [
 		state.blockListSettings[ rootClientId ],
 		state.blocks.byClientId,
-		state.preferences.insertUsage,
+		__unstableGetInsertUsage(),
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
 		getBlockTypes(),