diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js index d4db1458635b5d..cedaa5466dd04c 100644 --- a/packages/components/src/popover/utils.js +++ b/packages/components/src/popover/utils.js @@ -138,6 +138,12 @@ export function computePopoverXAxisPosition( if ( boundaryElement ) { const boundaryRect = boundaryElement.getBoundingClientRect(); popoverLeft = Math.min( popoverLeft, boundaryRect.right - width ); + + // Avoid the popover being position beyond the left boundary if the + // direction is left to right. + if ( ! isRTL() ) { + popoverLeft = Math.max( popoverLeft, 0 ); + } } return { diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js index 61b4428a7d3748..6b0f11bd5e5d90 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js +++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js @@ -78,6 +78,10 @@ export default function SidebarBlockEditor( { setIsInserterOpened={ setIsInserterOpened } /> +
+ +
+ @@ -87,8 +91,6 @@ export default function SidebarBlockEditor( { - - { createPortal( // This is a temporary hack to prevent button component inside // from submitting form when type="button" is not specified. diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss new file mode 100644 index 00000000000000..6f200ba31144a6 --- /dev/null +++ b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss @@ -0,0 +1,5 @@ +.customize-widgets__contextual-toolbar-wrapper { + position: fixed; + // Appear over block placeholders, but under widgets page headings. + z-index: 8; +} diff --git a/packages/customize-widgets/src/style.scss b/packages/customize-widgets/src/style.scss index 96954c02100975..be1dad99a50136 100644 --- a/packages/customize-widgets/src/style.scss +++ b/packages/customize-widgets/src/style.scss @@ -1,3 +1,4 @@ +@import "./components/sidebar-block-editor/style.scss"; @import "./components/block-inspector-button/style.scss"; @import "./components/header/style.scss"; @import "./components/inserter/style.scss";