From a5086ad7978e8fa84174ca4efe7a8f6a0bcb73ec Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 17 Jun 2020 09:16:04 +0100 Subject: [PATCH 1/2] Adapt the block switcher styles to the new Popover component --- .../block-editor/src/components/block-switcher/style.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 34b00edfbab70b..7e08ab10143329 100644 --- 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; From d91684c6782ec8a86a2e0457412cc517b3b83ebe Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 17 Jun 2020 10:47:05 +0100 Subject: [PATCH 2/2] try a more stabale transform block to utility --- packages/e2e-test-utils/src/transform-block-to.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js index 8de1debe491a83..478b90964a89d8 100644 --- 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.