From c7ce65a4b74399d0155351a555c385b8f53b1197 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 17 Nov 2017 11:56:49 +0100 Subject: [PATCH] Extensibility: Refactor hooks to make them reusable for editor and components --- blocks/api/registration.js | 4 +- blocks/api/serializer.js | 2 +- blocks/api/test/factory.js | 5 +++ blocks/api/test/registration.js | 5 +++ blocks/api/test/serializer.js | 5 +++ blocks/block-edit/index.js | 11 ++--- blocks/hooks/index.js | 38 +----------------- blocks/index.js | 2 +- components/higher-order/with-filters/index.js | 7 +--- utils/hooks.js | 40 +++++++++++++++++++ utils/index.js | 1 + 11 files changed, 70 insertions(+), 50 deletions(-) create mode 100644 utils/hooks.js diff --git a/blocks/api/registration.js b/blocks/api/registration.js index cd7b5e546cad3e..e4a6314a0b5f46 100644 --- a/blocks/api/registration.js +++ b/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. diff --git a/blocks/api/serializer.js b/blocks/api/serializer.js index f3b9d8b436582d..e9c4e0a77036f7 100644 --- a/blocks/api/serializer.js +++ b/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 diff --git a/blocks/api/test/factory.js b/blocks/api/test/factory.js index f2df17e628e98b..da737cbbc0c5e5 100644 --- a/blocks/api/test/factory.js +++ b/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 ) => { diff --git a/blocks/api/test/registration.js b/blocks/api/test/registration.js index ba926661241585..9f1c85d7e3310a 100644 --- a/blocks/api/test/registration.js +++ b/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(); diff --git a/blocks/api/test/serializer.js b/blocks/api/test/serializer.js index d0f65d6eb6c41f..d4b7d088f307c2 100644 --- a/blocks/api/test/serializer.js +++ b/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 => { diff --git a/blocks/block-edit/index.js b/blocks/block-edit/index.js index 97362d85c13087..8678458c0e243a 100644 --- a/blocks/block-edit/index.js +++ b/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', , props ); } diff --git a/blocks/hooks/index.js b/blocks/hooks/index.js index e725627bd21c00..2a211bc2f89a35 100644 --- a/blocks/hooks/index.js +++ b/blocks/hooks/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import createHooks from '@wordpress/hooks'; +import { addFilter } from '@wordpress/utils'; /** * Internal dependencies @@ -9,41 +9,7 @@ import createHooks from '@wordpress/hooks'; 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 ); diff --git a/blocks/index.js b/blocks/index.js index ef56387023922d..1ecbda82a15eba 100644 --- a/blocks/index.js +++ b/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'; diff --git a/components/higher-order/with-filters/index.js b/components/higher-order/with-filters/index.js index 744e1df34ff8d4..c2635f57ad1587 100644 --- a/components/higher-order/with-filters/index.js +++ b/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, , props ); + return applyFilters( hookName, , props ); }; FiltersComponent.displayName = wrapperDisplayName( 'filters', WrappedComponent ); diff --git a/utils/hooks.js b/utils/hooks.js new file mode 100644 index 00000000000000..2d2162754f8d5c --- /dev/null +++ b/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, +}; diff --git a/utils/index.js b/utils/index.js index 5d2a52931f7c3e..53705f105ff9b6 100644 --- a/utils/index.js +++ b/utils/index.js @@ -8,6 +8,7 @@ export { keycodes }; export { decodeEntities }; export * from './blob-cache'; +export * from './hooks'; export * from './mediaupload'; export { viewPort };