Chrome: Do not show the publish panel when updating/scheduling/submitting a post #4157

youknowriad · 2017-12-25T08:38:21Z

This PR updates the publish panel behavior.
The panel is now only shown when "publishing" a post. It's not shown when we update an existing post, schedule a post or submit for review.

Related #3496 (comment)

Testing instructions

Create a new post
Click publish
The publish panel should show up
Publish the post
Edit the post
Click update
The publish panel should not show up

noisysocks

Works great in my testing! 😄✨

Not related, but the Publish and Settings button in the Header don't quite align properly on mobile:

Also, maybe it's just me, but the 'Switch to Draft' button looks a little visually unbalanced in its new home next to the 'Move to trash' button:

noisysocks · 2017-12-27T23:38:46Z

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

@@ -33,17 +46,31 @@ function PostPublishPanelToggle( { isSaving, isPublishable, isSaveable, isPublis
 			disabled={ ! isButtonEnabled }
 			isBusy={ isSaving && isPublished }
 		>
-			<PostPublishButtonLabel />
-			<Dashicon icon="arrow-down" />
+			<PostPublishButtonLabel />...


Unfortunately appending the ellipsis like this won't work for RTL languages such as Hebrew.

Perhaps we could pass a prop to PostPublishButtonLabel and change the localised string accordingly:

// editor/components/post-publish-panel/toggle.js:49 <PostPublishButtonLabel showEllipsis={ true } /> // editor/components/post-publish-button/label.js:50 return showEllipsis ? __( 'Publish…' ) : __( 'Publish' );

I guess we already checked that we're publishing here so we might just replace the component with __( 'Publish…' )

noisysocks · 2017-12-27T23:51:07Z

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

+	const isContributor = user.data && ! userCanPublishPosts;
+	const showToggle = ! isContributor && ! isPublished && ! isBeingScheduled;
+
+	if ( ! showToggle ) {


It feels a little weird to me that rendering one component (PostPublishPanelToggle) might render a completely different component (PostPublishButton).

Perhaps this logic should be hoisted out into Header or into a new wrapper component?

The idea is to avoid using the post selectors in the edit-post directory which should be concerned only about UI and should be moved to a separate module in the future.

But you're right UI and state are a bit mixed here but that's the "balance" I've found for now.
Maybe I should rename the component something like PublishToggleOrUpdate :)

Once the data module is updated with state exposing capabilities, we could move some of this logic outside the components folder and still access exposed data from the editor module.

youknowriad · 2017-12-28T08:17:40Z

Thanks for the review @noisysocks I've fixed the mobile publish button and the i18n issue.
I don't have a better idea for the "switch to draft" button. Open to suggestions and design 👀.

jasmussen · 2018-01-04T09:30:39Z

Thank you for working on this. Sorry I wasn't here to comment sooner. I think this is 99% there.

Given that the "Saved" affordance more more less disappears when you've published a post, can we simply put the "Switch to Draft" button in the editor bar where the save indicator used to be? Quick and dirty mockup:

On mobile we'd keep this button in the sidebar (so you'd have to open the cog). But we'd only want one, i.e. mobile: sidebar. Desktop, only in editor bar.

What do you think?

youknowriad · 2018-01-04T09:49:19Z

@jasmussen I personally don't think this action is important enough to put it in the header. But at the same time, I don't have a better option than what we have in this PR.

jasmussen · 2018-01-04T10:18:39Z

I personally don't think this action is important enough to put it in the header. But at the same time, I don't have a better option than what we have in this PR.

I think it actually is — keep in mind that you see this big button ONLY when the pust has been published already. The two key actions you might want to take on such a post is "omfg i published too soon" (perhaps they disabled the publish confirm dialog) and want to just quickly unpublish, or they want to update the post.

This also means if you feel like the button is visually intrusive, you'd only see it once published, so it wouldn't bug you most of the time.

We could visually simplify it by making it into a blue link, like the "Save Draft" action?

youknowriad · 2018-01-04T10:37:42Z

@jasmussen Ok convinced! I'll try 👍

youknowriad · 2018-01-04T10:54:16Z

Actually, it makes a lot of sense to show it similarily to the "save draft" link.

It can be considered the same link since before publishing it says "save draft" and after it says "switch to draft"

Update the PR with this

jasmussen · 2018-01-04T11:15:52Z

Here's a screenshot of how it looks now. I love it:

I know @mtias has thoughts on this, but I think this is sort of perfect.

I discovered a little bug, though. If you abandon a post mid-publish, the popover returns when you press add new. Steps to reproduce:

Write a new post.
Click "Publish..." but do not publish
Click "Add New"

Observe that your new post starts with the publish dialog already present.

youknowriad · 2018-01-04T11:17:00Z

@jasmussen yes, it's tracked here #4248

jasmussen · 2018-01-04T11:18:16Z

Perfect, then 👍 👍 from me on the design, though I'd like Matías' thoughts before we merge. Switch to Draft is close to his heart.

…ting a post

youknowriad · 2018-01-05T11:23:24Z

@mtias waiting for your input here :)

mtias · 2018-01-05T11:33:23Z

"Switch to draft" at the top looks alright to me, let's try it :)

jasmussen · 2018-01-05T11:48:02Z

💥

aduth · 2018-03-06T22:01:18Z

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

@@ -33,17 +46,31 @@ function PostPublishPanelToggle( { isSaving, isPublishable, isSaveable, isPublis
 			disabled={ ! isButtonEnabled }
 			isBusy={ isSaving && isPublished }
 		>
-			<PostPublishButtonLabel />
-			<Dashicon icon="arrow-down" />
+			{ __( 'Publish...' ) }


Poor man's ellipsis: ... (not semantically meaningful)
Rich man's ellipsis: … (semantically meaningful)

youknowriad added the General Interface Parts of the UI which don't fall neatly under other labels. label Dec 25, 2017

youknowriad self-assigned this Dec 25, 2017

youknowriad requested review from mcsf and jasmussen December 25, 2017 08:38

This was referenced Dec 25, 2017

Chrome: Add a Post Publish Panel #4158

Merged

Chrome: Replace the publish dropdown by a sidebar panel #4119

Merged

noisysocks reviewed Dec 28, 2017

View reviewed changes

youknowriad added 5 commits January 4, 2018 16:24

Chrome: Do not show the publish panel when updating/scheduling/submit…

bbbadfe

…ting a post

Chrome: Move the SwitchToDraft button out of the publish panel

a204301

Publish Button: Fix Label for Translation purpose

02ea038

Publish Button: Fix styling on mobile

ab2455b

Chrome: Move the SwitchToDraft button to the header

1dedd21

youknowriad force-pushed the update/publish-flow-2 branch from 4c81101 to 1dedd21 Compare January 4, 2018 15:24

youknowriad merged commit daab739 into master Jan 5, 2018

youknowriad deleted the update/publish-flow-2 branch January 5, 2018 11:44

aduth reviewed Mar 6, 2018

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chrome: Do not show the publish panel when updating/scheduling/submitting a post #4157

Chrome: Do not show the publish panel when updating/scheduling/submitting a post #4157

youknowriad commented Dec 25, 2017

noisysocks left a comment

noisysocks Dec 27, 2017

youknowriad Dec 28, 2017

noisysocks Dec 27, 2017

youknowriad Dec 28, 2017

youknowriad Dec 28, 2017

youknowriad commented Dec 28, 2017

jasmussen commented Jan 4, 2018

youknowriad commented Jan 4, 2018

jasmussen commented Jan 4, 2018

youknowriad commented Jan 4, 2018

youknowriad commented Jan 4, 2018 •

edited

Loading

jasmussen commented Jan 4, 2018

youknowriad commented Jan 4, 2018

jasmussen commented Jan 4, 2018

youknowriad commented Jan 5, 2018

mtias commented Jan 5, 2018

jasmussen commented Jan 5, 2018

aduth Mar 6, 2018

Chrome: Do not show the publish panel when updating/scheduling/submitting a post #4157

Chrome: Do not show the publish panel when updating/scheduling/submitting a post #4157

Conversation

youknowriad commented Dec 25, 2017

noisysocks left a comment

Choose a reason for hiding this comment

noisysocks Dec 27, 2017

Choose a reason for hiding this comment

youknowriad Dec 28, 2017

Choose a reason for hiding this comment

noisysocks Dec 27, 2017

Choose a reason for hiding this comment

youknowriad Dec 28, 2017

Choose a reason for hiding this comment

youknowriad Dec 28, 2017

Choose a reason for hiding this comment

youknowriad commented Dec 28, 2017

jasmussen commented Jan 4, 2018

youknowriad commented Jan 4, 2018

jasmussen commented Jan 4, 2018

youknowriad commented Jan 4, 2018

youknowriad commented Jan 4, 2018 • edited Loading

jasmussen commented Jan 4, 2018

youknowriad commented Jan 4, 2018

jasmussen commented Jan 4, 2018

youknowriad commented Jan 5, 2018

mtias commented Jan 5, 2018

jasmussen commented Jan 5, 2018

aduth Mar 6, 2018

Choose a reason for hiding this comment

youknowriad commented Jan 4, 2018 •

edited

Loading