Slot: use layout effect and update Cover block unit tests

WordPress · Dec 20, 2024 · dcefe7b · dcefe7b
1 parent 5e362f5
commit dcefe7b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
@@ -200,9 +200,7 @@ describe( 'Cover block', () => {
 
 				await selectBlock( 'Block: Cover' );
 				expect(
-					screen.getByRole( 'heading', {
-						name: 'Settings',
-					} )
+					await screen.findByRole( 'heading', { name: 'Settings' } )
 				).toBeInTheDocument();
 			} );
 		} );
@@ -216,7 +214,7 @@ describe( 'Cover block', () => {
 			);
 			await selectBlock( 'Block: Cover' );
 			await userEvent.click(
-				screen.getByLabelText( 'Fixed background' )
+				await screen.findByLabelText( 'Fixed background' )
 			);
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
 				'has-parallax'
@@ -232,7 +230,7 @@ describe( 'Cover block', () => {
 			);
 			await selectBlock( 'Block: Cover' );
 			await userEvent.click(
-				screen.getByLabelText( 'Repeated background' )
+				await screen.findByLabelText( 'Repeated background' )
 			);
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
 				'is-repeated'
@@ -245,7 +243,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
-			await userEvent.clear( screen.getByLabelText( 'Left' ) );
+			await userEvent.clear( await screen.findByLabelText( 'Left' ) );
 			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
 
 			expect(
@@ -262,7 +260,7 @@ describe( 'Cover block', () => {
 
 			await selectBlock( 'Block: Cover' );
 			await userEvent.type(
-				screen.getByLabelText( 'Alternative text' ),
+				await screen.findByLabelText( 'Alternative text' ),
 				'Me'
 			);
 			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();

diff --git a/packages/components/src/slot-fill/slot.tsx b/packages/components/src/slot-fill/slot.tsx
@@ -9,7 +9,7 @@ import type { ReactElement, ReactNode, Key } from 'react';
 import { useObservableValue } from '@wordpress/compose';
 import {
 	useContext,
-	useEffect,
+	useLayoutEffect,
 	useRef,
 	Children,
 	cloneElement,
@@ -54,7 +54,7 @@ function Slot( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) {
 
 	const { name, children, fillProps = {} } = props;
 
-	useEffect( () => {
+	useLayoutEffect( () => {
 		const instance = instanceRef.current;
 		registry.registerSlot( name, instance );
 		return () => registry.unregisterSlot( name, instance );