Skip to content

Commit

Permalink
Bundle SlotFillProvider within BlockEditorProvider (#53940)
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad authored Aug 25, 2023
1 parent f415a5d commit de8759b
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 60 deletions.
20 changes: 8 additions & 12 deletions docs/how-to-guides/platform/custom-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
```
Expand All @@ -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
Expand Down
13 changes: 5 additions & 8 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
BlockTools,
WritingFlow,
} from '@wordpress/block-editor';
import { SlotFillProvider, Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';

function MyEditorComponent() {
Expand All @@ -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>
);
}
Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/provider/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { SlotFillProvider } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -44,10 +45,10 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
useBlockSync( props );

return (
<>
<SlotFillProvider>
<KeyboardShortcuts.Register />
<BlockRefsProvider>{ children }</BlockRefsProvider>
</>
</SlotFillProvider>
);
}
);
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ const SlotFillContext = createContext( {
unregisterSlot: () => {},
registerFill: () => {},
unregisterFill: () => {},

// This helps the provider know if it's using the default context value or not.
isDefault: true,
} );

export default SlotFillContext;
7 changes: 6 additions & 1 deletion packages/components/src/slot-fill/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
import { forwardRef, useContext } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -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';

Expand All @@ -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>
Expand Down
39 changes: 18 additions & 21 deletions storybook/stories/playground/index.story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
Expand Down
29 changes: 13 additions & 16 deletions test/integration/helpers/integration-test-editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
}
Expand Down

0 comments on commit de8759b

Please sign in to comment.