Extensibility: Defer applying filters for component until it is about…

… to be mounted (#4002)

blocks/block-edit/index.js

@@ -8,7 +8,7 @@ import { withFilters } from '@wordpress/components';
  */
 import { getBlockType } from '../api';
 
-function BlockEdit( props ) {
+export function BlockEdit( props ) {
 	const { name, ...editProps } = props;
 	const blockType = getBlockType( name );
 

blocks/block-edit/test/index.js

@@ -7,7 +7,7 @@ import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
-import BlockEdit from '../';
+import { BlockEdit } from '../';
 import {
 	registerBlockType,
 	unregisterBlockType,

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

@@ -1,16 +1,30 @@
 /**
  * WordPress dependencies
  */
+import { Component, getWrapperDisplayName } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Creates a higher-order component which adds filtering capability to the wrapped component.
+ * Filters get applied when the original component is about to be mounted.
  *
  * @param {String} hookName Hook name exposed to be used by filters.
- * @return {Function}      Higher-order component factory.
+ * @return {Function}       Higher-order component factory.
  */
 export default function withFilters( hookName ) {
 	return ( OriginalComponent ) => {
-		return applyFilters( hookName, OriginalComponent );
+		class FilteredComponent extends Component {
+			constructor( props ) {
+				super( props );
+				this.Component = applyFilters( hookName, OriginalComponent );
+			}
+
+			render() {
+				return <this.Component { ...this.props } />;
+			}
+		}
+		FilteredComponent.displayName = getWrapperDisplayName( OriginalComponent, 'filters' );
+
+		return FilteredComponent;
 	};
 }