-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Browse Mode: Add snackbar notices #50794
Conversation
Size Change: +260 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
Flaky tests detected in 89b9581. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5025918587
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's working well. The 1.001 definitely feels hacky, but I'm not familiar enough with it to know what other options might be, and this is definitely better than no notice. I did find another issue: when you dismiss the snackbar the animation starts from the wrong location. I assume it's unrelated to this one.
I ran into this in a previous PR. It's coming from the |
If I remember properly, the reason the snackbars were not in the "edit" mode is that sometimes they can persist when leaving "edit" mode to "view" mode. I'm fine if that's considered "ok" though. |
89b9581
to
71e7af1
Compare
Ok, I've made the following changes to this PR:
IMO having the same snackbar notices in both contexts is a good, since they even stay in the same position, it helps to orient the user. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like it works exactly the same as it does in the post editor. I can't break it :)
@scruffian @jeryj I noticed this PR seems to break block toolbars in the site editor, they appear blurry (at least on my not particularly high pixel density display) and don't follow the block position like they used to: The scale explains the blur, but not sure on the rest of it. Hope you don't mind, but I think I'll put together a revert of this PR as it's quite a bad bug. edit: Revert PR here - #50937 |
What?
Adds Snackbar notices to browse mode.
Why?
Setting a transform property (in this case scale) on an element makes it act as a containing block for its descendants. This means that the snackbar notices inside this component are repositioned to be relative to this element. To avoid the snackbars jumping about we need to ensure that a transform property is always set. Setting a scale of 1 is interpred by framer as no change, so once the animation completes the transform property of this element is set to none, thus removing its role as a container block.
How?
We set the initial scale of this element to 1.0001 so that there is always a transform property set. If we set the initial scale to less than 1.001 then JavaScript rounds it to 1 and the problem reoccurs.
Other solutions are to set a perspective or filter property on the same element in CSS, which would potentially be simpler but also much less clear.
The issue this is solving (#50175) suggested moving this to the centre, but it's not clear whether we mean the centre of the window or of the site frame. This solution is fairly simple and gets the snackbars working. We can follow up with a design iteration to improve things.
Testing Instructions
Testing Instructions for Keyboard
Follow the steps as above and confirm that you are given notices.
Screenshots or screencast