diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss index abbe6b84454103..3f9ea52021d984 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss +++ b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss @@ -13,6 +13,14 @@ } .customize-control-sidebar_block_editor .block-editor-block-list__block-popover { - position: fixed; + // FloatingUI library used in Popover component forces us to have an "absolute" inline style. + // We need to override this in the customizer. + position: fixed !important; z-index: z-index(".customize-widgets__block-toolbar"); } + +.customize-widgets-popover .components-popover { + // FloatingUI library used in Popover component forces us to have an "absolute" inline style. + // We need to override this in the customizer. + position: fixed !important; +} diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js index d584e05465dafb..f7907da35494bc 100644 --- a/test/e2e/specs/widgets/customizing-widgets.spec.js +++ b/test/e2e/specs/widgets/customizing-widgets.spec.js @@ -52,6 +52,11 @@ test.describe( 'Widgets Customizer', () => { ) ).toBeVisible(); + // Clear block selection, so the block toolbar isn't visible. + await page.evaluate( () => { + window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock(); + } ); + await widgetsCustomizerPage.addBlock( 'Heading' ); await page.keyboard.type( 'My Heading' );