Bundle SlotFillProvider within BlockEditorProvider

docs/how-to-guides/platform/custom-block-editor.md

@@ -278,16 +278,14 @@ With these components available, you can define the `<Editor>` component.
 
 function Editor( { settings } ) {
 	return (
-		<SlotFillProvider>
-			<DropZoneProvider>
-				<div className="getdavesbe-block-editor-layout">
-					<Notices />
-					<Header />
-					<Sidebar />
-					<BlockEditor settings={ settings } />
-				</div>
-			</DropZoneProvider>
-		</SlotFillProvider>
+		<DropZoneProvider>
+			<div className="getdavesbe-block-editor-layout">
+				<Notices />
+				<Header />
+				<Sidebar />
+				<BlockEditor settings={ settings } />
+			</div>
+		</DropZoneProvider>
 	);
 }
 ```
@@ -296,8 +294,6 @@ In this process, the core of the editor's layout is being scaffolded, along with
 
 Let's examine these in more detail:
 
--   `<SlotFillProvider>` – Enables the use of the ["Slot/Fill"
-    pattern](/docs/reference-guides/slotfills/README.md) through the component tree
 -   `<DropZoneProvider>` – Enables the use of [dropzones for drag and drop functionality](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/components/src/drop-zone)
 -   `<Notices>` – Provides a "snack bar" Notice that will be rendered if any messages are dispatched to the `core/notices` store
 -   `<Header>` – Renders the static title "Standalone Block Editor" at the top of the editor UI

packages/block-editor/README.md

@@ -21,7 +21,6 @@ import {
 	BlockTools,
 	WritingFlow,
 } from '@wordpress/block-editor';
-import { SlotFillProvider, Popover } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 function MyEditorComponent() {
@@ -33,13 +32,11 @@ function MyEditorComponent() {
 			onInput={ ( blocks ) => updateBlocks( blocks ) }
 			onChange={ ( blocks ) => updateBlocks( blocks ) }
 		>
-			<SlotFillProvider>
-				<BlockTools>
-					<WritingFlow>
-						<BlockList />
-					</WritingFlow>
-				</BlockTools>
-			</SlotFillProvider>
+			<BlockTools>
+				<WritingFlow>
+					<BlockList />
+				</WritingFlow>
+			</BlockTools>
 		</BlockEditorProvider>
 	);
 }

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

@@ -3,6 +3,7 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -44,10 +45,10 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		useBlockSync( props );
 
 		return (
-			<>
+			<SlotFillProvider>
 				<KeyboardShortcuts.Register />
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
-			</>
+			</SlotFillProvider>
 		);
 	}
 );

packages/components/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 -   Make the `Popover.Slot` optional and render popovers at the bottom of the document's body by default. ([#53889](https://github.com/WordPress/gutenberg/pull/53889)).
 -   `ProgressBar`: Add transition to determinate indicator ([#53877](https://github.com/WordPress/gutenberg/pull/53877)).
+-   Prevent nested `SlotFillProvider` from rendering ([#53940](https://github.com/WordPress/gutenberg/pull/53940)).
 
 ### Bug Fix
 

packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js

@@ -22,6 +22,7 @@ const SlotFillContext = createContext( {
 	unregisterSlot: () => {},
 	registerFill: () => {},
 	unregisterFill: () => {},
+	isDefault: true,
 } );
 
 export default SlotFillContext;

packages/components/src/slot-fill/index.js

@@ -2,7 +2,7 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,6 +13,7 @@ import BubblesVirtuallyFill from './bubbles-virtually/fill';
 import BubblesVirtuallySlot from './bubbles-virtually/slot';
 import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
 import SlotFillProvider from './provider';
+import SlotFillContext from './bubbles-virtually/slot-fill-context';
 export { default as useSlot } from './bubbles-virtually/use-slot';
 export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
 
@@ -35,6 +36,10 @@ export const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {
 } );
 
 export function Provider( { children, ...props } ) {
+	const parent = useContext( SlotFillContext );
+	if ( ! parent.isDefault ) {
+		return children;
+	}
 	return (
 		<SlotFillProvider { ...props }>
 			<BubblesVirtuallySlotFillProvider>

storybook/stories/playground/index.story.js

@@ -9,7 +9,6 @@ import {
 	BlockInspector,
 	WritingFlow,
 } from '@wordpress/block-editor';
-import { SlotFillProvider } from '@wordpress/components';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import '@wordpress/format-library';
@@ -37,26 +36,24 @@ function App() {
 	return (
 		<div className="playground">
 			<ShortcutProvider>
-				<SlotFillProvider>
-					<BlockEditorProvider
-						value={ blocks }
-						onInput={ updateBlocks }
-						onChange={ updateBlocks }
-					>
-						<div className="playground__sidebar">
-							<BlockInspector />
-						</div>
-						<div className="playground__content">
-							<BlockTools>
-								<div className="editor-styles-wrapper">
-									<WritingFlow>
-										<BlockList />
-									</WritingFlow>
-								</div>
-							</BlockTools>
-						</div>
-					</BlockEditorProvider>
-				</SlotFillProvider>
+				<BlockEditorProvider
+					value={ blocks }
+					onInput={ updateBlocks }
+					onChange={ updateBlocks }
+				>
+					<div className="playground__sidebar">
+						<BlockInspector />
+					</div>
+					<div className="playground__content">
+						<BlockTools>
+							<div className="editor-styles-wrapper">
+								<WritingFlow>
+									<BlockList />
+								</WritingFlow>
+							</div>
+						</BlockTools>
+					</div>
+				</BlockEditorProvider>
 			</ShortcutProvider>
 		</div>
 	);

test/integration/helpers/integration-test-editor.js

@@ -15,7 +15,6 @@ import {
 	BlockInspector,
 	WritingFlow,
 } from '@wordpress/block-editor';
-import { SlotFillProvider } from '@wordpress/components';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import '@wordpress/format-library';
@@ -68,21 +67,19 @@ export function Editor( { testBlocks, settings = {} } ) {
 
 	return (
 		<ShortcutProvider>
-			<SlotFillProvider>
-				<BlockEditorProvider
-					value={ currentBlocks }
-					onInput={ updateBlocks }
-					onChange={ updateBlocks }
-					settings={ settings }
-				>
-					<BlockInspector />
-					<BlockTools>
-						<WritingFlow>
-							<BlockList />
-						</WritingFlow>
-					</BlockTools>
-				</BlockEditorProvider>
-			</SlotFillProvider>
+			<BlockEditorProvider
+				value={ currentBlocks }
+				onInput={ updateBlocks }
+				onChange={ updateBlocks }
+				settings={ settings }
+			>
+				<BlockInspector />
+				<BlockTools>
+					<WritingFlow>
+						<BlockList />
+					</WritingFlow>
+				</BlockTools>
+			</BlockEditorProvider>
 		</ShortcutProvider>
 	);
 }