Block: avoid useLayoutEffect (#22108)

* [Ignore] See if e2e tests * Fix e2e tests
WordPress · May 5, 2020 · 2beb598 · 2beb598
1 parent ebe89b7
commit 2beb598
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -8,13 +8,7 @@ import { animated } from 'react-spring/web.cjs';
 /**
  * WordPress dependencies
  */
-import {
-	useRef,
-	useEffect,
-	useLayoutEffect,
-	useContext,
-	forwardRef,
-} from '@wordpress/element';
+import { useRef, useEffect, useContext, forwardRef } from '@wordpress/element';
 import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -76,7 +70,7 @@ const BlockComponent = forwardRef(
 		// selection, so it can be used to position the contextual block toolbar.
 		// We only provide what is necessary, and remove the nodes again when they
 		// are no longer selected.
-		useLayoutEffect( () => {
+		useEffect( () => {
 			if ( isSelected || isFirstMultiSelected || isLastMultiSelected ) {
 				const node = wrapper.current;
 				setBlockNodes( ( nodes ) => ( {

diff --git a/packages/e2e-tests/specs/editor/blocks/list.test.js b/packages/e2e-tests/specs/editor/blocks/list.test.js
@@ -291,7 +291,10 @@ describe( 'List', () => {
 
 	it( 'should change the base list type', async () => {
 		await insertBlock( 'List' );
-		await page.click( 'button[aria-label="Convert to ordered list"]' );
+		const button = await page.waitForSelector(
+			'button[aria-label="Convert to ordered list"]'
+		);
+		await button.click();
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );

diff --git a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js
@@ -37,7 +37,10 @@ describe( 'Align Hook Works As Expected', () => {
 	} );
 
 	const getAlignmentToolbarLabels = async () => {
-		await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+		const element = await page.waitForSelector(
+			CHANGE_ALIGNMENT_BUTTON_SELECTOR
+		);
+		await element.click();
 
 		const buttonLabels = await page.evaluate( () => {
 			return Array.from(
@@ -64,7 +67,10 @@ describe( 'Align Hook Works As Expected', () => {
 			await insertBlock( blockName );
 
 			// verify no alignment button is in pressed state
-			await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+			const element = await page.waitForSelector(
+				CHANGE_ALIGNMENT_BUTTON_SELECTOR
+			);
+			await element.click();
 			const pressedButtons = await page.$$(
 				'.components-dropdown-menu__menu button.is-active'
 			);
@@ -89,7 +95,10 @@ describe( 'Align Hook Works As Expected', () => {
 				'.components-dropdown-menu__menu button.is-active';
 			// set the specified alignment.
 			await insertBlock( blockName );
-			await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+			const element = await page.waitForSelector(
+				CHANGE_ALIGNMENT_BUTTON_SELECTOR
+			);
+			await element.click();
 			await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
 
 			// verify the button of the specified alignment is pressed.
@@ -196,7 +205,10 @@ describe( 'Align Hook Works As Expected', () => {
 		it( 'Applies the selected alignment by default', async () => {
 			await insertBlock( BLOCK_NAME );
 			// verify the correct alignment button is pressed
-			await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+			const element = await page.waitForSelector(
+				CHANGE_ALIGNMENT_BUTTON_SELECTOR
+			);
+			await element.click();
 			const selectedAlignmentControls = await page.$x(
 				SELECTED_ALIGNMENT_CONTROL_SELECTOR
 			);
@@ -213,7 +225,10 @@ describe( 'Align Hook Works As Expected', () => {
 		it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
 			await insertBlock( BLOCK_NAME );
 			// remove the alignment.
-			await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR );
+			const element = await page.waitForSelector(
+				CHANGE_ALIGNMENT_BUTTON_SELECTOR
+			);
+			await element.click();
 			const [ selectedAlignmentControl ] = await page.$x(
 				SELECTED_ALIGNMENT_CONTROL_SELECTOR
 			);