Closing the block inserter decrements block type impressions (#33906)

* Closing the block inserter decrements block type impressions In order to avoid new block badges from remaining too long, interacting with the block inserter multiple times will cause them to eventually disappear. * Increase initial new block type impression count A higher value makes more sense now that closing the block inserter decrements the impression count by 1. * Fix test by improving requestBlockTypeImpressions mock accuracy This particular function is a React Native bridge method, which executes a callback to send back the requested data. * Refactor conditional logic to avoid computation Iterating over the block type impressions is unnecessary when the block inserter is opening. * Increase default block type impression count from 10 to 40 Interacting with the block inserter is a more frequent task, so it makes sense to use a larger default impression count.
WordPress · Aug 6, 2021 · f9f6cf0 · f9f6cf0
1 parent a4bc4d1
commit f9f6cf0
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
@@ -10,7 +10,7 @@ import { delay } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { Dropdown, ToolbarButton, Picker } from '@wordpress/components';
 import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import {
@@ -20,6 +20,7 @@ import {
 	insertAfter,
 	insertBefore,
 } from '@wordpress/icons';
+import { setBlockTypeImpressions } from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -161,7 +162,33 @@ export class Inserter extends Component {
 	}
 
 	onToggle( isOpen ) {
-		const { onToggle } = this.props;
+		const { blockTypeImpressions, onToggle, updateSettings } = this.props;
+
+		if ( ! isOpen ) {
+			const impressionsRemain = Object.values(
+				blockTypeImpressions
+			).some( ( count ) => count > 0 );
+
+			if ( impressionsRemain ) {
+				const decrementedImpressions = Object.entries(
+					blockTypeImpressions
+				).reduce(
+					( acc, [ blockName, count ] ) => ( {
+						...acc,
+						[ blockName ]: Math.max( count - 1, 0 ),
+					} ),
+					{}
+				);
+
+				// Persist block type impression to JavaScript store
+				updateSettings( {
+					impressions: decrementedImpressions,
+				} );
+
+				// Persist block type impression count to native app store
+				setBlockTypeImpressions( decrementedImpressions );
+			}
+		}
 
 		// Surface toggle callback to parent component
 		if ( onToggle ) {
@@ -308,6 +335,10 @@ export class Inserter extends Component {
 }
 
 export default compose( [
+	withDispatch( ( dispatch ) => {
+		const { updateSettings } = dispatch( blockEditorStore );
+		return { updateSettings };
+	} ),
 	withSelect( ( select, { clientId, isAppender, rootClientId } ) => {
 		const {
 			getBlockRootClientId,
@@ -378,6 +409,7 @@ export default compose( [
 		const insertionIndexEnd = endOfRootIndex;
 
 		return {
+			blockTypeImpressions: getBlockEditorSettings().impressions,
 			displayEditorOnboardingTooltip:
 				getBlockEditorSettings().editorOnboarding &&
 				getBlockEditorSettings().firstGutenbergEditorSession,

diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
@@ -288,7 +288,7 @@ export const registerCoreBlocks = () => {
  * @constant {{ string, number }}
  */
 export const NEW_BLOCK_TYPES = {
-	[ embed.name ]: 3,
-	[ search.name ]: 3,
-	[ audio.name ]: 3,
+	[ embed.name ]: 40,
+	[ search.name ]: 40,
+	[ audio.name ]: 40,
 };
diff --git a/test/native/setup.js b/test/native/setup.js
@@ -40,7 +40,9 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		addEventListener: jest.fn(),
 		mediaUploadSync: jest.fn(),
 		removeEventListener: jest.fn(),
-		requestBlockTypeImpressions: jest.fn( () => {} ),
+		requestBlockTypeImpressions: jest.fn( ( callback ) => {
+			callback( {} );
+		} ),
 		requestFocalPointPickerTooltipShown: jest.fn( () => true ),
 		setBlockTypeImpressions: jest.fn(),
 		subscribeParentToggleHTMLMode: jest.fn(),