diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md
index 03929e3671685d..1aa1fb453bd775 100644
--- a/docs/designers-developers/developers/data/data-core-block-editor.md
+++ b/docs/designers-developers/developers/data/data-core-block-editor.md
@@ -763,6 +763,19 @@ via its `onChange` callback, in addition to `onInput`.
Whether the most recent block change was persistent.
+### __experimentalGetParsedReusableBlock
+
+Returns the parsed block saved as shared block with the given ID.
+
+*Parameters*
+
+ * state: Global application state.
+ * ref: The shared block's ID.
+
+*Returns*
+
+The parsed block.
+
## Actions
### resetBlocks
diff --git a/docs/designers-developers/developers/data/data-core-editor.md b/docs/designers-developers/developers/data/data-core-editor.md
index cd251dc92d6787..898cbd85660532 100644
--- a/docs/designers-developers/developers/data/data-core-editor.md
+++ b/docs/designers-developers/developers/data/data-core-editor.md
@@ -918,15 +918,15 @@ Returns an action object used to delete a reusable block via the REST API.
* id: The ID of the reusable block to delete.
-### __experimentalUpdateReusableBlockTitle
+### __experimentalUpdateReusableBlock
-Returns an action object used in signalling that a reusable block's title is
+Returns an action object used in signalling that a reusable block is
to be updated.
*Parameters*
* id: The ID of the reusable block to update.
- * title: The new title.
+ * changes: The changes to apply.
### __experimentalConvertBlockToStatic
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 1d1089561ed2a8..3013f3349545f9 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -18,127 +18,127 @@ _This package assumes that your code will run in an **ES2015+** environment. If
### AlignmentToolbar
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### Autocomplete
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockAlignmentToolbar
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockControls
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockEdit
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockEditorKeyboardShortcuts
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockEditorProvider
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockFormatControls
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockIcon
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockInspector
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockList
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockMover
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockNavigationDropdown
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockSelectionClearer
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockSettingsMenu
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockTitle
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### BlockToolbar
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### ColorPalette
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### ContrastChecker
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### CopyHandler
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### createCustomColorsHOC
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic
for class generation color value, retrieval and color attribute setting.
@@ -167,19 +167,19 @@ export default compose(
### DefaultBlockAppender
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### FontSizePicker
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### getColorClassName
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Returns a class based on the context a color is being used and its slug.
@@ -194,7 +194,7 @@ Returns a class based on the context a color is being used and its slug.
### getColorObjectByAttributeValues
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Provided an array of color objects as set by the theme or by the editor defaults,
and the values of the defined color or custom color returns a color object describing the color.
@@ -211,7 +211,7 @@ and the values of the defined color or custom color returns a color object descr
### getColorObjectByColorValue
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.
@@ -226,7 +226,7 @@ Provided an array of color objects as set by the theme or by the editor defaults
### getFontSize
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
@@ -243,7 +243,7 @@ Returns the font size object based on an array of named font sizes and the named
### getFontSizeClass
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Returns a class based on fontSizeName.
@@ -257,109 +257,109 @@ Returns a class based on fontSizeName.
### InnerBlocks
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### Inserter
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### InspectorAdvancedControls
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### InspectorControls
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### MediaPlaceholder
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### MediaUpload
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### MediaUploadCheck
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### MultiBlocksSwitcher
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### MultiSelectScrollIntoView
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### NavigableToolbar
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### ObserveTyping
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### PanelColorSettings
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### PlainText
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### PreserveScrollInReorder
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### RichText
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### RichTextShortcut
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### RichTextToolbarButton
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### SETTINGS_DEFAULTS
-[src/index.js#L17-L17](src/index.js#L17-L17)
+[src/index.js#L15-L15](src/index.js#L15-L15)
The default editor settings
@@ -382,49 +382,55 @@ The default editor settings
### SkipToSelectedBlock
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
+### storeConfig
+
+[src/index.js#L12-L12](src/index.js#L12-L12)
+
+Internal dependencies
+
### UnstableRichTextInputEvent
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### URLInput
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### URLInputButton
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### URLPopover
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### Warning
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### withColorContext
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### withColors
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.
@@ -449,7 +455,7 @@ export default compose(
### withFontSizes
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Higher-order component, which handles font size logic for class generation,
font size value retrieval, and font size change handling.
@@ -464,19 +470,19 @@ font size value retrieval, and font size change handling.
### WritingFlow
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### \_BlockSettingsMenuFirstItem
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
### \_BlockSettingsMenuPluginsExtension
-[src/index.js#L15-L15](src/index.js#L15-L15)
+[src/index.js#L14-L14](src/index.js#L14-L14)
Undocumented declaration.
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index fe526a2352a428..020db36827fc2a 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -9,9 +9,7 @@ import '@wordpress/viewport';
/**
* Internal dependencies
*/
-import './store';
+export { storeConfig } from './store';
import './hooks';
-
export * from './components';
-
export { SETTINGS_DEFAULTS } from './store/defaults';
diff --git a/packages/block-editor/src/store/index.js b/packages/block-editor/src/store/index.js
index 0119e63d7a3d16..485238f46f606d 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/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 1cbae5ea6ccdc5..8a21557a31e9ca 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -8,20 +8,48 @@ import { partial } from 'lodash';
*/
import { Component, Fragment } from '@wordpress/element';
import { Placeholder, Spinner, Disabled } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
+import {
+ withSelect,
+ withDispatch,
+ RegistryProvider,
+ RegistryConsumer,
+ createRegistry,
+} from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-import { BlockEditorProvider } from '@wordpress/block-editor';
-import { compose } from '@wordpress/compose';
+import { BlockEditorProvider, BlockList, storeConfig } from '@wordpress/block-editor';
+import { compose, createHigherOrderComponent } from '@wordpress/compose';
+import { parse, serialize } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import ReusableBlockEditPanel from './edit-panel';
import ReusableBlockIndicator from './indicator';
-import { parse, serialize } from 'path';
+
+/**
+ * Higher-order component which renders the original component with the current
+ * registry context passed as its `registry` prop.
+ *
+ * @param {WPComponent} OriginalComponent Original component.
+ *
+ * @return {WPComponent} Enhanced component.
+ */
+const withRegistry = createHigherOrderComponent(
+ ( OriginalComponent ) => ( props ) => (
+
+ { ( registry ) => (
+
+ ) }
+
+ ),
+ 'withRegistry'
+);
class ReusableBlockEdit extends Component {
- constructor( { reusableBlock } ) {
+ constructor( { reusableBlock, registry } ) {
super( ...arguments );
this.startEditing = this.startEditing.bind( this );
@@ -30,12 +58,12 @@ class ReusableBlockEdit extends Component {
this.setTitle = this.setTitle.bind( this );
this.save = this.save.bind( this );
- if ( reusableBlock && reusableBlock.isTemporary ) {
+ if ( reusableBlock ) {
// Start in edit mode when we're working with a newly created reusable block
this.state = {
- isEditing: true,
+ isEditing: reusableBlock.isTemporary,
title: reusableBlock.title,
- blocks: [],
+ blocks: parse( reusableBlock.content ),
};
} else {
// Start in preview mode when we're working with an existing reusable block
@@ -45,6 +73,8 @@ class ReusableBlockEdit extends Component {
blocks: [],
};
}
+
+ this.registry = createRegistry( { 'core/block-editor': storeConfig }, registry );
}
componentDidMount() {
@@ -53,9 +83,17 @@ class ReusableBlockEdit extends Component {
}
}
+ componentDidUpdate( prevProps ) {
+ if ( prevProps.reusableBlock !== this.props.reusableBlock && this.state.title === null ) {
+ this.setState( {
+ title: this.props.reusableBlock.title,
+ blocks: parse( this.props.reusableBlock.content ),
+ } );
+ }
+ }
+
startEditing() {
const { reusableBlock } = this.props;
-
this.setState( {
isEditing: true,
title: reusableBlock.title,
@@ -102,14 +140,16 @@ class ReusableBlockEdit extends Component {
}
let element = (
-
- test sdfsdf sdf sdf
-
+
+
+
+
+
);
if ( ! isEditing ) {
@@ -175,4 +215,5 @@ export default compose( [
onSave: partial( saveReusableBlock, ref ),
};
} ),
+ withRegistry,
] )( ReusableBlockEdit );
diff --git a/packages/data/src/registry.js b/packages/data/src/registry.js
index acca73b93129a3..9f8268360cc956 100644
--- a/packages/data/src/registry.js
+++ b/packages/data/src/registry.js
@@ -34,11 +34,12 @@ import dataStore from './store';
* Creates a new store registry, given an optional object of initial store
* configurations.
*
- * @param {Object} storeConfigs Initial store configurations.
+ * @param {Object} storeConfigs Initial store configurations.
+ * @param {Object?} parent Parent registry.
*
* @return {WPDataRegistry} Data registry.
*/
-export function createRegistry( storeConfigs = {} ) {
+export function createRegistry( storeConfigs = {}, parent = null ) {
const stores = {};
let listeners = [];
@@ -74,7 +75,11 @@ export function createRegistry( storeConfigs = {} ) {
*/
function select( reducerKey ) {
const store = stores[ reducerKey ];
- return store && store.getSelectors();
+ if ( store ) {
+ return store.getSelectors();
+ }
+
+ return parent && parent.select( reducerKey );
}
/**
@@ -87,7 +92,11 @@ export function createRegistry( storeConfigs = {} ) {
*/
function dispatch( reducerKey ) {
const store = stores[ reducerKey ];
- return store && store.getActions();
+ if ( store ) {
+ return store.getActions();
+ }
+
+ return parent && parent.dispatch( reducerKey );
}
//
@@ -171,5 +180,9 @@ export function createRegistry( storeConfigs = {} ) {
...storeConfigs,
} ).map( ( [ name, config ] ) => registry.registerStore( name, config ) );
+ if ( parent ) {
+ parent.subscribe( globalListener );
+ }
+
return withPlugins( registry );
}
diff --git a/packages/editor/src/store/effects/reusable-blocks.js b/packages/editor/src/store/effects/reusable-blocks.js
index 36dff71484b6b4..5d2782c53eb363 100644
--- a/packages/editor/src/store/effects/reusable-blocks.js
+++ b/packages/editor/src/store/effects/reusable-blocks.js
@@ -66,7 +66,11 @@ export const fetchReusableBlocks = async ( action, store ) => {
return null;
}
- return post;
+ return {
+ ...post,
+ content: post.content.raw,
+ title: post.title.raw,
+ };
} ) );
if ( results.length ) {
@@ -215,9 +219,9 @@ export const convertBlockToReusable = ( action, store ) => {
content: serialize( select( 'core/block-editor' ).getBlocksByClientId( action.clientIds ) ),
};
- dispatch( receiveReusableBlocksAction( [ {
+ dispatch( receiveReusableBlocksAction( [
reusableBlock,
- } ] ) );
+ ] ) );
dispatch( saveReusableBlock( reusableBlock.id ) );
dataDispatch( 'core/block-editor' ).replaceBlocks(
diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js
index ab2488044fd7ef..65c1b472fd447e 100644
--- a/packages/editor/src/store/reducer.js
+++ b/packages/editor/src/store/reducer.js
@@ -11,7 +11,6 @@ import {
isEqual,
last,
keyBy,
- map,
} from 'lodash';
/**
@@ -615,14 +614,7 @@ export const reusableBlocks = combineReducers( {
case 'RECEIVE_REUSABLE_BLOCKS': {
return {
...state,
- ...map(
- keyBy( action.results, 'id' ),
- ( block ) => ( {
- ...block,
- content: block.content.raw,
- title: block.title.raw,
- } )
- ),
+ ...keyBy( action.results, 'id' ),
};
}