Block Library: Reimplement Reusable Block using EditorProvider for embedded post editor

packages/block-editor/README.md

@@ -197,6 +197,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+<a name="FormatToolbar" href="#FormatToolbar">#</a> **FormatToolbar**
+
+Undocumented declaration.
+
 <a name="getColorClassName" href="#getColorClassName">#</a> **getColorClassName**
 
 Returns a class based on the context a color is being used and its slug.

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

@@ -29,6 +29,7 @@ export {
 	RichTextShortcut,
 	RichTextToolbarButton,
 	__unstableRichTextInputEvent,
+	FormatToolbar,
 } from './rich-text';
 export { default as URLInput } from './url-input';
 export { default as URLInputButton } from './url-input/button';

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { DropZoneProvider, SlotFillProvider } from '@wordpress/components';
+import { DropZoneProvider } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -121,11 +121,9 @@ class BlockEditorProvider extends Component {
 		const { children } = this.props;
 
 		return (
-			<SlotFillProvider>
-				<DropZoneProvider>
-					{ children }
-				</DropZoneProvider>
-			</SlotFillProvider>
+			<DropZoneProvider>
+				{ children }
+			</DropZoneProvider>
 		);
 	}
 }

packages/block-editor/src/components/rich-text/format-toolbar/index.js

@@ -9,7 +9,9 @@ import { orderBy } from 'lodash';
  */
 
 import { __ } from '@wordpress/i18n';
-import { Toolbar, Slot, DropdownMenu } from '@wordpress/components';
+import { Toolbar, Slot, DropdownMenu, createSlotFill } from '@wordpress/components';
+
+const { Slot: ToolbarControlsSlot } = createSlotFill( 'RichText.ToolbarControls' );
 
 const FormatToolbar = ( { controls } ) => {
 	return (
@@ -18,7 +20,7 @@ const FormatToolbar = ( { controls } ) => {
 				{ controls.map( ( format ) =>
 					<Slot name={ `RichText.ToolbarControls.${ format }` } key={ format } />
 				) }
-				<Slot name="RichText.ToolbarControls">
+				<ToolbarControlsSlot>
 					{ ( fills ) => fills.length !== 0 &&
 						<DropdownMenu
 							icon={ false }
@@ -27,10 +29,12 @@ const FormatToolbar = ( { controls } ) => {
 							controls={ orderBy( fills.map( ( [ { props } ] ) => props ), 'title' ) }
 						/>
 					}
-				</Slot>
+				</ToolbarControlsSlot>
 			</Toolbar>
 		</div>
 	);
 };
 
+FormatToolbar.Slot = ToolbarControlsSlot;
+
 export default FormatToolbar;

packages/block-editor/src/components/rich-text/format-toolbar/index.native.js

@@ -2,17 +2,21 @@
  * WordPress dependencies
  */
 
-import { Toolbar, Slot } from '@wordpress/components';
+import { Toolbar, Slot, createSlotFill } from '@wordpress/components';
+
+const { Slot: ToolbarControlsSlot } = createSlotFill( 'RichText.ToolbarControls' );
 
 const FormatToolbar = ( { controls } ) => {
 	return (
 		<Toolbar>
 			{ controls.map( ( format ) =>
 				<Slot name={ `RichText.ToolbarControls.${ format }` } key={ format } />
 			) }
-			<Slot name="RichText.ToolbarControls" />
+			<ToolbarControlsSlot />
 		</Toolbar>
 	);
 };
 
+FormatToolbar.Slot = ToolbarControlsSlot;
+
 export default FormatToolbar;

packages/block-editor/src/components/rich-text/index.js

@@ -1217,3 +1217,4 @@ export default RichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';
+export { FormatToolbar };

packages/block-library/src/block/edit-panel/index.js

@@ -5,7 +5,8 @@ import { Button } from '@wordpress/components';
 import { Component, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
-import { withInstanceId } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { withInstanceId, compose } from '@wordpress/compose';
 
 class ReusableBlockEditPanel extends Component {
 	constructor() {
@@ -107,4 +108,36 @@ class ReusableBlockEditPanel extends Component {
 	}
 }
 
-export default withInstanceId( ReusableBlockEditPanel );
+export default compose( [
+	withInstanceId,
+	withSelect( ( select ) => {
+		const { getEditedPostAttribute, isSavingPost } = select( 'core/editor' );
+
+		return {
+			title: getEditedPostAttribute( 'title' ),
+			isSaving: isSavingPost(),
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps ) => {
+		const {
+			editPost,
+			savePost,
+			clearSelectedBlock,
+		} = dispatch( 'core/editor' );
+
+		return {
+			onChangeTitle( title ) {
+				editPost( { title } );
+			},
+			onSave() {
+				clearSelectedBlock();
+				savePost();
+				ownProps.onSave();
+			},
+			onCancel() {
+				clearSelectedBlock();
+				ownProps.onCancel();
+			},
+		};
+	} ),
+] )( ReusableBlockEditPanel );