Block Editor: Warn when useBlockProps hook used with a wrong Block …

…API version (#33274)

* Block Editor: Warn when `useBlockProps` hook used with a wrong Block API version

* Revert apiVersion change in the Heading block

packages/block-editor/package.json

@@ -55,6 +55,7 @@
 		"@wordpress/shortcode": "file:../shortcode",
 		"@wordpress/token-list": "file:../token-list",
 		"@wordpress/url": "file:../url",
+		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
 		"css-mediaquery": "^0.1.2",

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -14,6 +14,7 @@ import {
 } from '@wordpress/blocks';
 import { useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -65,6 +66,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		index,
 		mode,
 		name,
+		blockAPIVersion,
 		blockTitle,
 		isPartOfSelection,
 		adjustScrolling,
@@ -89,11 +91,13 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isAncestorMultiSelected( clientId );
 			const blockName = getBlockName( clientId );
 			const rootClientId = getBlockRootClientId( clientId );
+			const blockType = getBlockType( blockName );
 			return {
 				index: getBlockIndex( clientId, rootClientId ),
 				mode: getBlockMode( clientId ),
 				name: blockName,
-				blockTitle: getBlockType( blockName ).title,
+				blockAPIVersion: blockType.apiVersion,
+				blockTitle: blockType.title,
 				isPartOfSelection: isSelected || isPartOfMultiSelection,
 				adjustScrolling:
 					isSelected || isFirstMultiSelectedBlock( clientId ),
@@ -128,6 +132,12 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		} ),
 	] );
 
+	if ( blockAPIVersion < 2 ) {
+		warning(
+			`Block type "${ name }" must support API version 2 or higher to work correctly with "useBlockProps" method.`
+		);
+	}
+
 	return {
 		...wrapperProps,
 		...props,

packages/warning/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Ensure that the warning for a given message is logged only once.
+
 ## 2.1.0 (2021-05-20)
 
 ## 2.0.0 (2021-05-14)

packages/warning/src/index.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { logged } from './utils';
+
 function isDev() {
 	return (
 		typeof process !== 'undefined' &&
@@ -28,6 +33,11 @@ export default function warning( message ) {
 		return;
 	}
 
+	// Skip if already logged.
+	if ( message in logged ) {
+		return;
+	}
+
 	// eslint-disable-next-line no-console
 	console.warn( message );
 
@@ -39,4 +49,6 @@ export default function warning( message ) {
 	} catch ( x ) {
 		// do nothing
 	}
+
+	logged[ message ] = true;
 }

packages/warning/src/test/index.js

@@ -2,12 +2,16 @@
  * Internal dependencies
  */
 import warning from '..';
+import { logged } from '../utils';
 
 const initialNodeEnv = process.env.NODE_ENV;
 
 describe( 'warning', () => {
 	afterEach( () => {
 		process.env.NODE_ENV = initialNodeEnv;
+		for ( const key in logged ) {
+			delete logged[ key ];
+		}
 	} );
 
 	it( 'logs to console.warn when NODE_ENV is not "production"', () => {
@@ -21,4 +25,13 @@ describe( 'warning', () => {
 		warning( 'warning' );
 		expect( console ).not.toHaveWarned();
 	} );
+
+	it( 'should show a message once', () => {
+		warning( 'warning' );
+		warning( 'warning' );
+
+		expect( console ).toHaveWarned();
+		// eslint-disable-next-line no-console
+		expect( console.warn ).toHaveBeenCalledTimes( 1 );
+	} );
 } );

packages/warning/src/utils.js

@@ -0,0 +1,7 @@
+/**
+ * Object map tracking messages which have been logged, for use in ensuring a
+ * message is only logged once.
+ *
+ * @type {Record<string, true | undefined>}
+ */
+export const logged = Object.create( null );