Editor: Create own sub-registry in default EditorProvider use (#15989)

packages/block-editor/README.md

@@ -375,6 +375,18 @@ The default editor settings
 
 Undocumented declaration.
 
+<a name="storeConfig" href="#storeConfig">#</a> **storeConfig**
+
+Block editor data store configuration.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#registerStore>
+
+_Type_
+
+-   `Object` 
+
 <a name="URLInput" href="#URLInput">#</a> **URLInput**
 
 _Related_

packages/block-editor/src/index.js

@@ -14,5 +14,5 @@ import './hooks';
 
 export * from './components';
 export * from './utils';
-
+export { storeConfig } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';

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

@@ -17,6 +17,13 @@ import controls from './controls';
  */
 const MODULE_KEY = 'core/block-editor';
 
+/**
+ * Block editor data store configuration.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#registerStore
+ *
+ * @type {Object}
+ */
 export const storeConfig = {
 	reducer,
 	selectors,

packages/edit-post/src/editor.js

@@ -91,6 +91,7 @@ class Editor extends Component {
 					settings={ editorSettings }
 					post={ post }
 					initialEdits={ initialEdits }
+					useSubRegistry={ false }
 					{ ...props }
 				>
 					<ErrorBoundary onError={ onError }>

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

@@ -19,6 +19,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
+import withRegistryProvider from './with-registry-provider';
 import { mediaUpload } from '../../utils';
 import ReusableBlocksButtons from '../reusable-blocks-buttons';
 import ConvertToGroupButtons from '../convert-to-group-buttons';
@@ -167,6 +168,7 @@ class EditorProvider extends Component {
 }
 
 export default compose( [
+	withRegistryProvider,
 	withSelect( ( select ) => {
 		const {
 			__unstableIsEditorReady: isEditorReady,

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

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { withRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { storeConfig } from '../../store';
+import applyMiddlewares from '../../store/middlewares';
+
+const withRegistryProvider = createHigherOrderComponent(
+	( WrappedComponent ) => withRegistry( ( props ) => {
+		const { useSubRegistry = true, registry, ...additionalProps } = props;
+		if ( ! useSubRegistry ) {
+			return <WrappedComponent { ...additionalProps } />;
+		}
+
+		const [ subRegistry, setSubRegistry ] = useState( null );
+		useEffect( () => {
+			const newRegistry = createRegistry( {
+				'core/block-editor': blockEditorStoreConfig,
+			}, registry );
+			const store = newRegistry.registerStore( 'core/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 { ...additionalProps } />
+			</RegistryProvider>
+		);
+	} ),
+	'withRegistryProvider'
+);
+
+export default withRegistryProvider;

packages/editor/src/index.js

@@ -17,6 +17,7 @@ import './hooks';
 
 export * from './components';
 export * from './utils';
+export { storeConfig } from './store';
 
 /*
  * Backward compatibility

packages/editor/src/store/index.js

@@ -13,11 +13,22 @@ import * as selectors from './selectors';
 import * as actions from './actions';
 import { STORE_KEY } from './constants';
 
-const store = registerStore( STORE_KEY, {
+/**
+ * Post editor data store configuration.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#registerStore
+ *
+ * @type {Object}
+ */
+export const storeConfig = {
 	reducer,
 	selectors,
 	actions,
 	controls,
+};
+
+const store = registerStore( STORE_KEY, {
+	...storeConfig,
 	persist: [ 'preferences' ],
 } );
 applyMiddlewares( store );