From 482c1d5f2e404fdcaa0a69a0904d95a9ac1efdb5 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 2 Oct 2019 15:25:20 -0400
Subject: [PATCH 1/6] Horizontally center the post-publish button
---
packages/edit-post/src/components/layout/style.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 43996d98f8c8f..94922b141d75d 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -191,7 +191,7 @@
// 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
+ flex: 0 1 59px; // This number is approximative to keep the publish button at the same position when opening the panel
}
}
From 2556c5e8d552e599a02d5050c436dfeae3e8688a Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 2 Oct 2019 15:27:25 -0400
Subject: [PATCH 2/6] Move post-pubish close panel icon off the right edge
---
packages/editor/src/components/post-publish-panel/style.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 31654dcc64b00..4d5befb16a51e 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -17,6 +17,7 @@
.editor-post-publish-panel__header {
background: $white;
padding-left: 16px;
+ padding-right: 8px;
height: $header-height;
border-bottom: $border-width solid $light-gray-500;
display: flex;
From 98ca5990ac95d0c45c09db9560d516c778d42518 Mon Sep 17 00:00:00 2001
From: Mapk <uraine@gmail.com>
Date: Wed, 16 Oct 2019 11:48:20 -0700
Subject: [PATCH 3/6] Removed spacer and adjusted height of button. Centered
button as well so should work better with translations. Less code. More
button.
---
packages/edit-post/src/components/layout/style.scss | 4 +++-
packages/editor/src/components/post-publish-panel/index.js | 1 -
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 94922b141d75d..87058b1113f02 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -182,8 +182,10 @@
}
.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;
}
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index 9f5e0e6814e17..b6c5f5612c787 100644
--- 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
From cb228b154601572ee56e6792e7850b3c4f0847eb Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Sun, 3 Nov 2019 11:15:00 -0600
Subject: [PATCH 4/6] Update snapshot
---
.../post-publish-panel/test/__snapshots__/index.js.snap | 9 ---------
1 file changed, 9 deletions(-)
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
index 752b03174a55f..7cb1c2b47f7b2 100644
--- 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}
From de38da434cde77f670caa0f5274486228667fe68 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 7 Nov 2019 15:50:01 -0500
Subject: [PATCH 5/6] Remove editor-post-publish-panel__spacer selector
Now that we're no longer using it
---
packages/edit-post/src/components/layout/style.scss | 6 ------
1 file changed, 6 deletions(-)
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 0a4c7973c2ab1..df4b461807543 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -170,12 +170,6 @@
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 59px; // This number is approximative to keep the publish button at the same position when opening the panel
- }
}
.edit-post-toggle-publish-panel {
From abf0d9114ca3a2dc9d6bc69f3263a63f4eb52e6a Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 7 Nov 2019 15:50:49 -0500
Subject: [PATCH 6/6] Tweak positioning of "Close panel" to center "Publish"
button properly
---
.../editor/src/components/post-publish-panel/style.scss | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 36e9d06ebcca4..e008cd988ce39 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -15,13 +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 {