css tweaks to grid and also hiding toggles on tabbiing through

WordPress · Apr 4, 2023 · 47e236d · 47e236d
1 parent 89d77f3
commit 47e236d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -24,10 +24,11 @@
 		border: 0;
 		&::after {
 			content: "\00B7";
-			font-size: 36px;
+			font-size: 16px;
+			line-height: $grid-unit-40 + $grid-unit-10;
 			position: absolute;
-			left: $grid-unit-40 + $grid-unit-15;
-			bottom: math.div($grid-unit, 2);
+			left: $grid-unit-40 + $grid-unit-15 + 2px;
+			bottom: $grid-unit-05;
 		}
 	}
 

diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -40,14 +40,14 @@
 	// The Toolbar component adds different styles to buttons, so we reset them
 	// here to the original button styles
 	.edit-post-header-document-toolbar__left > .components-button.has-icon:first-child {
-		margin-right: 10px;
+		margin-right: $grid-unit-10;
 	}
 
 	.edit-post-header-document-toolbar__left > .components-button.has-icon,
 	.edit-post-header-document-toolbar__left > .components-dropdown > .components-button.has-icon {
-		height: 32px;
-		min-width: 32px;
-		margin-right: 4px;
+		height: $grid-unit-40;
+		min-width: $grid-unit-40;
+		margin-right: $grid-unit-05;
 		padding: 0;
 		width: 32px;
 
@@ -68,10 +68,11 @@
 	& > .edit-post-header-document-toolbar__left button.components-button.edit-post-header-toolbar__block-tools-toggle.is-primary.has-icon {
 		height: $button-size;
 		min-width: $button-size;
-		padding: 6px;
 		background-color: #fff;
 		color: #000;
+		margin-left: $grid-unit-10;
 		border-left: 1px solid #ddd;
+		padding-left: $grid-unit-15;
 
 		&:hover {
 			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -246,9 +246,15 @@
 
 .maybeHide:focus-within {
 	position: relative;
-	top: math.div($grid-unit, 2) + 2;
+	top: 0;
 }
 
+.maybeHide:focus-within > .edit-post-header-document-toolbar .edit-post-header-document-toolbar__left > .components-button.edit-post-header-toolbar__block-tools-toggle,
+.maybeHide:focus-within + .edit-post-header-block-toolbar > .edit-post-header-toolbar__document-tools-toggle,
 .maybeHide:focus-within + .edit-post-header-block-toolbar > .edit-post-header-toolbar__inserter-toggle {
 	display: none;
 }
+
+.maybeHide:focus-within + .edit-post-header-block-toolbar {
+	padding-left: 0;
+}