diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js index fd788477a0d6d..f321b19dc1de8 100644 --- a/packages/block-editor/src/components/provider/index.js +++ b/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 ); diff --git a/packages/block-editor/src/components/provider/with-registry-provider.js b/packages/block-editor/src/components/provider/with-registry-provider.js new file mode 100644 index 0000000000000..cdb3b7fe7b2de --- /dev/null +++ b/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 ; + } + + 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 ( + + + + ); + } ); +}, 'withRegistryProvider' ); + +export default withRegistryProvider; diff --git a/packages/block-editor/src/store/index.js b/packages/block-editor/src/store/index.js index 0119e63d7a3d1..485238f46f606 100644 --- a/packages/block-editor/src/store/index.js +++ b/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 ); diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index ca1cbe0262686..54405f61247b8 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -154,6 +154,7 @@ class EditorProvider extends Component { onInput={ resetEditorBlocksWithoutUndoLevel } onChange={ resetEditorBlocks } settings={ editorSettings } + useSubRegistry={ false } > { children }