Block API: Ensure backwards compatibility for block matchers

blocks/api/index.js

@@ -15,3 +15,4 @@ export {
 	getBlockTypes,
 	hasBlockSupport,
 } from './registration';
+

blocks/api/parser.js

@@ -12,7 +12,7 @@ import { getBlockType, getUnknownTypeHandlerName } from './registration';
 import { createBlock } from './factory';
 import { isValidBlock } from './validation';
 import { getCommentDelimitedContent } from './serializer';
-import { attr, prop, html, text, query, node, children } from './source';
+import { attr, prop, html, text, query, node, children } from './matchers';
 
 /**
  * Returns value coerced to the specified JSON schema type string

blocks/api/test/source.js → blocks/api/test/matchers.js

@@ -11,9 +11,9 @@ import { renderToString } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import * as sources from '../source';
+import * as sources from '../matchers';
 
-describe( 'sources', () => {
+describe( 'matchers', () => {
 	describe( 'children()', () => {
 		it( 'should return a source function', () => {
 			const source = sources.children();

blocks/hooks/index.js

@@ -8,6 +8,7 @@ import createHooks from '@wordpress/hooks';
  */
 import anchor from './anchor';
 import customClassName from './custom-class-name';
+import matchers from './matchers';
 
 const hooks = createHooks();
 
@@ -47,3 +48,4 @@ export {
 
 anchor( hooks );
 customClassName( hooks );
+matchers( hooks );

blocks/hooks/matchers.js

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import { isFunction, mapValues } from 'lodash';
+
+function warnAboutDeprecatedMatcher() {
+	// eslint-disable-next-line no-console
+	console.warn(
+		'Attributes matchers are deprecated and they will be removed in a future version of Gutenberg. ' +
+		'Please update your attributes definition https://wordpress.org/gutenberg/handbook/reference/attributes/'
+	);
+}
+
+export const attr = ( selector, attribute ) => () => {
+	warnAboutDeprecatedMatcher();
+	return {
+		source: 'attribute',
+		attribute: attribute === undefined ? selector : attribute,
+		selector: attribute === undefined ? undefined : selector,
+	};
+};
+
+export const prop = ( selector, property ) => () => {
+	warnAboutDeprecatedMatcher();
+	return {
+		source: 'property',
+		property: property === undefined ? selector : property,
+		selector: property === undefined ? undefined : selector,
+	};
+};
+
+export const html = ( selector ) => () => {
+	warnAboutDeprecatedMatcher();
+	return {
+		source: 'html',
+		selector,
+	};
+};
+
+export const text = ( selector ) => () => {
+	warnAboutDeprecatedMatcher();
+	return {
+		source: 'text',
+		selector,
+	};
+};
+
+export const query = ( selector, subMatchers ) => () => {
+	warnAboutDeprecatedMatcher();
+	return {
+		source: 'query',
+		selector,
+		query: subMatchers,
+	};
+};
+
+export const children = ( selector ) => () => {
+	warnAboutDeprecatedMatcher();
+	return {
+		source: 'children',
+		selector,
+	};
+};
+
+export const node = ( selector ) => () => {
+	warnAboutDeprecatedMatcher();
+	return {
+		source: 'node',
+		selector,
+	};
+};
+
+/**
+ * Resolve the matchers attributes for backwards compatibilty
+ *
+ * @param  {Object} settings Original block settings
+ * @return {Object}          Filtered block settings
+ */
+export function resolveAttributes( settings ) {
+	// Resolve deprecated attributes
+	settings.attributes = mapValues( settings.attributes, ( attribute ) => {
+		if ( isFunction( attribute.source ) ) {
+			return {
+				...attribute,
+				...attribute.source(),
+			};
+		}
+		return attribute;
+	} );
+
+	return settings;
+}
+
+export default function anchor( { addFilter } ) {
+	addFilter( 'registerBlockType', 'core\matchers', resolveAttributes );
+}

blocks/index.js

@@ -27,3 +27,7 @@ export { default as InspectorControls } from './inspector-controls';
 export { default as MediaUploadButton } from './media-upload-button';
 export { default as UrlInput } from './url-input';
 export { default as UrlInputButton } from './url-input/button';
+
+// Deprecated matchers
+import { attr, prop, text, html, query, node, children } from './hooks/matchers';
+export const source = { attr, prop, text, html, query, node, children };

blocks/library/button/index.js

@@ -156,6 +156,7 @@ class ButtonBlock extends Component {
 			</span>,
 			focus && (
 				<form
+					key="form-link"
 					className="blocks-button__inline-link"
 					onSubmit={ ( event ) => event.preventDefault() }>
 					<Dashicon icon="admin-links" />