Try: Extensibility: Define anchor behavior as filtered blocks support

blocks/api/factory.js

@@ -46,11 +46,6 @@ export function createBlock( name, blockAttributes = {} ) {
 		return result;
 	}, {} );
 
-	// Keep the anchor if the block supports it
-	if ( blockType.supportAnchor && blockAttributes.anchor ) {
-		attributes.anchor = blockAttributes.anchor;
-	}
-
 	// Keep the className if the block supports it
 	if ( blockType.className !== false && blockAttributes.className ) {
 		attributes.className = blockAttributes.className;

blocks/api/index.js

@@ -19,4 +19,5 @@ export {
 	getDefaultBlockName,
 	getBlockType,
 	getBlockTypes,
+	hasBlockSupport,
 } from './registration';

blocks/api/parser.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { parse as hpqParse, attr } from 'hpq';
+import { parse as hpqParse } from 'hpq';
 import { mapValues, reduce, pickBy } from 'lodash';
 
 /**
@@ -148,11 +148,6 @@ export function getBlockAttributes( blockType, innerHTML, attributes ) {
 		return result;
 	}, {} );
 
-	// If the block supports anchor, parse the id
-	if ( blockType.supportAnchor ) {
-		blockAttributes.anchor = hpqParse( innerHTML, attr( '*', 'id' ) );
-	}
-
 	// If the block supports a custom className parse it
 	if ( blockType.className !== false && attributes && attributes.className ) {
 		blockAttributes.className = attributes.className;

blocks/api/registration.js

@@ -10,6 +10,11 @@ import { get, isFunction, some } from 'lodash';
  */
 import { getCategories } from './categories';
 
+/**
+ * Internal dependencies
+ */
+import { applyFilters } from '../hooks';
+
 /**
  * Block settings keyed by block name.
  *
@@ -113,13 +118,15 @@ export function registerBlockType( name, settings ) {
 	if ( ! settings.icon ) {
 		settings.icon = 'block-default';
 	}
-	const block = blocks[ name ] = {
+	settings = {
 		name,
 		attributes: get( window._wpBlocksAttributes, name ),
 		...settings,
 	};
 
-	return block;
+	settings = applyFilters( 'registerBlockType', settings, name );
+
+	return blocks[ name ] = settings;
 }
 
 /**
@@ -196,3 +203,23 @@ export function getBlockType( name ) {
 export function getBlockTypes() {
 	return Object.values( blocks );
 }
+
+/**
+ * Returns true if the block defines support for a feature, or false otherwise
+ *
+ * @param  {(String|Object)} nameOrType      Block name or type object
+ * @param  {String}          feature         Feature to test
+ * @param  {Boolean}         defaultSupports Whether feature is supported by
+ *                                           default if not explicitly defined
+ * @return {Boolean}                         Whether block supports feature
+ */
+export function hasBlockSupport( nameOrType, feature, defaultSupports ) {
+	const blockType = 'string' === typeof nameOrType ?
+		getBlockType( nameOrType ) :
+		nameOrType;
+
+	return !! get( blockType, [
+		'supports',
+		feature,
+	], defaultSupports );
+}

blocks/api/serializer.js

@@ -14,6 +14,7 @@ import { Component, createElement, renderToString, cloneElement, Children } from
  * Internal dependencies
  */
 import { getBlockType, getUnknownTypeHandlerName } from './registration';
+import { applyFilters } from '../hooks';
 
 /**
  * Returns the block's default classname from its name
@@ -55,7 +56,7 @@ export function getSaveContent( blockType, attributes ) {
 			return element;
 		}
 
-		const extraProps = {};
+		const extraProps = applyFilters( 'getSaveContent.extraProps', {}, blockType, attributes );
 		if ( !! className ) {
 			const updatedClassName = classnames(
 				className,
@@ -65,10 +66,6 @@ export function getSaveContent( blockType, attributes ) {
 			extraProps.className = updatedClassName;
 		}
 
-		if ( blockType.supportAnchor && attributes.anchor ) {
-			extraProps.id = attributes.anchor;
-		}
-
 		return cloneElement( element, extraProps );
 	};
 	const contentWithClassname = Children.map( saveContent, addAdvancedAttributes );

blocks/api/test/factory.js

@@ -57,30 +57,6 @@ describe( 'block factory', () => {
 			expect( typeof block.uid ).toBe( 'string' );
 		} );
 
-		it( 'should keep the anchor if the block supports it', () => {
-			registerBlockType( 'core/test-block', {
-				attributes: {
-					align: {
-						type: 'string',
-					},
-				},
-				save: noop,
-				category: 'common',
-				title: 'test block',
-				supportAnchor: true,
-			} );
-			const block = createBlock( 'core/test-block', {
-				align: 'left',
-				anchor: 'chicken',
-			} );
-
-			expect( block.attributes ).toEqual( {
-				anchor: 'chicken',
-				align: 'left',
-			} );
-			expect( block.isValid ).toBe( true );
-		} );
-
 		it( 'should keep the className if the block supports it', () => {
 			registerBlockType( 'core/test-block', {
 				attributes: {},

blocks/api/test/parser.js

@@ -157,26 +157,6 @@ describe( 'block parser', () => {
 			} );
 		} );
 
-		it( 'should parse the anchor if the block supports it', () => {
-			const blockType = {
-				attributes: {
-					content: {
-						type: 'string',
-						source: text( 'div' ),
-					},
-				},
-				supportAnchor: true,
-			};
-
-			const innerHTML = '<div id="chicken">Ribs</div>';
-			const attrs = {};
-
-			expect( getBlockAttributes( blockType, innerHTML, attrs ) ).toEqual( {
-				content: 'Ribs',
-				anchor: 'chicken',
-			} );
-		} );
-
 		it( 'should parse the className if the block supports it', () => {
 			const blockType = {
 				attributes: {},

blocks/api/test/registration.js

@@ -17,6 +17,7 @@ import {
 	getDefaultBlockName,
 	getBlockType,
 	getBlockTypes,
+	hasBlockSupport,
 } from '../registration';
 
 describe( 'blocks', () => {
@@ -272,4 +273,67 @@ describe( 'blocks', () => {
 			] );
 		} );
 	} );
+
+	describe( 'hasBlockSupport', () => {
+		it( 'should return false if block has no supports', () => {
+			registerBlockType( 'core/test-block', defaultBlockSettings );
+
+			expect( hasBlockSupport( 'core/test-block', 'foo' ) ).toBe( false );
+		} );
+
+		it( 'should return false if block does not define support by name', () => {
+			registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				supports: {
+					bar: true,
+				},
+			} );
+
+			expect( hasBlockSupport( 'core/test-block', 'foo' ) ).toBe( false );
+		} );
+
+		it( 'should return custom default supports if block does not define support by name', () => {
+			registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				supports: {
+					bar: true,
+				},
+			} );
+
+			expect( hasBlockSupport( 'core/test-block', 'foo', true ) ).toBe( true );
+		} );
+
+		it( 'should return true if block type supports', () => {
+			registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				supports: {
+					foo: true,
+				},
+			} );
+
+			expect( hasBlockSupport( 'core/test-block', 'foo' ) ).toBe( true );
+		} );
+
+		it( 'should return true if block author defines unsupported but truthy value', () => {
+			registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				supports: {
+					foo: 'hmmm',
+				},
+			} );
+
+			expect( hasBlockSupport( 'core/test-block', 'foo' ) ).toBe( true );
+		} );
+
+		it( 'should handle block settings object as argument to test', () => {
+			const settings = {
+				...defaultBlockSettings,
+				supports: {
+					foo: true,
+				},
+			};
+
+			expect( hasBlockSupport( settings, 'foo' ) ).toBe( true );
+		} );
+	} );
 } );

blocks/api/test/serializer.js

@@ -121,20 +121,6 @@ describe( 'block serializer', () => {
 
 				expect( saved ).toBe( '<div>Bananas</div>' );
 			} );
-
-			it( 'should add an id if the block supports anchors', () => {
-				const saved = getSaveContent(
-					{
-						save: ( { attributes } ) => createElement( 'div', null, attributes.fruit ),
-						supportAnchor: true,
-						name: 'myplugin/fruit',
-						className: false,
-					},
-					{ fruit: 'Bananas', anchor: 'my-fruit' }
-				);
-
-				expect( saved ).toBe( '<div id="my-fruit">Bananas</div>' );
-			} );
 		} );
 
 		describe( 'component save', () => {

blocks/block-edit/index.js

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import { getBlockType } from '../api';
+import { applyFilters } from '../hooks';
+
+function BlockEdit( props ) {
+	const { name, ...editProps } = props;
+	const blockType = getBlockType( name );
+
+	if ( ! blockType ) {
+		return null;
+	}
+
+	// `edit` and `save` are functions or components describing the markup
+	// with which a block is displayed. If `blockType` is valid, assign
+	// them preferencially as the render value for the block.
+	let Edit;
+	if ( blockType ) {
+		Edit = blockType.edit || blockType.save;
+	}
+
+	return applyFilters( 'BlockEdit', <Edit { ...editProps } />, props );
+}
+
+export default BlockEdit;

blocks/block-edit/test/index.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import BlockEdit from '../';
+import {
+	registerBlockType,
+	unregisterBlockType,
+	getBlockTypes,
+} from '../../api';
+
+describe( 'BlockEdit', () => {
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'should return null if block type not defined', () => {
+		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
+
+		expect( wrapper.type() ).toBe( null );
+	} );
+
+	it( 'should use edit implementation of block', () => {
+		const edit = () => <div />;
+		registerBlockType( 'core/test-block', {
+			save: noop,
+			category: 'common',
+			title: 'block title',
+			edit,
+		} );
+
+		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
+
+		expect( wrapper.type() ).toBe( edit );
+	} );
+
+	it( 'should use save implementation of block as fallback', () => {
+		const save = () => <div />;
+		registerBlockType( 'core/test-block', {
+			save,
+			category: 'common',
+			title: 'block title',
+		} );
+
+		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
+
+		expect( wrapper.type() ).toBe( save );
+	} );
+} );