SlotFill: unify registry and fill implementation

packages/block-editor/src/components/link-control/test/index.js

@@ -3,7 +3,7 @@
  */
 import {
 	fireEvent,
-	render,
+	render as baseRender,
 	screen,
 	waitFor,
 	within,
@@ -13,6 +13,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * WordPress dependencies
  */
+import { SlotFillProvider } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
@@ -67,6 +68,10 @@ afterEach( () => {
 	mockFetchRichUrlData?.mockReset(); // Conditionally reset as it may NOT be a mock.
 } );
 
+function render( ui, options ) {
+	return baseRender( ui, { wrapper: SlotFillProvider, ...options } );
+}
+
 /**
  * Workaround to trigger an arrow up keypress event.
  *

packages/block-editor/src/components/media-replace-flow/test/index.js

@@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-
+import { SlotFillProvider } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -19,16 +19,18 @@ const noop = () => {};
 function TestWrapper() {
 	const [ mediaURL, setMediaURL ] = useState( 'https://example.media' );
 	return (
-		<MediaReplaceFlow
-			mediaId={ 1 }
-			mediaURL={ mediaURL }
-			allowedTypes={ [ 'png' ] }
-			accept="image/*"
-			onSelect={ noop }
-			onSelectURL={ setMediaURL }
-			onError={ noop }
-			onCloseModal={ noop }
-		/>
+		<SlotFillProvider>
+			<MediaReplaceFlow
+				mediaId={ 1 }
+				mediaURL={ mediaURL }
+				allowedTypes={ [ 'png' ] }
+				accept="image/*"
+				onSelect={ noop }
+				onSelectURL={ setMediaURL }
+				onError={ noop }
+				onCloseModal={ noop }
+			/>
+		</SlotFillProvider>
 	);
 }
 

packages/components/CHANGELOG.md

@@ -30,6 +30,7 @@
 -   `SlotFill`: rewrite the non-portal version to use `observableMap` ([#67400](https://github.com/WordPress/gutenberg/pull/67400)).
 -   `DatePicker`: Prepare day buttons for 40px default size ([#68156](https://github.com/WordPress/gutenberg/pull/68156)).
 -   `SlotFill`: register slots in a layout effect ([#68176](https://github.com/WordPress/gutenberg/pull/68176)).
+-   `SlotFill`: unify context providers and `Fill` implementations ([#68056](https://github.com/WordPress/gutenberg/pull/68056)).
 
 ## 29.0.0 (2024-12-11)
 

packages/components/src/slot-fill/bubbles-virtually/slot.tsx

@@ -18,7 +18,7 @@ import { useMergeRefs } from '@wordpress/compose';
  * Internal dependencies
  */
 import { View } from '../../view';
-import SlotFillContext from './slot-fill-context';
+import SlotFillContext from '../context';
 import type { WordPressComponentProps } from '../../context';
 import type { SlotComponentProps } from '../types';
 
@@ -40,25 +40,32 @@ function Slot(
 	} = props;
 
 	const registry = useContext( SlotFillContext );
-
+	const instanceRef = useRef( {} );
 	const ref = useRef< HTMLElement >( null );
 
-	// We don't want to unregister and register the slot whenever
-	// `fillProps` change, which would cause the fill to be re-mounted. Instead,
-	// we can just update the slot (see hook below).
-	// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
 	const fillPropsRef = useRef( fillProps );
 	useLayoutEffect( () => {
 		fillPropsRef.current = fillProps;
 	}, [ fillProps ] );
 
 	useLayoutEffect( () => {
-		registry.registerSlot( name, ref, fillPropsRef.current );
-		return () => registry.unregisterSlot( name, ref );
+		const instance = instanceRef.current;
+		registry.registerSlot( name, {
+			type: 'portal',
+			instance,
+			ref,
+			fillProps: fillPropsRef.current,
+		} );
+		return () => registry.unregisterSlot( name, instance );
 	}, [ registry, name ] );
 
 	useLayoutEffect( () => {
-		registry.updateSlot( name, ref, fillPropsRef.current );
+		registry.updateSlot( name, {
+			type: 'portal',
+			instance: instanceRef.current,
+			ref,
+			fillProps: fillPropsRef.current,
+		} );
 	} );
 
 	return (

packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts

@@ -1,16 +1,42 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import { useObservableValue } from '@wordpress/compose';
+import { useContext, useMemo, useSyncExternalStore } from '@wordpress/element';
+import type { ObservableMap } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import SlotFillContext from './slot-fill-context';
+import SlotFillContext from '../context';
 import type { SlotKey } from '../types';
 
+function useObservableValueWithSelector< K, V, S >(
+	map: ObservableMap< K, V >,
+	name: K,
+	selector: ( v: V | undefined ) => S
+) {
+	const subscribe = useMemo(
+		() => ( listener: () => void ) => map.subscribe( name, listener ),
+		[ map, name ]
+	);
+	const getValue = () => selector( map.get( name ) );
+	return useSyncExternalStore( subscribe, getValue, getValue );
+}
+
+function getLength< T >( array: T[] | undefined ) {
+	return array?.length;
+}
+
 export default function useSlotFills( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
-	return useObservableValue( registry.fills, name );
+	const length = useObservableValueWithSelector(
+		registry.fills,
+		name,
+		getLength
+	);
+	// callers expect an opaque array with length `length`, so create that array
+	const fills = useMemo( () => {
+		return length !== undefined ? Array.from( { length } ) : undefined;
+	}, [ length ] );
+	return fills;
 }

packages/components/src/slot-fill/bubbles-virtually/use-slot.ts

@@ -7,11 +7,15 @@ import { useObservableValue } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import SlotFillContext from './slot-fill-context';
-import type { SlotKey } from '../types';
+import SlotFillContext from '../context';
+import type { SlotKey, SlotRef } from '../types';
 
 export default function useSlot( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
 	const slot = useObservableValue( registry.slots, name );
-	return { ...slot };
+	let ref: SlotRef | undefined;
+	if ( slot && slot.type === 'portal' ) {
+		ref = slot.ref;
+	}
+	return { ref };
 }