From 7c761296aefa76146683f85fb956b726c8ed00b8 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 7 Nov 2024 15:46:08 +0900 Subject: [PATCH 1/2] SlotFill: fix dependencies of registration effects, deduplicate code --- packages/components/src/slot-fill/fill.ts | 27 +++++------------------ 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/packages/components/src/slot-fill/fill.ts b/packages/components/src/slot-fill/fill.ts index 4134af25684b07..b11b7af09b82f0 100644 --- a/packages/components/src/slot-fill/fill.ts +++ b/packages/components/src/slot-fill/fill.ts @@ -11,7 +11,7 @@ import useSlot from './use-slot'; import type { FillComponentProps } from './types'; export default function Fill( { name, children }: FillComponentProps ) { - const { registerFill, unregisterFill } = useContext( SlotFillContext ); + const registry = useContext( SlotFillContext ); const slot = useSlot( name ); const ref = useRef( { @@ -21,32 +21,17 @@ export default function Fill( { name, children }: FillComponentProps ) { useLayoutEffect( () => { const refValue = ref.current; - registerFill( name, refValue ); - return () => unregisterFill( name, refValue ); - // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. - // We'll leave them as-is until a more detailed investigation/refactor can be performed. - }, [] ); + refValue.name = name; + registry.registerFill( name, refValue ); + return () => registry.unregisterFill( name, refValue ); + }, [ registry, name ] ); useLayoutEffect( () => { ref.current.children = children; if ( slot ) { slot.forceUpdate(); } - // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. - // We'll leave them as-is until a more detailed investigation/refactor can be performed. - }, [ children ] ); - - useLayoutEffect( () => { - if ( name === ref.current.name ) { - // Ignore initial effect. - return; - } - unregisterFill( ref.current.name, ref.current ); - ref.current.name = name; - registerFill( name, ref.current ); - // The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. - // We'll leave them as-is until a more detailed investigation/refactor can be performed. - }, [ name ] ); + }, [ slot, children ] ); return null; } From 52f0c8fd8f5a1b1ac06f67e2b636db43bf831ad2 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 18 Nov 2024 13:07:07 +0100 Subject: [PATCH 2/2] Add changelog entry --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8b72af17cae987..8c217c90ba1b7d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -15,6 +15,10 @@ - `SlotFill`: Remove registration API methods from return value of `__experimentalUseSlot` ([#67070](https://github.com/WordPress/gutenberg/pull/67070)). +### Internal + +- `SlotFill`: fix dependencies of `Fill` registration effects ([#67071](https://github.com/WordPress/gutenberg/pull/67071)). + ## 28.12.0 (2024-11-16) ### Deprecations