Gutenberg: Move positioning of page update success message

[pojke]

When updating a permalink in Gutenberg and publishing the page, we're losing an access to the permalink. It's a bad UX as a user wants to confirm that the permalink is changed

Ideally the success message would be above the editor so there's no way it hovers over any element.

[maddisondesigns]

This is another good reason for making that Post updated message auto-close, as it hides content - #4495

[karmatosed]

I would like us to consider not having this message at all. Could we update enough information in the 'saved' indicator without this?

[pojke]

@karmatosed I'd say it's an option, however, there's a couple important considerations:

1. The failed message is in the same place, I think it's much more important than "saved" to be quite visible and distinct
2. Mobile version and the amount of text you can fit on mobile (currently has only an icon afaik)

[karmatosed]

@pojke good points, I do think it's worth exploring though how this could look. Is it in the right place? Is it the right styling?

[jasmussen]

It seems like this issue can be improved in two ways:

1. Adjust the permalink interface so it isn't covered by the notice. I believe there's a separate ticket both for redesigning that interface, but we can also make the notice slightly smaller in height and go a long way.
2. Add a feature to the notice component that allows it to fade out.

2 is somewhat bigger, but is probably the best long term fix for this. Things like "Post updated" and "Post published" are probably fine to fade out after a short delay, whereas things like "Post failed saving, connection issues" should not fade out.

So let's keep this issue in the pool and hope that pull requests trickle in here!

[designsimply]

I added the Good First Issue label for the following two action items noted above:

1. Make notices smaller in height.
2. Make non-critical notices fade out.

Regarding redesigning the UI for permalinks, I couldn't find an open issue for that. I organized open issues in to a label: https://github.com/WordPress/gutenberg/labels/Permalinks

[greatislander]

In WordPress 5.0 this behaviour is still there, with the updated notice blocking the permalink above the post/page title:

Since WordPress < 5.0 supports notices with a fade class which fades them out, I think @jasmussen / @designsimply's second points above would be a good place to start? If so I would be interested in starting to work on a PR for this…

[mapk]

I see a couple options here:

1. Title block becomes its own block.
Phase 2 plans to break out the Title Block to be its own block [#11553]. There's discussion about what to do with the URL field on that issue. This will likely solve this issue of having the URL hid under the messaging.

2. Take advantage of the disabled "Publish" button.
Swap the disabled "Publish" button with a "View Post" btn instead. Just throwing this out there b/c I'm not sure its been explored yet.

Current view:

Possible iteration:

I do believe the latter option fails in a couple ways:

1. The button still being blue really isn't enough visual feedback to indicate a successful publish.
2. There's just no emotional "Yeah, I did it!" feeling there.

[mapk]

Ultimately, if we think the Title Block issue will resolve this, we might be able to close this issue. Any thoughts?

[jasmussen]

Glad to find this ticket again! It is a perfect ticket to keep open and resolve by porting the improvements that were made in https://github.com/WordPress/gutenberg/pull/12301#issuecomment-441572057.

I think I'll try and assign myself on this one and make that happen.

To clarify — the improvements made in the PR linked above _push down the editing canvas_ when notices appear. This solves the problem entirely, in a great way.

Title block discussions are good to have, but IMO irrelevant to this ticket.