Automatically use a subregistry when using the block editor provider (#…

…14678)

packages/block-editor/src/components/provider/index.js

@@ -3,9 +3,14 @@
  */
 import { Component } from '@wordpress/element';
 import { DropZoneProvider, SlotFillProvider } from '@wordpress/components';
-import { withDispatch, withRegistry } from '@wordpress/data';
+import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import withRegistryProvider from './with-registry-provider';
+
 class BlockEditorProvider extends Component {
 	componentDidMount() {
 		this.props.updateSettings( this.props.settings );
@@ -115,6 +120,7 @@ class BlockEditorProvider extends Component {
 }
 
 export default compose( [
+	withRegistryProvider,
 	withDispatch( ( dispatch ) => {
 		const {
 			updateSettings,
@@ -126,5 +132,4 @@ export default compose( [
 			resetBlocks,
 		};
 	} ),
-	withRegistry,
 ] )( BlockEditorProvider );

packages/block-editor/src/components/provider/with-registry-provider.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { withRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { storeConfig } from '../../store';
+import applyMiddlewares from '../../store/middlewares';
+
+const withRegistryProvider = createHigherOrderComponent( ( WrappedComponent ) => {
+	return withRegistry( ( { useSubRegistry = true, registry, ...props } ) => {
+		if ( ! useSubRegistry ) {
+			return <WrappedComponent registry={ registry } { ...props } />;
+		}
+
+		const [ subRegistry, setSubRegistry ] = useState( null );
+		useEffect( () => {
+			const newRegistry = createRegistry( {}, registry );
+			const store = newRegistry.registerStore( 'core/block-editor', storeConfig );
+			// This should be removed after the refactoring of the effects to controls.
+			applyMiddlewares( store );
+			setSubRegistry( newRegistry );
+		}, [ registry ] );
+
+		if ( ! subRegistry ) {
+			return null;
+		}
+
+		return (
+			<RegistryProvider value={ subRegistry }>
+				<WrappedComponent registry={ subRegistry } { ...props } />
+			</RegistryProvider>
+		);
+	} );
+}, 'withRegistryProvider' );
+
+export default withRegistryProvider;

packages/block-editor/src/store/index.js

@@ -17,11 +17,15 @@ import controls from './controls';
  */
 const MODULE_KEY = 'core/block-editor';
 
-const store = registerStore( MODULE_KEY, {
+export const storeConfig = {
 	reducer,
 	selectors,
 	actions,
 	controls,
+};
+
+const store = registerStore( MODULE_KEY, {
+	...storeConfig,
 	persist: [ 'preferences' ],
 } );
 applyMiddlewares( store );

packages/editor/src/components/provider/index.js

@@ -154,6 +154,7 @@ class EditorProvider extends Component {
 				onInput={ resetEditorBlocksWithoutUndoLevel }
 				onChange={ resetEditorBlocks }
 				settings={ editorSettings }
+				useSubRegistry={ false }
 			>
 				{ children }
 				<ReusableBlocksButtons />