From 2010a1e6d9cae33040ebe008051112bca34d4770 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Thu, 3 Aug 2023 00:25:14 +0900 Subject: [PATCH 1/5] remove children form bubbleVisually slot. --- .../src/slot-fill/bubbles-virtually/slot.js | 22 ++++++++++++++----- .../slot-fill/test/__snapshots__/slot.js.snap | 16 ++++++++++---- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.js index ef7ad56cc68bac..d04453ab8ff0ec 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/slot.js +++ b/packages/components/src/slot-fill/bubbles-virtually/slot.js @@ -13,12 +13,20 @@ import { useMergeRefs } from '@wordpress/compose'; /** * Internal dependencies */ +import { View } from '../../view'; import SlotFillContext from './slot-fill-context'; -function Slot( - { name, fillProps = {}, as: Component = 'div', ...props }, - forwardedRef -) { +function Slot( props, forwardedRef ) { + const { + name, + fillProps = {}, + as: Component = 'div', + // `children` is not allowed. However, if it is passed, + // it will be displayed as is, so remove `children`. + children, + ...restProps + } = props; + const { registerSlot, unregisterSlot, ...registry } = useContext( SlotFillContext ); const ref = useRef(); @@ -41,7 +49,11 @@ function Slot( } ); return ( - + ); } diff --git a/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap b/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap index d57954b0444f9b..b9379eda7171a2 100644 --- a/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap +++ b/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap @@ -42,12 +42,16 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
-
+
-
+
Content
@@ -62,7 +66,9 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
-
+
Content
@@ -187,7 +193,9 @@ exports[`Slot should render in expected order when fills unmounted 1`] = ` exports[`Slot should warn without a Provider 1`] = `
-
+
`; From c5967859423cf0b821ebcee0b8816c2620095be0 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Thu, 3 Aug 2023 00:28:44 +0900 Subject: [PATCH 2/5] update readme for `Slot` --- packages/components/src/slot-fill/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/slot-fill/README.md b/packages/components/src/slot-fill/README.md index ccd4675588c239..a04416bdee50d9 100644 --- a/packages/components/src/slot-fill/README.md +++ b/packages/components/src/slot-fill/README.md @@ -70,7 +70,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given `Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container. -`Slot` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally. +`Slot` **without** `bubblesVirtually` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally. _Example_: @@ -103,14 +103,14 @@ const ToolbarItem = () => ( ); -const Toolbar = () => - const hideToolbar() => { +const Toolbar = () => { + const hideToolbar = () => { console.log( 'Hide toolbar' ); - } + }; return (
); -); +}; ``` From 70b5607080385874a31ef322c6aeba1b54031b02 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Thu, 3 Aug 2023 00:38:36 +0900 Subject: [PATCH 3/5] Use "as" as is. --- packages/components/src/slot-fill/bubbles-virtually/slot.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.js index d04453ab8ff0ec..be6fde0c8e6b7b 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/slot.js +++ b/packages/components/src/slot-fill/bubbles-virtually/slot.js @@ -20,7 +20,7 @@ function Slot( props, forwardedRef ) { const { name, fillProps = {}, - as: Component = 'div', + as, // `children` is not allowed. However, if it is passed, // it will be displayed as is, so remove `children`. children, @@ -50,7 +50,7 @@ function Slot( props, forwardedRef ) { return ( From 2b8c6888e2d4630a69d0d126d8e33b69fb38bbe5 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Thu, 3 Aug 2023 00:54:09 +0900 Subject: [PATCH 4/5] update changelog --- packages/components/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f204ea25751932..ce868d2ad414ac 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,9 @@ - `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)). +### Internal +- `SlotFill`: Refactor `` ([#53272](https://github.com/WordPress/gutenberg/pull/53272)) + ### Enhancements - `ProgressBar`: Add transition to determinate indicator ([#53877](https://github.com/WordPress/gutenberg/pull/53877)). @@ -46,7 +49,6 @@ - `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)). - `MenuItemsChoice`, `MenuItem`: Support a `disabled` prop on a menu item ([#52737](https://github.com/WordPress/gutenberg/pull/52737)). -- `TabPanel`: Introduce a new version of `TabPanel` with updated internals and improved adherence to ARIA guidance on `tabpanel` focus behavior while maintaining the same functionality and API surface.([#52133](https://github.com/WordPress/gutenberg/pull/52133)). ### Bug Fix From 362b6d4405edd476df1f6479bb264dc9f51d6789 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Mon, 21 Aug 2023 11:07:04 +0900 Subject: [PATCH 5/5] Clarify changelog. --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ce868d2ad414ac..a21c47eb3b9916 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -7,7 +7,7 @@ - `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)). ### Internal -- `SlotFill`: Refactor `` ([#53272](https://github.com/WordPress/gutenberg/pull/53272)) +- `SlotFill`: Do not render children when using ``. ([#53272](https://github.com/WordPress/gutenberg/pull/53272)) ### Enhancements