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

@@ -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 ) {

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;

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");
 }

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;
 }