Fix off center post-publish button (#17726)

* Horizontally center the post-publish button * Move post-pubish close panel icon off the right edge * Removed spacer and adjusted height of button. Centered button as well so should work better with translations. Less code. More button. * Update snapshot * Remove editor-post-publish-panel__spacer selector Now that we're no longer using it * Tweak positioning of "Close panel" to center "Publish" button properly
WordPress · Nov 14, 2019 · 1490fd5 · 1490fd5
1 parent 852f266
commit 1490fd5
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 18 deletions.
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -163,17 +163,13 @@
 }
 
 .edit-post-layout .editor-post-publish-panel__header-publish-button {
+	justify-content: center;
+
 	// Match the size of the Publish... button.
-	.components-button.is-large {
+	.components-button {
 		height: 33px;
 		line-height: 32px;
 	}
-
-	// Size the spacer flexibly to allow for different button lengths.
-	.editor-post-publish-panel__spacer {
-		display: inline-flex;
-		flex: 0 1 52px; // This number is approximative to keep the publish button at the same position when opening the panel
-	}
 }
 
 .edit-post-toggle-publish-panel {

diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
@@ -75,7 +75,6 @@ export class PostPublishPanel extends Component {
 					) : (
 						<div className="editor-post-publish-panel__header-publish-button">
 							<PostPublishButton focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
-							<span className="editor-post-publish-panel__spacer"></span>
 						</div>
 					) }
 					<IconButton

diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
@@ -15,12 +15,18 @@
 
 .editor-post-publish-panel__header {
 	background: $white;
-	padding-left: 16px;
+	padding-left: 8px;
+	padding-right: 8px;
 	height: $header-height;
 	border-bottom: $border-width solid $light-gray-500;
 	display: flex;
 	align-items: center;
 	align-content: space-between;
+
+	.components-icon-button {
+		position: absolute;
+		right: 8px;
+	}
 }
 
 .editor-post-publish-panel__header-publish-button {

diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -84,9 +84,6 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
         focusOnMount={true}
         onSubmit={[Function]}
       />
-      <span
-        className="editor-post-publish-panel__spacer"
-      />
     </div>
     <ForwardRef(IconButton)
       aria-expanded={true}
@@ -123,9 +120,6 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
         focusOnMount={true}
         onSubmit={[Function]}
       />
-      <span
-        className="editor-post-publish-panel__spacer"
-      />
     </div>
     <ForwardRef(IconButton)
       aria-expanded={true}
@@ -162,9 +156,6 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
         focusOnMount={true}
         onSubmit={[Function]}
       />
-      <span
-        className="editor-post-publish-panel__spacer"
-      />
     </div>
     <ForwardRef(IconButton)
       aria-expanded={true}