Gutenberg: Align publish button

[karmatosed]

Currently, the publish button floats in the middle of the screen :

[karmatosed]

If we aligned left it would be placed here:

[MichaelArestad]

What is the reason for the center alignment? Feels like a one-off? It probably should be aligned left.

Edit: The only reason I can think of is that when it is center aligned, it is similar in position to the original publish button so you don't have to move the cursor or your finger much.

[shaunandrews]

I think it looks centered right now because its aligned with the position of the Publish button in the normal Top Bar of Gutenberg. Making it wider could help it keep the appearance of that alignment, but also fill the space a little more and be easier to tap:

[shaunandrews]

If we wanna get fancy with it, we could add a transition to the button so it appears to grow in size when the publish sidebar appears.

[karmatosed]

I actually prefer it aligned left as stops us having the close and publish right next to each other. Beside each other, they feel like a trap we are laying down. We might be able to do something by swapping the preview and publish.

[karmatosed]

An interesting point the button changes anyway:

[MichaelArestad]

An interesting point the button changes anyway:

Yeah. That's what I saw. Worth testing as a PR.

[shaunandrews]

having the close and publish right next to each other.

On mobile, it seems to be more logical for the next action (publish) to be on the right. The cancel (or maybe it should be a back arrow?) would logically be on the left. (This would be reversed with rtl languages.)

[MichaelArestad]

On mobile, it seems to be more logical for the next action (publish) to be on the right. The cancel (or maybe it should be a back arrow?) would logically be on the left. (This would be reversed with rtl languages.)

That thought crossed my mind as well. A media query to change the close button position and button position on mobile could work. The downside is the close button would be in a different spot _just_ for this part of the flow.

I wonder if the button should be here:

Just some things to consider.

[mapk]

In the vein of @shaunandrews' comment, here's an idea of how that might look.

[karmatosed]

@mapk that mock covers the close though, I don't think < works as the action here. I actually don't think changing close to be < just in this case works as it's a pattern we use throughout so far. If we change it in other places it could change here of course.

[mapk]

@karmatosed yea, it doesn't "cover" the close X icon, just replaces it with the < icon. We do use this pattern elsewhere when shifting back to another view. For example in the editor Top Toolbar.

However, I'm completely open to other ideas and was just sharing some visuals. Because I agree that having the "Publish" button right next to the X feels like an accident waiting to happen, I'd be more in favor Michael's solution because it moves the "Publish" button away from the X.

[karmatosed]

Moving back to design feedback as not sure we have a clear way here yet (we are close though).

[enriquesanchez]

just FYI, the publish button was recently updated to be center aligned in https://github.com/WordPress/gutenberg/pull/17726

[folletto]

Taking Shaun's idea one step beyond — and noting that this means updating all the panels (pre, post) as it changes the ×, what if we make the top part with only buttons, and in a flexbox that extends always the full width?

This would have an extra benefit to make the top area work from zero to three buttons, and have also an explicit label for close. It would also mark the panel as clearly distinct from the other kind of panel (which uses the ×), supporting the perceptual difference between the two.

[paaljoachim]

Having a Publish and Cancel button would make it a lot cleaner, visually better and create better clarity then what exists today.

[enriquesanchez]

I think @folletto's exploration is much clearer to what we have now. We should definitively try this.

[karmatosed]

It looks like we have a decision on the way forward, so let's wrap up this feedback round and get a needs-dev label on this. Thanks everyone.

[juanfra]

I'd love to help on this one.

I started to make some tests and the only thing I found (If I understood correctly the way it should be implemented) is that once we have the two buttons one beside the other:

• When "Publish" is clicked, the "Cancel" button is just beside, but clicking that button won't cancel the publishing, and it'll close the panel instead.

I found this to be the only thing that could be misleading.

[paaljoachim]

Hey @juanfra

Thanks for getting involved!

Going through the existing process:

1. Default
   

Clicking Publish brings user to step 2.

--

1. Screen.
   

Clicking the X = Brings user back to default 1.
Clicking the Publish button. (Are you ready to publish?) brings user to step 3.

--

1. Published.
   

Clicking the X = Brings user to the next screen.

1. The published post/page.
   

---

The new process:

1. Default
   

Clicking Publish brings user to step 2.

--

1. Screen.
   

Clicking the Cancel button = Brings user back to default 1.
Clicking the Publish button. (Are you ready to publish?) brings user to step 3.

--

1. Published.
   

Clicking the Close buttons = Brings user to the next screen.

--

1. The published post/page.
   

[juanfra]

Thanks so much for the clarification, @paaljoachim! :)

I just submitted a PR with the proposed changes.

[paaljoachim]

I added an animated gif of what the new Publish button flow looks like.
https://github.com/WordPress/gutenberg/pull/22390#issuecomment-631031685