Refactor and make consistent post and site headers. (#25134)

WordPress · Sep 11, 2020 · 0a0885e · 0a0885e
1 parent e90b042
commit 0a0885e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/preview-options/style.scss b/packages/block-editor/src/components/preview-options/style.scss
@@ -1,5 +1,4 @@
 .block-editor-post-preview__dropdown {
-	margin-right: $grid-unit-15;
 	padding: 0;
 }
 

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -64,31 +64,26 @@
 /**
  * Buttons in the Toolbar
  */
+
 .edit-post-header__settings {
 	// Adjust button paddings to scale better to mobile.
-	.components-button.editor-post-save-draft,
 	.editor-post-saved-state,
-	.components-button.editor-post-switch-to-draft,
-	.components-button.editor-post-preview,
-	.components-button.block-editor-post-preview__dropdown {
-		padding: 0 #{ $grid-unit-15 / 2 };
+	.components-button.components-button {
 		margin-right: $grid-unit-05;
 
 		@include break-small() {
 			margin-right: $grid-unit-15;
 		}
 	}
 
-	.components-button.block-editor-post-preview__dropdown,
-	.components-button.editor-post-publish-button,
-	.components-button.editor-post-publish-panel__toggle {
+	.editor-post-saved-state,
+	.components-button.is-tertiary {
 		padding: 0 #{ $grid-unit-15 / 2 };
-		margin-right: $grid-unit-05;
+	}
 
-		@include break-small() {
-			padding: 0 $grid-unit-15;
-			margin-right: $grid-unit-15;
-		}
+	.edit-post-more-menu .components-button,
+	.interface-pinned-items .components-button {
+		margin-right: 0;
 	}
 }
 

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -13,7 +13,6 @@
 	align-items: center;
 
 	.edit-site-header-toolbar__inserter-toggle {
-		margin-left: 5px;
 		margin-right: $grid-unit-10;
 		min-width: $grid-unit-40;
 		width: $grid-unit-40;
@@ -31,9 +30,41 @@
 	margin: 0 -6px 0;
 }
 
+/**
+ * Buttons in the Toolbar
+ */
+
 .edit-site-header__actions {
-	display: flex;
-	margin-right: 8px;
+	// Adjust button paddings to scale better to mobile.
+	.editor-post-saved-state,
+	.components-button.components-button {
+		margin-right: $grid-unit-05;
+
+		@include break-small() {
+			margin-right: $grid-unit-15;
+		}
+	}
+
+	.editor-post-saved-state,
+	.components-button.is-tertiary {
+		padding: 0 #{ $grid-unit-15 / 2 };
+	}
+
+	.edit-site-more-menu .components-button,
+	.interface-pinned-items .components-button {
+		margin-right: 0;
+	}
+}
+
+.edit-site-header__actions {
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: wrap;
+	padding-right: $grid-unit-05;
+
+	@include break-small () {
+		padding-right: $grid-unit-20;
+	}
 }
 
 .edit-site-header__actions-more-menu {