Extensibility: Refactor hooks to make them reusable for editor and co…

…mponents

blocks/api/registration.js

@@ -8,12 +8,12 @@ import { get, isFunction, some } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { getCategories } from './categories';
+import { applyFilters } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
-import { applyFilters } from '../hooks';
+import { getCategories } from './categories';
 
 /**
  * Block settings keyed by block name.

blocks/api/serializer.js

@@ -9,12 +9,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Component, createElement, renderToString, cloneElement, Children } from '@wordpress/element';
+import { applyFilters } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import { getBlockType, getUnknownTypeHandlerName } from './registration';
-import { applyFilters } from '../hooks';
 
 /**
  * Returns the block's default classname from its name

blocks/api/test/factory.js

@@ -21,6 +21,11 @@ describe( 'block factory', () => {
 		title: 'block title',
 	};
 
+	beforeAll( () => {
+		// Load all hooks that modify blocks
+		require( 'blocks/hooks' );
+	} );
+
 	afterEach( () => {
 		setUnknownTypeHandlerName( undefined );
 		getBlockTypes().forEach( ( block ) => {

blocks/api/test/registration.js

@@ -24,6 +24,11 @@ describe( 'blocks', () => {
 	const error = console.error;
 	const defaultBlockSettings = { save: noop, category: 'common', title: 'block title' };
 
+	beforeAll( () => {
+		// Load all hooks that modify blocks
+		require( 'blocks/hooks' );
+	} );
+
 	// Reset block state before each test.
 	beforeEach( () => {
 		console.error = jest.fn();

blocks/api/test/serializer.js

@@ -24,6 +24,11 @@ import {
 import { createBlock } from '../';
 
 describe( 'block serializer', () => {
+	beforeAll( () => {
+		// Load all hooks that modify blocks
+		require( 'blocks/hooks' );
+	} );
+
 	afterEach( () => {
 		setUnknownTypeHandlerName( undefined );
 		getBlockTypes().forEach( block => {

blocks/block-edit/index.js

@@ -1,8 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/utils';
+
 /**
  * Internal dependencies
  */
 import { getBlockType } from '../api';
-import { applyFilters } from '../hooks';
 
 function BlockEdit( props ) {
 	const { name, ...editProps } = props;
@@ -15,10 +19,7 @@ function BlockEdit( props ) {
 	// `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;
-	}
+	const Edit = blockType.edit || blockType.save;
 
 	return applyFilters( 'BlockEdit', <Edit key="edit" { ...editProps } />, props );
 }

blocks/hooks/index.js

@@ -1,49 +1,15 @@
 /**
  * WordPress dependencies
  */
-import createHooks from '@wordpress/hooks';
+import { addFilter } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import anchor from './anchor';
 import customClassName from './custom-class-name';
 
-const hooks = createHooks();
-
-const {
-	addAction,
-	addFilter,
-	removeAction,
-	removeFilter,
-	removeAllActions,
-	removeAllFilters,
-	doAction,
-	applyFilters,
-	doingAction,
-	doingFilter,
-	didAction,
-	didFilter,
-	hasAction,
-	hasFilter,
-} = hooks;
-
-export {
-	addAction,
-	addFilter,
-	removeAction,
-	removeFilter,
-	removeAllActions,
-	removeAllFilters,
-	doAction,
-	applyFilters,
-	doingAction,
-	doingFilter,
-	didAction,
-	didFilter,
-	hasAction,
-	hasFilter,
-};
+const hooks = { addFilter };
 
 anchor( hooks );
 customClassName( hooks );

blocks/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './hooks';
 import './library';
 
 // A "block" is the abstract term used to describe units of markup that,
@@ -13,7 +14,6 @@ import './library';
 // Blocks are inferred from the HTML source of a post through a parsing mechanism
 // and then stored as objects in state, from which it is then rendered for editing.
 export * from './api';
-export * from './hooks';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockControls } from './block-controls';

components/higher-order/with-filters/index.js

@@ -1,20 +1,17 @@
 /**
  * WordPress dependencies
  */
-import createHooks from '@wordpress/hooks';
+import { applyFilters } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import wrapperDisplayName from '../wrapper-display-name';
 
-// TODO: Use withHooks HOC from https://github.com/WordPress/gutenberg/pull/3321.
-const hooks = createHooks();
-
 export default function withFilters( hookName ) {
 	return ( WrappedComponent ) => {
 		const FiltersComponent = ( props ) => {
-			return hooks.applyFilters( hookName, <WrappedComponent { ...props } />, props );
+			return applyFilters( hookName, <WrappedComponent { ...props } />, props );
 		};
 		FiltersComponent.displayName = wrapperDisplayName( 'filters', WrappedComponent );
 

utils/hooks.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import createHooks from '@wordpress/hooks';
+
+const hooks = createHooks();
+
+const {
+	addAction,
+	addFilter,
+	removeAction,
+	removeFilter,
+	removeAllActions,
+	removeAllFilters,
+	doAction,
+	applyFilters,
+	doingAction,
+	doingFilter,
+	didAction,
+	didFilter,
+	hasAction,
+	hasFilter,
+} = hooks;
+
+export {
+	addAction,
+	addFilter,
+	removeAction,
+	removeFilter,
+	removeAllActions,
+	removeAllFilters,
+	doAction,
+	applyFilters,
+	doingAction,
+	doingFilter,
+	didAction,
+	didFilter,
+	hasAction,
+	hasFilter,
+};

utils/index.js

@@ -8,6 +8,7 @@ export { keycodes };
 export { decodeEntities };
 
 export * from './blob-cache';
+export * from './hooks';
 export * from './mediaupload';
 
 export { viewPort };