-
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
FocalPointPicker: Fix rendering and dragging experience #28096
Conversation
This update improves the FocalPointPicker component to ensure that the focal point UI is visible during dragging. The solution involved removing (an old) `.is-dragging` class that was attached to the focal point UI. At some point, `.is-dragging` (globally) was forced to be `display: none !important`. Also, `InputControl` drag update stability has been improved by removing the `pointer-event: none` disabling during drag.
Size Change: -31 B (0%) Total Size: 1.3 MB
ℹ️ View Unchanged
|
Need to fix the interaction weirdness for Safari (#25814 (comment)) Replicating in Safari
Still debugging, but this note may help others who are curious. At the start of the drag event, the Alternatively, in Chrome, the |
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.
Looks great in my testing :)
Wonderful! Thank you @youknowriad 🙏 |
It looks like we're having random E2E failures in this PR. (First E2E Admin 3, then E2E Admin 2) In that case, I'm going to move forward with the merge. |
Description
This update improves the FocalPointPicker component to ensure that the focal point UI is visible during dragging.
The solution involved removing (an old)
.is-dragging
class that was attached to the focal point UI.At some point,
.is-dragging
(globally) was forced to bedisplay: none !important
.Also,
InputControl
drag update stability has been improved by removing thepointer-event: none
disabling during drag.Resolves #25814
Tasks
How has this been tested?
Locally in Gutenberg and Storybook
npm run dev
Checklist: