Top Toolbar: Prevent the focus outline of the button from being cut o…

…ff (#54172)
WordPress · Sep 6, 2023 · f22c8df · f22c8df
1 parent a428580
commit f22c8df
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
@@ -132,7 +132,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 
 		const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
 		const pinnedItemsWidth = computedPinnedItemsStyle
-			? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding
+			? parseFloat( computedPinnedItemsStyle.width )
 			: 0;
 		const leftHeaderWidth = computedLeftHeaderStyle
 			? parseFloat( computedLeftHeaderStyle.width )
@@ -143,6 +143,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			leftHeaderWidth +
 			pinnedItemsWidth +
 			marginLeft +
+			( pinnedItems || leftHeader ? 2 : 0 ) + // Prevents button focus border from being cut off
 			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
 		}px)`;
 	}, [

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -93,15 +93,6 @@ body.js.block-editor-page {
 
 @include wordpress-admin-schemes();
 
-.interface-interface-skeleton__header .edit-post-header {
-	@supports (scrollbar-gutter: stable) {
-		// The scrollbar-gutter property ensures space is reserved for the scrollbar to appear,
-		// when scrollbars are set to be always visible. This ensure icons stay visually aligned.
-		scrollbar-gutter: stable;
-		overflow: hidden;
-	}
-}
-
 // The edit-site package adds or removes the sidebar when it's opened or closed.
 // The edit-post package, however, always has the sidebar in the canvas.
 // These edit-post specific rules ensures there isn't a border on the right of