Adapt the block switcher styles to the new Popover component (#23232)

WordPress · Jun 17, 2020 · 7531814 · 7531814
1 parent cd07005
commit 7531814
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -67,7 +67,7 @@
 
 
 // We double the max-width for it to fit both the preview & content but we keep the min width the same for the border to work.
-.components-popover.block-editor-block-switcher__popover .components-popover__content {
+.components-popover.block-editor-block-switcher__popover .components-popover__content > div {
 	min-width: 300px;
 	max-width: calc(340px * 2);
 	display: flex;
@@ -81,9 +81,7 @@
 	.components-menu-group + .components-menu-group {
 		border-color: $light-gray-secondary;
 	}
-}
 
-.block-editor-block-switcher__popover .components-popover__content {
 	.block-editor-block-switcher__container {
 		min-width: 300px;
 		max-width: 340px;
@@ -103,7 +101,8 @@
 
 		.block-editor-block-switcher__preview {
 			border-left: $border-width solid $light-gray-500;
-			box-shadow: $shadow-popover;
+			margin-top: -$grid-unit-15;
+			margin-bottom: -$grid-unit-15;
 			background: $white;
 			width: 300px;
 			height: auto;

diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js
@@ -9,17 +9,19 @@ export async function transformBlockTo( name ) {
 	const switcherToggle = await page.waitForSelector(
 		'.block-editor-block-switcher__toggle'
 	);
+	await switcherToggle.evaluate( ( element ) => element.scrollIntoView() );
+	await page.waitForSelector( '.block-editor-block-switcher__toggle', {
+		visible: true,
+	} );
 	await switcherToggle.click();
 
 	// Find the block button option within the switcher popover.
-	const insertButton = (
-		await page.$x(
-			`//*[contains(@class, "block-editor-block-switcher__popover")]//button[.='${ name }']`
-		)
-	 )[ 0 ];
+	const xpath = `//*[contains(@class, "block-editor-block-switcher__popover")]//button[.='${ name }']`;
+	const insertButton = ( await page.$x( xpath ) )[ 0 ];
 
 	// Clicks may fail if the button is out of view. Assure it is before click.
 	await insertButton.evaluate( ( element ) => element.scrollIntoView() );
+	await page.waitForXPath( xpath, { visible: true } );
 	await insertButton.click();
 
 	// Wait for the transformed block to appear.