Image Cropper: Try a simpler alternative for showing interactive grid lines#77735
Open
andrewserong wants to merge 2 commits intotrunkfrom
Open
Image Cropper: Try a simpler alternative for showing interactive grid lines#77735andrewserong wants to merge 2 commits intotrunkfrom
andrewserong wants to merge 2 commits intotrunkfrom
Conversation
andrewserong
added
[Feature] Media
|
Size Change: +335 B (0%) Total Size: 7.82 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 1c4b654. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25039679565
|
ramonjd
reviewed
Apr 28, 2026
Comment on lines
+424
to
+434
| state.pan.x, | ||
| state.pan.y, | ||
| state.zoom, | ||
| state.rotation, | ||
| state.cropRect.x, | ||
| state.cropRect.y, | ||
| state.cropRect.width, | ||
| state.cropRect.height, | ||
| state.flip.horizontal, | ||
| state.flip.vertical, | ||
| showGrid, |
Member
There was a problem hiding this comment.
This is a hard one! Thanks for trying another approach.
I’m seeing a couple of things. The grid fades while a crop handle is still held down... I guess this is because the timeout expires even though the resize gesture is still active. Wondering if we could show on onResizeStart and only start the fade from onResizeEnd?
Kapture.2026-04-28.at.18.51.44.mp4
Rotating 90 deg could be excluded like flip/reset. For me, rotation changes the framing, but it doesn’t feel like the same direct placement operation as pan, zoom, or crop resize.
I managed to dig up my test branch. I haven't gone through the code deeply yet, so it might be just bloat.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
This is a slightly simpler alternative to #77683 for showing an interactive state for grid lines in the experimental image editor
Why?
I went down a bit of a rabbithole in #77683 trying to ensure that the grid lines always show while the mouse cursor is down. The approach here tries to be simpler about it and just examine internal state changes, with a (hopefully) comfortable in-between timeout of
500ms. The sweet spot we want is for the grid lines to be shown long enough to be useful, but not overstay their welcome and feel sluggish.At the same time, we want to make sure that Reset and Flip actions are excluded from showing grid lines.
How?
interactiveoption for theshowGridprop500msTesting Instructions
Enable the media editor modal experiment and have a play with all the controls — do the grid lines show when you expect them to, and hide when you expect them to?
Screenshots or screencast
2026-04-28.17.22.18.mp4
Use of AI Tools
Claude Code