Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jun 10, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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_
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@ import './hooks';

export * from './components';
export * from './utils';

export { storeConfig } from './store';
export { SETTINGS_DEFAULTS } from './store/defaults';
7 changes: 7 additions & 0 deletions packages/block-editor/src/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ class Editor extends Component {
settings={ editorSettings }
post={ post }
initialEdits={ initialEdits }
useSubRegistry={ false }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel this prop should be passed down from editor/provider to block-editor/provider as well right (unless we access the block-editor store from the editor components (which we probably do on a second thought but maybe we shouldn't) ?

Copy link
Member Author

@aduth aduth Jun 7, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel this prop should be passed down from editor/provider to block-editor/provider as well right (unless we access the block-editor store from the editor components (which we probably do on a second thought but maybe we shouldn't) ?

Right now we just explicitly pass false:

Which I think is how we want it to be:

  • If you wanted your own block editor with its own subregistry, you'd render BlockEditorProvider yourself
  • If you wanted your own post editor with its own subregistry, you'd render EditorProvider which would create a subregistry. The EditorProvider would pass useSubRegistry={ false } to its BlockEditorProvider, but that block editor still operates in the same subregistry as created for the EditorProvider

In the end, we get a flatter hierarchy of registries. For the main post editor, we still only have a single registry.

For what becomes of the embedded editor in #14715, there is a subregistry which is used both by the EditorProvider and its BlockEditorProvider.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, thanks for the explanation.

{ ...props }
>
<ErrorBoundary onError={ onError }>
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/components/provider/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -165,6 +166,7 @@ class EditorProvider extends Component {
}

export default compose( [
withRegistryProvider,
withSelect( ( select ) => {
const {
__unstableIsEditorReady: isEditorReady,
Expand Down
46 changes: 46 additions & 0 deletions packages/editor/src/components/provider/with-registry-provider.js
Original file line number Diff line number Diff line change
@@ -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(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like I already wrote this code before. Do you think there's value in exposing a generic version of this in the data module? (I'm on the fence personally)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like I already wrote this code before. Do you think there's value in exposing a generic version of this in the data module? (I'm on the fence personally)

It is identical to the one in block-editor, yes. I'm not sure either about making it generic. I'm not a huge fan of the fact we have to do a null return render, and I don't know that if that was possible to avoid, we'd be able to change it while maintaining the implementation as being a higher-order component. I was inclined to leave it for future consideration.

( 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;
1 change: 1 addition & 0 deletions packages/editor/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import './hooks';

export * from './components';
export * from './utils';
export { storeConfig } from './store';

/*
* Backward compatibility
Expand Down
13 changes: 12 additions & 1 deletion packages/editor/src/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down