From f297e20c7e71d0b2dab1838c9270b13817f49264 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 22 Apr 2021 17:42:50 +0800
Subject: [PATCH 1/4] Add a fixed wrapper around the popover slot

---
 .../src/components/sidebar-block-editor/index.js              | 4 +++-
 .../src/components/sidebar-block-editor/style.scss            | 3 +++
 packages/customize-widgets/src/style.scss                     | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 packages/customize-widgets/src/components/sidebar-block-editor/style.scss

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..9fc964dc6b3c5c 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -87,7 +87,9 @@ export default function SidebarBlockEditor( {
 					</BlockSelectionClearer>
 				</SidebarEditorProvider>
 
-				<Popover.Slot name="block-toolbar" />
+				<div className="customize-widgets__contextual-toolbar-wrapper">
+					<Popover.Slot name="block-toolbar" />
+				</div>
 
 				{ createPortal(
 					// This is a temporary hack to prevent button component inside <BlockInspector>
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..0fc492d7cbf68e
--- /dev/null
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
@@ -0,0 +1,3 @@
+.customize-widgets__contextual-toolbar-wrapper {
+	position: fixed;
+}
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";

From e6aee40ff904a7159bd236015f9adced3ee66a23 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 22 Apr 2021 17:46:23 +0800
Subject: [PATCH 2/4] Update the popover positioning algorithm to avoid
 offscreening the toolbar

---
 packages/components/src/popover/utils.js | 6 ++++++
 1 file changed, 6 insertions(+)

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 {

From d04650d7d04d902697b9afb516a7720223479c35 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 22 Apr 2021 17:51:07 +0800
Subject: [PATCH 3/4] Update z-index

---
 .../src/components/sidebar-block-editor/style.scss              | 2 ++
 1 file changed, 2 insertions(+)

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 0fc492d7cbf68e..6f200ba31144a6 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
@@ -1,3 +1,5 @@
 .customize-widgets__contextual-toolbar-wrapper {
 	position: fixed;
+	// Appear over block placeholders, but under widgets page headings.
+	z-index: 8;
 }

From 04fe039299b135ff2b2fcc6ee1843d5a4647b453 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 22 Apr 2021 17:51:31 +0800
Subject: [PATCH 4/4] Move toolbar position in DOM to fix tabbing order

---
 .../src/components/sidebar-block-editor/index.js          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 9fc964dc6b3c5c..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 }
 					/>
 
+					<div className="customize-widgets__contextual-toolbar-wrapper">
+						<Popover.Slot name="block-toolbar" />
+					</div>
+
 					<BlockSelectionClearer>
 						<WritingFlow>
 							<ObserveTyping>
@@ -87,10 +91,6 @@ export default function SidebarBlockEditor( {
 					</BlockSelectionClearer>
 				</SidebarEditorProvider>
 
-				<div className="customize-widgets__contextual-toolbar-wrapper">
-					<Popover.Slot name="block-toolbar" />
-				</div>
-
 				{ createPortal(
 					// This is a temporary hack to prevent button component inside <BlockInspector>
 					// from submitting form when type="button" is not specified.