Multi-entity save: reverse order of save and cancel buttons when saving in the frame

[annezazu]

When saving changes in the frame rather than in the canvas, the order of the buttons should be reversed to make it more obvious to click the primary call to action ("save"). Generally, the primary action for items is often found on the right side.

Current:

Proposed

Of note, currently when saving in the canvas/editor, we show a similar order to the current and I wonder if we should also update there:

cc @WordPress/gutenberg-design for more context and thoughts.

[jasmussen]

I would think both of these interfaces could use substantial design refreshes. But that shouldn't block this.

[jameskoster]

I wonder if we should also update there

That will probably be necessary to avoid falling foul of a11y requirements (visual order should match DOM order).

[richtabor]

One note: if the save and cancel buttons are inverted in the second publish sidebar, when you press Save and the sidebar opens up, you'll press the cancel button almost immediately.

[jasmussen]

One thing we could do, which I've seen discussed in other comments, is move the save/publish button almost all the way to the right:

Figma.

[richtabor]

One thing we could do, which I've seen discussed in other comments, is move the save/publish button almost all the way to the right:

If we do, should the Inspector icon always be first next to it? So that it's consistently in the same place?

[jasmussen]

Yes, like so, good catch: