"Site Updated" notice covers the Save button in the Site Editor sidebar

[carolinan]

Description

When you save a change using the "Save" button which is in the bottom part of the Styles sidebar, the confirmation notice covers the save button. Clicking on the notice does not close it.

In WordPress 6.5, the notice did not cover the save button, because it was displayed in the iframe.

Step-by-step reproduction instructions

Activate a block theme. Go to Appearance > Styles. Select and save a style. Confirm that the notice is positioned over the save button, covering it.

Screenshots, screen recording, code snippet

In 6.6:

https://github.com/WordPress/gutenberg/assets/7422055/e4be4f44-1cc2-4851-a53f-c8cbab5ae825

In 6.5:

Environment info

WordPress 6.6-RC2-58675 (through beta tester plugin), with and without Gutenberg trunk active

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[carolinan]

This is also true for notices in the DataViews. In this screenshot I have made a change to a template to activate the "Review 1 change" state of the save button, and then renamed a page:

[carolinan]

The position was most recently changed in https://github.com/WordPress/gutenberg/pull/61756 @youknowriad

[youknowriad]

@carolinan Yeah, we discussed this with @jameskoster and the outcome was that it's better to have a consistent position for snackbars that sometimes cover some part of the UI rather than snackbars that change places. Especially given that the snackbars are easily dismissible.

So I would say that with this tradeoff in mind, we should close this issue.

[carolinan]

I disagree, I think this is a rather big usability issue because I can not see that there are changes that need to be saved. In the video, I am trying to dismiss the notice by clicking on it, which I am usually able to do, and it is not working well.

[youknowriad]

I think there's a usability issue anyway in the alternative too (snack bars that moves position) and regardless of where you place snackbars, they will always cover something.

[jameskoster]

I am trying to dismiss the notice by clicking on it, which I am usually able to do, and it is not working well.

That's a separate issue worth looking into. When you click the Rename action the menu stays open. So you have to click twice to dismiss the Snackbar (once to dismiss the open menu, and again on the Snackbar itself).

The obvious suggestion would be to close the menu when you click "Rename". However that opens a question about where focus should land if you cancel the rename action.

[carolinan]

So, can we move the save button and revisions?

[jameskoster]

I don't think so. Like Riad said, Snackbars will inherently always cover part of the UI. The only way to eliminate that is to not use them at all. If they also behave unpredictably by appearing in different locations, or shuffling the rest of the UI to accommodate them that only adds another problem.

One approach to consider is identifying which location consistently has more high-traffic UI elements and adjusting the Snackbar position accordingly. For example, it might be beneficial to pin the Snackbars at the bottom-center rather than the bottom-left.

I also feel that part of the solution here is to make the Snackbar more easily dismissible.