Improve pre-publish panel styling #7879

sarahmonster · 2018-07-10T21:46:29Z

Before

This resolves #7878 and resolves #7873, by clarifying the microcopy used in the prompt here, and adjusting the styling to be more consistent with other sidebars in the UI.

After

How has this been tested?

Types of changes

Style & copy tweak.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

tofumatt

This looks/reads better. I have a few questions/thoughts about it though.

tofumatt · 2018-07-10T21:58:15Z

editor/components/post-publish-panel/style.scss

@@ -44,22 +45,25 @@

 .editor-post-publish-panel__link {
 	color: $blue-medium-700;
+	font-weight: 400;


Any chance we have variables for these, or are they hard-coded everywhere? 🤷‍♂️

Nope! Hard-coded everywhere. There aren't that many font-weights technically available, although an audit could be worth doing at some point during the high-shine polish stage.

tofumatt · 2018-07-10T21:58:21Z

editor/components/post-publish-panel/style.scss


 		.components-panel__body-toggle {
-			font-weight: 400;
+			//font-weight: 400;


tofumatt · 2018-07-10T21:59:46Z

editor/components/post-publish-panel/prepublish.js

@@ -26,7 +26,7 @@ function PostPublishPanelPrepublish( {
 	return (
 		<div className="editor-post-publish-panel__prepublish">
 			<div><strong>{ hasPublishAction ? __( 'Are you ready to publish?' ) : __( 'Are you ready to submit for review?' ) }</strong></div>
-			<p>{ hasPublishAction ? __( 'Here, you can do a last-minute check up of your settings below, before you publish.' ) : __( 'When you\'re ready, submit your work for review, and an Editor will be able to approve it for you.' ) }</p>
+			<p>{ hasPublishAction ? __( 'Double-check your settings, then use the button to publish your post.' ) : __( 'When you\'re ready, submit your work for review, and an Editor will be able to approve it for you.' ) }</p>


"the button" is a bit vague. Maybe the "Publish" button? But that's awkward. Why not:

Double-check your settings, then click "Publish".

Short and to-the-point.

"Click" is too desktop-centric, hence the vague wording—I'd like to stick with "use" for lack of a better term.

karmatosed · 2018-07-11T12:52:37Z

Interesting ideas @sarahmonster. I do think having this section look so close to the sidebar for document/block maybe is a step too far. Could we scale back have it reflect the design over be exact? Maybe we have the top section white for example. I think this is better as whilst it is a sidebar it isn't the same type of element. The content is different.

tofumatt · 2018-07-12T01:19:37Z

Making the top section white makes everything very low contrast and makes it hard to single out where the user should be looking. The most important info (eg: what to do next and why this modal appeared) is highlighted by the darker background in the new design.

Comparing the two screenshots my eyes immediately know where to look in the one with the dark grey background over the white, where my eyes just dart all over the place.

sarahmonster · 2018-07-12T09:44:42Z

For reference, this is what it looks like with the header section in white:

For readability and usability, I think the most important thing here is to retain the visual separation between panels.

I think the trouble here is that this sidebar pattern looks and functions almost exactly the same way as that other (pretty ubiquitous) sidebar pattern, with a few notable deviations. This makes it feel as though the difference here is accidental, rather than deliberate. There's also an odd visual thing where you end up with a very pronounced crosshair of grid lines in the top right of the screen, which commands focus.

If we don't want it to feel like the same element, a better solution might be to consider using a different element here, rather than a well-established pattern with a slight deviation. A drop-down from the interim publish button could work, and it's part of my suggestions for improvements in #7602.

karmatosed · 2018-07-12T20:31:01Z

I actually think the white sidebar works. The problem with a drop down is extending, what is someone puts a check in there, or 10?

tofumatt · 2018-07-12T20:51:55Z

The problem with a drop down is extending, what is someone puts a check in there, or 10?

It would scroll, just like it would need to if 10 checkboxes were in there on mobile. Though putting ten checkboxes in there is probably a UX bug 😉

I think the main issue with a dropdown that extends out of the publish button actually is that it's still not very attention-grabbing unless we blur/darken the rest of the editor. Which brings me to...

I actually think the white sidebar works.

While it looks visually "clean", I don't think it draws any attention to itself. I already find the pre-publish sidebar modal a bit strange as I expect the post to publish when I click publish–but if it isn't we should be clear about what to focus on.

If you want to keep the sidebar white, how about we grey out the editor?

karmatosed · 2018-07-12T21:07:43Z

I still feel for the format we have and patterns it being white makes sense. However as in #7602 other explorations may totally change this area. If we want an update to it right now then white would be the right pattern.

tofumatt · 2018-07-12T21:14:14Z

As mentioned: fine with it being white, but having more visual draw when it's the last step between writing and publishing is better than what we have now, where a user's eyes wander while they wonder why "Publish" didn't publish 😄

All white plus the greyed out editor (as you shouldn't be making editor changes at this point anyway) would be a good idea I think (and probably easy to implement and work well with stuff mentioned in #7879).

sarahmonster · 2018-08-03T09:14:01Z

I just realised this PR went stale, but in reviewing #8235 realised it's super confusing having the panels without any delineating border.

In the interests of pushing this through, I've switched the background to white. It'll likely change more as we iterate through the changes in #7602, but for the moment this is an improvement on what we currently have.

gziolo · 2018-08-03T11:16:43Z

I think originally @jasmussen and @youknowriad shaped how this panel looks and behaves in general. If we want to make it look closer to other sidebars, we should consider refactoring it in a way that avoids maintaining two different solutions for sidebars.

sarahmonster · 2018-08-03T11:25:03Z

Just to clarify, since there's been a bit of back-and-forth: this isn't an attempt to make it look more "sidebar-like", we've just adjusted the text strings and added back the separators between panels within the sidebar itself. This isn't intended to be a final solution, but rather a smaller iterative change to make this panel easier to use whilst we work on larger improvements to the overall flow.

Longer term, it'll likely be moving to using a different pattern entirely that's even less sidebar-ish than its current incarnation. 😄 For extensive discussion and preliminary mockups, see #7602.

gziolo · 2018-08-03T11:30:24Z

Cool, thanks for clarifications @sarahmonster 👍

I just wanted to avoid having code duplication which ends up looking the same for the end user. Nothing to worry about in such case and sadly no space to remove some code 😃

sarahmonster · 2018-08-03T11:36:57Z

I regret to inform you I am 100% planning on adding more code before we're all finished here. 😬

jasmussen · 2018-08-03T12:42:35Z

On this one, designwise, I'll defer to Tammie, I know she has lots of ideas around this one.

tofumatt

Code here looks good and I think this looks way better.

…#7878.

karmatosed

Let's try and get this in as a first step :)

sarahmonster · 2018-08-08T22:15:29Z

Let's do it.

:party-sheep:!

mtias · 2018-08-09T10:47:40Z

Thanks for the improvements here!

tofumatt reviewed Jul 10, 2018

View reviewed changes

karmatosed added Needs Design Feedback Needs general design feedback. [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... and removed Needs Design Feedback Needs general design feedback. labels Jul 11, 2018

sarahmonster mentioned this pull request Jul 12, 2018

Enhance the Publishing flow #7602

Closed

8 tasks

sarahmonster force-pushed the update/consistent-sidebar-panel-styling branch from 25eb5a1 to 50b84cb Compare August 3, 2018 09:08

sarahmonster requested a review from a team August 3, 2018 09:41

gziolo requested a review from jasmussen August 3, 2018 11:14

sarahmonster added the Needs Design Feedback Needs general design feedback. label Aug 8, 2018

sarahmonster mentioned this pull request Aug 8, 2018

PrePublishPanel: suggest tags and postformat #8235

Merged

9 tasks

tofumatt requested a review from karmatosed August 8, 2018 17:46

tofumatt approved these changes Aug 8, 2018

View reviewed changes

sarahmonster added 4 commits August 8, 2018 19:33

Use clearer wording for pre-publish panel prompt; fixes #7873.

f985210

Style pre-publish panel more consistently with settings sidebar; fixes …

09308a4

…#7878.

Nix commented-out CSS.

b013656

Switch to an all-white background for prepublish panel.

56abd87

sarahmonster force-pushed the update/consistent-sidebar-panel-styling branch from 50b84cb to 56abd87 Compare August 8, 2018 18:34

karmatosed approved these changes Aug 8, 2018

View reviewed changes

tofumatt removed the Needs Design Feedback Needs general design feedback. label Aug 8, 2018

tofumatt removed the request for review from jasmussen August 8, 2018 21:38

sarahmonster merged commit 315ce7e into master Aug 8, 2018

sarahmonster deleted the update/consistent-sidebar-panel-styling branch August 8, 2018 22:16

mtias added this to the 3.5 milestone Aug 9, 2018

dependabot-preview bot mentioned this pull request Dec 31, 2019

Bump @wordpress/i18n from 2.0.0 to 3.7.0 wearerequired/rest-likes#97

Closed

dependabot-preview bot mentioned this pull request Feb 4, 2020

Bump @wordpress/jest-console from 3.4.0 to 3.5.0 tdreyno/druyan#215

Merged

dependabot-preview bot mentioned this pull request Apr 15, 2020

Bump @wordpress/babel-plugin-makepot from 3.4.0 to 3.5.0 swissspidy/gutenberg-i18n-block#93

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve pre-publish panel styling #7879

Improve pre-publish panel styling #7879

sarahmonster commented Jul 10, 2018 •

edited by tofumatt

Loading

tofumatt left a comment

tofumatt Jul 10, 2018

sarahmonster Jul 10, 2018

tofumatt Jul 10, 2018

sarahmonster Jul 10, 2018

tofumatt Jul 10, 2018

sarahmonster Jul 10, 2018

karmatosed commented Jul 11, 2018

tofumatt commented Jul 12, 2018

sarahmonster commented Jul 12, 2018

karmatosed commented Jul 12, 2018

tofumatt commented Jul 12, 2018

karmatosed commented Jul 12, 2018

tofumatt commented Jul 12, 2018

sarahmonster commented Aug 3, 2018

gziolo commented Aug 3, 2018

sarahmonster commented Aug 3, 2018

gziolo commented Aug 3, 2018

sarahmonster commented Aug 3, 2018

jasmussen commented Aug 3, 2018

tofumatt left a comment

karmatosed left a comment

sarahmonster commented Aug 8, 2018

mtias commented Aug 9, 2018

Improve pre-publish panel styling #7879

Improve pre-publish panel styling #7879

Conversation

sarahmonster commented Jul 10, 2018 • edited by tofumatt Loading

Before

After

How has this been tested?

Types of changes

Checklist:

tofumatt left a comment

Choose a reason for hiding this comment

tofumatt Jul 10, 2018

Choose a reason for hiding this comment

sarahmonster Jul 10, 2018

Choose a reason for hiding this comment

tofumatt Jul 10, 2018

Choose a reason for hiding this comment

sarahmonster Jul 10, 2018

Choose a reason for hiding this comment

tofumatt Jul 10, 2018

Choose a reason for hiding this comment

sarahmonster Jul 10, 2018

Choose a reason for hiding this comment

karmatosed commented Jul 11, 2018

tofumatt commented Jul 12, 2018

sarahmonster commented Jul 12, 2018

karmatosed commented Jul 12, 2018

tofumatt commented Jul 12, 2018

karmatosed commented Jul 12, 2018

tofumatt commented Jul 12, 2018

sarahmonster commented Aug 3, 2018

gziolo commented Aug 3, 2018

sarahmonster commented Aug 3, 2018

gziolo commented Aug 3, 2018

sarahmonster commented Aug 3, 2018

jasmussen commented Aug 3, 2018

tofumatt left a comment

Choose a reason for hiding this comment

karmatosed left a comment

Choose a reason for hiding this comment

sarahmonster commented Aug 8, 2018

mtias commented Aug 9, 2018

sarahmonster commented Jul 10, 2018 •

edited by tofumatt

Loading