Top Toolbar styles

Allows block tools in dom header to overflow scroll using flex-shrink. Every element parent of the scrolling toolbar needs an overflow-x: hidden and flex-shrink: 2 (or higher) value.

Also sets the small screen size to have the fixed toolbar underneath the header bar.

packages/edit-post/src/components/header/style.scss

@@ -6,6 +6,7 @@
 	align-items: center;
 	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
+	justify-content: space-between;
 
 	// Make toolbar sticky on larger breakpoints
 	@include break-zoomed-in {
@@ -33,7 +34,14 @@
 
 .edit-post-header__toolbar {
 	display: flex;
-	flex-grow: 1;
+	// Allow this area to shrink to fit the toolbar buttons.
+	flex-shrink: 8;
+	// Take up the space of the toolbar so it can be justified to the left side of the toolbar.
+	flex-grow: 3;
+	// Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar.
+	overflow: hidden;
+	// Leave enough room for the focus ring to show.
+	padding: 2px 0;
 
 	.table-of-contents {
 		display: none;
@@ -54,8 +62,19 @@
 			position: static;
 			// remove the border
 			border: none;
+			flex-shrink: 2;
+			display: flex; // Allow for flex-shrink on the block toolbar
+		}
+
+		.block-editor-block-toolbar {
+			overflow-x: auto; // Allow only the block tools to overflow scroll to make room in the header.
 		}
 	}
+
+	.selected-block-tools-wrapper {
+		flex-shrink: 2;
+		overflow-x: hidden;
+	}
 }
 
 .edit-post-header__center {
@@ -71,7 +90,7 @@
 .edit-post-header__settings {
 	display: inline-flex;
 	align-items: center;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	padding-right: $grid-unit-05;
 
 	@include break-small () {

packages/edit-site/src/components/header-edit-mode/style.scss

@@ -17,7 +17,15 @@ $header-toolbar-min-width: 335px;
 		border: none;
 		align-items: center;
 		flex-shrink: 2;
+		// We need this to be overflow hidden so the block toolbar can
+		// overflow scroll. If the overflow is visible, flexbox allows
+		// the toolbar to grow outside of the allowed container space.
 		overflow: hidden;
+		// Take up the full height of the header so the border focus
+		// is visible on toolbar buttons.
+		height: 100%;
+		// Allow focus ring to be fully visible on furthest right button.
+		padding-right: 2px;
 	}
 
 	.edit-site-header-edit-mode__end {
@@ -207,8 +215,13 @@ $header-toolbar-min-width: 335px;
 }
 
 .has-fixed-toolbar {
-	.selected-block-tools-wrapper.is-collapsed {
-		display: none;
+	.selected-block-tools-wrapper {
+		flex-shrink: 4;
+		overflow-x: scroll;
+
+		&.is-collapsed {
+			display: none;
+		}
 	}
 
 	.edit-site-header-edit-mode__center.is-collapsed {

packages/edit-site/src/components/layout/index.js

@@ -192,6 +192,7 @@ export default function Layout() {
 						'is-full-canvas': isFullCanvas,
 						'is-edit-mode': isEditing,
 						'has-fixed-toolbar': hasFixedToolbar,
+						'is-block-toolbar-visible': hasBlockSelected,
 					}
 				) }
 			>

packages/edit-site/src/components/layout/style.scss

@@ -40,6 +40,15 @@
 	z-index: z-index(".edit-site-layout__header-container");
 }
 
+// Make room for the header when a block is selected.
+.is-block-toolbar-visible .edit-site-layout__header-container {
+	padding-bottom: $admin-bar-height-big + 1px;
+
+	@include break-medium() {
+		padding-bottom: 0;
+	}
+}
+
 .edit-site-layout__header {
 	height: $header-height;
 	display: flex;

packages/edit-widgets/src/components/header/style.scss

@@ -9,12 +9,40 @@
 	@include break-small {
 		overflow: visible;
 	}
+
+	.selected-block-tools-wrapper {
+		display: flex;
+		flex-shrink: 2;
+		overflow-x: hidden;
+	}
+
+	.block-editor-block-contextual-toolbar.is-fixed {
+		position: fixed;
+		top: $admin-bar-height-big + $header-height + 1px; // +1px to avoid overlap with the header border
+		left: 0;
+		width: 100%;
+
+		@include break-medium() {
+			width: auto;
+			position: static;
+			// remove the border
+			border: none;
+			display: flex; // Allow for flex-shrink on the block toolbar
+			flex-shrink: 2;
+		}
+
+		.block-editor-block-toolbar {
+			overflow-x: auto; // Allow only the block tools to overflow scroll to make room in the header.
+		}
+	}
 }
 
 .edit-widgets-header__navigable-toolbar-wrapper {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	flex-shrink: 2;
+	overflow-x: hidden;
 	padding-left: $grid-unit-20;
 }