From b5f6955742e784f11828e1dacba4361713135963 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 18 May 2021 09:30:17 +0800
Subject: [PATCH] Customizer: Implement mobile responsive block toolbar
 (#31589)

* Make the block toolbar sticky and add some styles for the editor topbar

* Set top position

* Update z-indices and responsive margins

* Remove sticky positioning from topbar
---
 packages/base-styles/_z-index.scss             |  6 ++++++
 .../src/components/header/style.scss           | 18 ++++++++++++++++++
 .../components/sidebar-block-editor/style.scss | 17 +++++++++++++++--
 .../customize-widgets/src/controls/style.scss  | 11 ++++++++---
 4 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 92efe18d7ecdb..9bd4afd324973 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -176,6 +176,12 @@ $z-layers: (
 	// Needs to be higher than .components-circular-option-picker__option.is-pressed.
 	".components-circular-option-picker__option.is-pressed + svg": 2,
 	".edit-navigation-layout__overlay": 999,
+
+	// Appear under the customizer heading UI, but over anything else.
+	".customize-widgets__topbar": 8,
+
+	// Appear under the topbar.
+	".customize-widgets__block-toolbar": 7,
 );
 
 @function z-index( $key ) {
diff --git a/packages/customize-widgets/src/components/header/style.scss b/packages/customize-widgets/src/components/header/style.scss
index c270bf5a82ecd..ae829441cb677 100644
--- a/packages/customize-widgets/src/components/header/style.scss
+++ b/packages/customize-widgets/src/components/header/style.scss
@@ -1,3 +1,21 @@
+.customize-widgets-header {
+	@include break-medium() {
+		// The mobile fixed block toolbar should be snug under the header.
+		margin-bottom: $grid-unit-60 + $default-block-margin;
+	}
+
+	// Offset the customizer's sidebar padding.
+	// Provide enough bottom margin to ensure the floating block toolbar isn't overlapped.
+	margin: -15px ( -$grid-unit-15 ) ( 0 ) ( -$grid-unit-15 );
+	padding: $grid-unit-15;
+
+	// Match the customizer grey background.
+	background: #f0f0f1;
+	border-bottom: 1px solid $gray-200;
+
+	z-index: z-index(".customize-widgets__topbar");
+}
+
 .customize-widgets-header-toolbar {
 	display: flex;
 	border: none;
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 c74cd056b4aff..abbe6b8445410 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
@@ -1,5 +1,18 @@
+.block-editor-block-contextual-toolbar.is-fixed {
+	// The top position used for the 'sticky' positioning.
+	top: 0;
+
+	// Offset the customizer's sidebar padding.
+	margin-left: -$grid-unit-15;
+	margin-right: -$grid-unit-15;
+	width: calc(100% + #{ $grid-unit-30 });
+
+	// Scroll sideways.
+	overflow-y: auto;
+	z-index: z-index(".customize-widgets__block-toolbar");
+}
+
 .customize-control-sidebar_block_editor .block-editor-block-list__block-popover {
 	position: fixed;
-	// Appear over block placeholders, but under widgets page headings.
-	z-index: 8;
+	z-index: z-index(".customize-widgets__block-toolbar");
 }
diff --git a/packages/customize-widgets/src/controls/style.scss b/packages/customize-widgets/src/controls/style.scss
index d30592205a6c1..500e3c9afc41e 100644
--- a/packages/customize-widgets/src/controls/style.scss
+++ b/packages/customize-widgets/src/controls/style.scss
@@ -1,6 +1,11 @@
-// Adds a white background to the block based widget section.
-// #customize-theme-controls id is required to add specificity.
-#customize-theme-controls .customize-widgets__sidebar-section {
+// Additional ids and class names are used in the selector for
+// added specificity.
+#customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section {
+	// Override the default 'overflow' to allow the
+	// editor toolbars to be sticky.
+	overflow: unset;
+
+	// Make the entire sidebar background white.
 	min-height: 100%;
 	background-color: $white;
 }