From 0dac41d458142da2f0c7a87714e4daa9dedbb6b7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 28 Mar 2019 10:24:27 +0100 Subject: [PATCH 1/3] Automatically use a subregistry when using the block editor provider --- .../src/components/provider/index.js | 9 +++- .../provider/with-registry-provider.js | 44 +++++++++++++++++++ packages/block-editor/src/store/index.js | 6 ++- .../editor/src/components/provider/index.js | 1 + 4 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 packages/block-editor/src/components/provider/with-registry-provider.js 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..b8fc551440ad9 --- /dev/null +++ b/packages/block-editor/src/components/provider/with-registry-provider.js @@ -0,0 +1,44 @@ +/** + * 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 } ) => { + // Disable reason, this rule conflicts with the React hooks rule (no conditionals) + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const [ subRegistry, updateRegistry ] = useState( null ); + + if ( ! useSubRegistry ) { + return ; + } + + 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 ); + updateRegistry( 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 } From 92bd78bbc4a668272198930862b26d52d1577c48 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 28 Mar 2019 12:37:01 +0100 Subject: [PATCH 2/3] Defer the hooks usage --- .../src/components/provider/with-registry-provider.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/provider/with-registry-provider.js b/packages/block-editor/src/components/provider/with-registry-provider.js index b8fc551440ad9..f0a4f7a3894d5 100644 --- a/packages/block-editor/src/components/provider/with-registry-provider.js +++ b/packages/block-editor/src/components/provider/with-registry-provider.js @@ -13,14 +13,11 @@ import applyMiddlewares from '../../store/middlewares'; const withRegistryProvider = createHigherOrderComponent( ( WrappedComponent ) => { return withRegistry( ( { useSubRegistry = true, registry, ...props } ) => { - // Disable reason, this rule conflicts with the React hooks rule (no conditionals) - // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const [ subRegistry, updateRegistry ] = useState( null ); - if ( ! useSubRegistry ) { return ; } + const [ subRegistry, updateRegistry ] = useState( null ); useEffect( () => { const newRegistry = createRegistry( {}, registry ); const store = newRegistry.registerStore( 'core/block-editor', storeConfig ); From 4cb7c09fa918d3076a2578eea8865d999d60f0d1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 29 Mar 2019 08:55:13 +0100 Subject: [PATCH 3/3] set sub registry instead of update registry --- .../src/components/provider/with-registry-provider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/provider/with-registry-provider.js b/packages/block-editor/src/components/provider/with-registry-provider.js index f0a4f7a3894d5..cdb3b7fe7b2de 100644 --- a/packages/block-editor/src/components/provider/with-registry-provider.js +++ b/packages/block-editor/src/components/provider/with-registry-provider.js @@ -17,13 +17,13 @@ const withRegistryProvider = createHigherOrderComponent( ( WrappedComponent ) => return ; } - const [ subRegistry, updateRegistry ] = useState( null ); + 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 ); - updateRegistry( newRegistry ); + setSubRegistry( newRegistry ); }, [ registry ] ); if ( ! subRegistry ) {