Edit Post: Remove SlotFillProvider as rendered by block editor (#15988)

WordPress · Jun 17, 2019 · 763fb65 · 763fb65
1 parent 06eb744
commit 763fb65
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 37 deletions.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Master
+
+### Breaking Changes
+
+- `BlockEditorProvider` no longer renders a wrapping `SlotFillProvider` or `DropZoneProvider` (from `@wordpress/components`). For custom block editors, you should render your own as wrapping the `BlockEditorProvider`. A future release will include a new `BlockEditor` component for simple, standard usage. `BlockEditorProvider` will serve the simple purpose of establishing its own context for block editors.
+
 ## 2.2.0 (2019-06-12)
 
 ### Internal

diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { DropZoneProvider, SlotFillProvider } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -120,13 +119,7 @@ class BlockEditorProvider extends Component {
 	render() {
 		const { children } = this.props;
 
-		return (
-			<SlotFillProvider>
-				<DropZoneProvider>
-					{ children }
-				</DropZoneProvider>
-			</SlotFillProvider>
-		);
+		return children;
 	}
 }
 

diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
@@ -10,7 +10,11 @@ import { size, map, without } from 'lodash';
 import { withSelect } from '@wordpress/data';
 import { EditorProvider, ErrorBoundary, PostLockedModal } from '@wordpress/editor';
 import { StrictMode, Component } from '@wordpress/element';
-import { KeyboardShortcuts } from '@wordpress/components';
+import {
+	KeyboardShortcuts,
+	SlotFillProvider,
+	DropZoneProvider,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -87,19 +91,23 @@ class Editor extends Component {
 
 		return (
 			<StrictMode>
-				<EditorProvider
-					settings={ editorSettings }
-					post={ post }
-					initialEdits={ initialEdits }
-					useSubRegistry={ false }
-					{ ...props }
-				>
-					<ErrorBoundary onError={ onError }>
-						<Layout />
-						<KeyboardShortcuts shortcuts={ preventEventDiscovery } />
-					</ErrorBoundary>
-					<PostLockedModal />
-				</EditorProvider>
+				<SlotFillProvider>
+					<DropZoneProvider>
+						<EditorProvider
+							settings={ editorSettings }
+							post={ post }
+							initialEdits={ initialEdits }
+							useSubRegistry={ false }
+							{ ...props }
+						>
+							<ErrorBoundary onError={ onError }>
+								<Layout />
+								<KeyboardShortcuts shortcuts={ preventEventDiscovery } />
+							</ErrorBoundary>
+							<PostLockedModal />
+						</EditorProvider>
+					</DropZoneProvider>
+				</SlotFillProvider>
 			</StrictMode>
 		);
 	}

diff --git a/playground/src/index.js b/playground/src/index.js
@@ -10,7 +10,11 @@ import {
 	WritingFlow,
 	ObserveTyping,
 } from '@wordpress/block-editor';
-import { Popover } from '@wordpress/components';
+import {
+	Popover,
+	SlotFillProvider,
+	DropZoneProvider,
+} from '@wordpress/components';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import '@wordpress/format-library';
 
@@ -37,20 +41,24 @@ function App() {
 				<h1 className="playground__logo">Gutenberg Playground</h1>
 			</div>
 			<div className="playground__body">
-				<BlockEditorProvider
-					value={ blocks }
-					onInput={ updateBlocks }
-					onChange={ updateBlocks }
-				>
-					<div className="editor-styles-wrapper">
-						<WritingFlow>
-							<ObserveTyping>
-								<BlockList />
-							</ObserveTyping>
-						</WritingFlow>
-					</div>
-					<Popover.Slot />
-				</BlockEditorProvider>
+				<SlotFillProvider>
+					<DropZoneProvider>
+						<BlockEditorProvider
+							value={ blocks }
+							onInput={ updateBlocks }
+							onChange={ updateBlocks }
+						>
+							<div className="editor-styles-wrapper">
+								<WritingFlow>
+									<ObserveTyping>
+										<BlockList />
+									</ObserveTyping>
+								</WritingFlow>
+							</div>
+							<Popover.Slot />
+						</BlockEditorProvider>
+					</DropZoneProvider>
+				</SlotFillProvider>
 			</div>
 		</Fragment>
 	);