Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundle SlotFillProvider within BlockEditorProvider #53940

Merged
merged 5 commits into from
Aug 25, 2023
Merged

Bundle SlotFillProvider within BlockEditorProvider #53940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7890132
Bundle SlotFillProvider within BlockEditorProvider
youknowriad Aug 25, 2023
03dc772
Add changelog
youknowriad Aug 25, 2023
ced0da9
Fix default slot fill context
youknowriad Aug 25, 2023
f8755be
Update changelog entry
youknowriad Aug 25, 2023
a810223
Add comment
youknowriad Aug 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 8 additions & 12 deletions docs/how-to-guides/platform/custom-block-editor.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
3 changes: 3 additions & 0 deletions packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
View file
Open in desktop
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,
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
} );

export default SlotFillContext;
7 changes: 6 additions & 1 deletion packages/components/src/slot-fill/index.js
View file
Open in desktop
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 ) {
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
return children;
}
return (
<SlotFillProvider { ...props }>
<BubblesVirtuallySlotFillProvider>
Expand Down
39 changes: 18 additions & 21 deletions storybook/stories/playground/index.story.js
View file
Open in desktop
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
View file
Open in desktop
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