Merge pull request #5728 from WordPress/add/create-hoc

Element: Provide createHigherOrderComponent helper
WordPress · Apr 3, 2018 · 41fa06a · 41fa06a
2 parents 096ecec + 1614ae2
commit 41fa06a
Show file tree

Hide file tree

Showing 16 changed files with 134 additions and 122 deletions.
diff --git a/blocks/hooks/align.js b/blocks/hooks/align.js
@@ -7,7 +7,7 @@ import { assign, includes } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { getWrapperDisplayName } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import BlockControls from '../block-controls';
 import BlockAlignmentToolbar from '../block-alignment-toolbar';
@@ -71,8 +71,8 @@ export function getBlockValidAlignments( blockName ) {
  * @param  {Function} BlockEdit Original component
  * @return {Function}           Wrapped component
  */
-export function withToolbarControls( BlockEdit ) {
-	const WrappedBlockEdit = ( props ) => {
+export const withToolbarControls = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
 		const validAlignments = getBlockValidAlignments( props.name );
 
 		const updateAlignment = ( nextAlign ) => props.setAttributes( { align: nextAlign } );
@@ -90,19 +90,16 @@ export function withToolbarControls( BlockEdit ) {
 			<BlockEdit key="edit" { ...props } />,
 		];
 	};
-	WrappedBlockEdit.displayName = getWrapperDisplayName( BlockEdit, 'align' );
-
-	return WrappedBlockEdit;
-}
+}, 'withToolbarControls' );
 
 /**
  * Override the default block element to add alignment wrapper props.
  *
  * @param  {Function} BlockListBlock Original component
  * @return {Function}                Wrapped component
  */
-export function withAlign( BlockListBlock ) {
-	const WrappedComponent = ( props ) => {
+export const withAlign = createHigherOrderComponent( ( BlockListBlock ) => {
+	return ( props ) => {
 		const { align } = props.block.attributes;
 		const validAlignments = getBlockValidAlignments( props.block.name );
 
@@ -113,11 +110,7 @@ export function withAlign( BlockListBlock ) {
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
 	};
-
-	WrappedComponent.displayName = getWrapperDisplayName( BlockListBlock, 'align' );
-
-	return WrappedComponent;
-}
+}, 'withAlign' );
 
 /**
  * Override props assigned to save component to inject alignment class name if

diff --git a/blocks/hooks/anchor.js b/blocks/hooks/anchor.js
@@ -6,7 +6,7 @@ import { assign } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { getWrapperDisplayName } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -56,8 +56,8 @@ export function addAttribute( settings ) {
  *
  * @return {string} Wrapped component.
  */
-export function withInspectorControl( BlockEdit ) {
-	const WrappedBlockEdit = ( props ) => {
+export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
 		const hasAnchor = hasBlockSupport( props.name, 'anchor' ) && props.isSelected;
 		return [
 			<BlockEdit key="block-edit-anchor" { ...props } />,
@@ -75,10 +75,7 @@ export function withInspectorControl( BlockEdit ) {
 			</InspectorControls>,
 		];
 	};
-	WrappedBlockEdit.displayName = getWrapperDisplayName( BlockEdit, 'anchor' );
-
-	return WrappedBlockEdit;
-}
+}, 'withInspectorControl' );
 
 /**
  * Override props assigned to save component to inject anchor ID, if block

diff --git a/blocks/hooks/custom-class-name.js b/blocks/hooks/custom-class-name.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getWrapperDisplayName } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -47,8 +47,8 @@ export function addAttribute( settings ) {
  *
  * @return {string} Wrapped component.
  */
-export function withInspectorControl( BlockEdit ) {
-	const WrappedBlockEdit = ( props ) => {
+export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
 		const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true ) && props.isSelected;
 
 		return [
@@ -66,10 +66,7 @@ export function withInspectorControl( BlockEdit ) {
 			</InspectorControls>,
 		];
 	};
-	WrappedBlockEdit.displayName = getWrapperDisplayName( BlockEdit, 'customClassName' );
-
-	return WrappedBlockEdit;
-}
+}, 'withInspectorControl' );
 
 /**
  * Override props assigned to save component to inject anchor ID, if block

diff --git a/components/higher-order/if-condition/index.js b/components/higher-order/if-condition/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { getWrapperDisplayName } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/element';
 
 /**
  * Higher-order component creator, creating a new component which renders if
@@ -11,18 +11,15 @@ import { getWrapperDisplayName } from '@wordpress/element';
  *
  * @return {Function} Higher-order component.
  */
-const ifCondition = ( predicate ) => ( WrappedComponent ) => {
-	const EnhancedComponent = ( props ) => {
+const ifCondition = ( predicate ) => createHigherOrderComponent(
+	( WrappedComponent ) => ( props ) => {
 		if ( ! predicate( props ) ) {
 			return null;
 		}
 
 		return <WrappedComponent { ...props } />;
-	};
-
-	EnhancedComponent.displayName = getWrapperDisplayName( WrappedComponent, 'ifCondition' );
-
-	return EnhancedComponent;
-};
+	},
+	'ifCondition'
+);
 
 export default ifCondition;
diff --git a/components/higher-order/with-api-data/index.js b/components/higher-order/with-api-data/index.js
@@ -6,15 +6,15 @@ import { mapValues, reduce, forEach, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, getWrapperDisplayName } from '@wordpress/element';
+import { Component, createHigherOrderComponent } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import request, { getCachedResponse } from './request';
 import { getRoute } from './routes';
 
-export default ( mapPropsToData ) => ( WrappedComponent ) => {
+export default ( mapPropsToData ) => createHigherOrderComponent( ( WrappedComponent ) => {
 	class APIDataComponent extends Component {
 		constructor( props, context ) {
 			super( ...arguments );
@@ -221,13 +221,11 @@ export default ( mapPropsToData ) => ( WrappedComponent ) => {
 		}
 	}
 
-	APIDataComponent.displayName = getWrapperDisplayName( WrappedComponent, 'apiData' );
-
 	APIDataComponent.contextTypes = {
 		getAPISchema: noop,
 		getAPIPostTypeRestBaseMapping: noop,
 		getAPITaxonomyRestBaseMapping: noop,
 	};
 
 	return APIDataComponent;
-};
+}, 'withAPIData' );
diff --git a/components/higher-order/with-filters/index.js b/components/higher-order/with-filters/index.js
@@ -6,7 +6,7 @@ import { debounce, uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, getWrapperDisplayName } from '@wordpress/element';
+import { Component, createHigherOrderComponent } from '@wordpress/element';
 import { addAction, applyFilters, removeAction } from '@wordpress/hooks';
 
 const ANIMATION_FRAME_PERIOD = 16;
@@ -22,8 +22,8 @@ const ANIMATION_FRAME_PERIOD = 16;
  * @return {Function} Higher-order component factory.
  */
 export default function withFilters( hookName ) {
-	return ( OriginalComponent ) => {
-		class FilteredComponent extends Component {
+	return createHigherOrderComponent( ( OriginalComponent ) => {
+		return class FilteredComponent extends Component {
 			/** @inheritdoc */
 			constructor( props ) {
 				super( props );
@@ -62,9 +62,6 @@ export default function withFilters( hookName ) {
 			render() {
 				return <this.Component { ...this.props } />;
 			}
-		}
-		FilteredComponent.displayName = getWrapperDisplayName( OriginalComponent, 'filters' );
-
-		return FilteredComponent;
-	};
+		};
+	}, 'withFilters' );
 }
diff --git a/components/higher-order/with-state/index.js b/components/higher-order/with-state/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Component, getWrapperDisplayName } from '@wordpress/element';
+import { Component, createHigherOrderComponent } from '@wordpress/element';
 
 /**
  * A Higher Order Component used to provide and manage internal component state
@@ -11,9 +11,9 @@ import { Component, getWrapperDisplayName } from '@wordpress/element';
  *
  * @return {Component} Wrapped component.
  */
-function withState( initialState = {} ) {
-	return ( OriginalComponent ) => {
-		class WrappedComponent extends Component {
+export default function withState( initialState = {} ) {
+	return createHigherOrderComponent( ( OriginalComponent ) => {
+		return class WrappedComponent extends Component {
 			constructor() {
 				super( ...arguments );
 
@@ -31,12 +31,6 @@ function withState( initialState = {} ) {
 					/>
 				);
 			}
-		}
-
-		WrappedComponent.displayName = getWrapperDisplayName( WrappedComponent, 'state' );
-
-		return WrappedComponent;
-	};
+		};
+	} );
 }
-
-export default withState;
diff --git a/data/index.js b/data/index.js
@@ -9,7 +9,7 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { Component, getWrapperDisplayName } from '@wordpress/element';
+import { Component, createHigherOrderComponent } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -231,8 +231,8 @@ export function dispatch( reducerKey ) {
  *
  * @return {Component} Enhanced component with merged state data props.
  */
-export const withSelect = ( mapStateToProps ) => ( WrappedComponent ) => {
-	class ComponentWithSelect extends Component {
+export const withSelect = ( mapStateToProps ) => createHigherOrderComponent( ( WrappedComponent ) => {
+	return class ComponentWithSelect extends Component {
 		constructor() {
 			super( ...arguments );
 
@@ -286,12 +286,8 @@ export const withSelect = ( mapStateToProps ) => ( WrappedComponent ) => {
 		render() {
 			return <WrappedComponent { ...this.props } { ...this.state.mergeProps } />;
 		}
-	}
-
-	ComponentWithSelect.displayName = getWrapperDisplayName( WrappedComponent, 'select' );
-
-	return ComponentWithSelect;
-};
+	};
+}, 'withSelect' );
 
 /**
  * Higher-order component used to add dispatch props using registered action
@@ -305,8 +301,8 @@ export const withSelect = ( mapStateToProps ) => ( WrappedComponent ) => {
  *
  * @return {Component} Enhanced component with merged dispatcher props.
  */
-export const withDispatch = ( mapDispatchToProps ) => ( WrappedComponent ) => {
-	class ComponentWithDispatch extends Component {
+export const withDispatch = ( mapDispatchToProps ) => createHigherOrderComponent( ( WrappedComponent ) => {
+	return class ComponentWithDispatch extends Component {
 		constructor() {
 			super( ...arguments );
 
@@ -345,12 +341,8 @@ export const withDispatch = ( mapDispatchToProps ) => ( WrappedComponent ) => {
 		render() {
 			return <WrappedComponent { ...this.props } { ...this.proxyProps } />;
 		}
-	}
-
-	ComponentWithDispatch.displayName = getWrapperDisplayName( WrappedComponent, 'dispatch' );
-
-	return ComponentWithDispatch;
-};
+	};
+}, 'withDispatch' );
 
 /**
  * Returns true if the given argument appears to be a dispatchable action.

diff --git a/docs/deprecated.md b/docs/deprecated.md
@@ -1,5 +1,9 @@
 Gutenberg's deprecation policy is intended to support backwards-compatibility for two minor releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version.
 
+## 2.7.0
+
+- `wp.element.getWrapperDisplayName` function removed. Please use `wp.element.createHigherOrderComponent` instead.
+
 ## 2.6.0
 
  - `wp.blocks.getBlockDefaultClassname` function removed. Please use `wp.blocks.getBlockDefaultClassName` instead.

diff --git a/edit-post/hooks/validate-use-once/index.js b/edit-post/hooks/validate-use-once/index.js
@@ -10,7 +10,7 @@ import { createBlock, getBlockType, findTransform, getBlockTransforms } from '@w
 import { Button } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { Warning } from '@wordpress/editor';
-import { compose, getWrapperDisplayName } from '@wordpress/element';
+import { compose, createHigherOrderComponent } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 
@@ -49,8 +49,8 @@ const enhance = compose(
 	} ) ),
 );
 
-function withUseOnceValidation( BlockEdit ) {
-	const WrappedBlockEdit = ( {
+const withUseOnceValidation = createHigherOrderComponent( ( BlockEdit ) => {
+	return enhance( ( {
 		originalBlockUid,
 		selectFirst,
 		...props
@@ -93,12 +93,8 @@ function withUseOnceValidation( BlockEdit ) {
 				{ __( 'This block may not be used more than once.' ) }
 			</Warning>,
 		];
-	};
-
-	WrappedBlockEdit.displayName = getWrapperDisplayName( BlockEdit, 'useOnceValidation' );
-
-	return enhance( WrappedBlockEdit );
-}
+	} );
+}, 'withUseOnceValidation' );
 
 /**
  * Given a base block name, returns the default block type to which to offer

diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -36,7 +36,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     value="Write your story"
   />
   <WrappedComponent />
-  <Select(Dispatch(WrappedComponent))
+  <WithSelect(WithDispatch(WrappedComponent))
     position="top right"
   />
 </div>
@@ -60,7 +60,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     value="Write your story"
   />
   <WrappedComponent />
-  <Select(Dispatch(WrappedComponent))
+  <WithSelect(WithDispatch(WrappedComponent))
     position="top right"
   />
 </div>
@@ -84,7 +84,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
     value=""
   />
   <WrappedComponent />
-  <Select(Dispatch(WrappedComponent))
+  <WithSelect(WithDispatch(WrappedComponent))
     position="top right"
   />
 </div>