Implements the image-cropper package in the editor. #73277
Merged
Conversation
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
ramonjd
requested review from
ajitbohra,
fabiankaegy and
juanmaguitar
as code owners
|
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. |
ramonjd
changed the title
|
Size Change: +1.62 kB (+0.06%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
ramonjd
force-pushed
the
update/integrate-image-cropper-package
branch
2 times, most recently
from
5d4d128 to
567351f
Compare
ramonjd
force-pushed
the
add/image-cropper-package
branch
from
8772f33 to
51947b4
Compare
ramonjd
force-pushed
the
update/integrate-image-cropper-package
branch
from
f61dc66 to
f44ed00
Compare
|
Flaky tests detected in a2b8598. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19753199851
|
ramonjd
force-pushed
the
update/integrate-image-cropper-package
branch
2 times, most recently
from
2ab009a to
5299fc4
Compare
ramonjd
added
[Block] Image
ramonjd
commented
Nov 19, 2025
packages/block-editor/src/components/image-editor/use-transform-image.js
Outdated
Show resolved
Hide resolved
ramonjd
requested review from
aaronrobertshaw,
andrewserong,
talldan and
tellthemachines
ramonjd
force-pushed
the
add/image-cropper-package
branch
from
8c30e4f to
b5697d5
Compare
ramonjd
force-pushed
the
update/integrate-image-cropper-package
branch
from
474ad31 to
a2b8598
Compare
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
The code changes specific to this PR LGTM but not sure why the image-cropper package is still appearing in the diff.
One thing I noticed while testing, which is unrelated to this PR as it also happens on trunk, is that when applying the cropper changes a notification pops up with an "undo" button. Clicking on that undo is irreversible, because it doesn't seem to be in sync with the post "undo" and "redo" buttons. Would be worth fixing separately.
- Added `@wordpress/image-cropper` dependency to package.json and tsconfig.json. - Replaced `react-easy-crop` with the new `ImageCropperComponent` in cropper.js. - Wrapped ImageEditor component with `ImageCropperProvider` for context management. - Updated useTransformImage hook to utilize the new image cropper state management. - Adjusted ZoomDropdown to handle zoom values correctly. This update enhances the image editing capabilities within the block editor by integrating a more robust image cropping solution.
ramonjd
force-pushed
the
update/integrate-image-cropper-package
branch
from
a2b8598 to
a30200e
Compare
Member
Author
|
Thanks for testing! Yep just needed a proper rebase. |
packages/block-editor/src/components/image-editor/use-transform-image.js
Outdated
Show resolved
Hide resolved
tellthemachines
approved these changes
Dec 1, 2025
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
LGTM! Preserving the set aspect ratio on rotation is a nice improvement.
packages/block-editor/src/components/image-editor/use-transform-image.js
Outdated
Show resolved
Hide resolved
andrewserong
reviewed
Dec 1, 2025
Contributor
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
One tiny detail: now that the image cropper package is being imported into the block-editor package, I think this means we'll need to remove the "private": true flag in the image cropper package (based on the discussion in #73633 (comment)):
andrewserong
approved these changes
Dec 2, 2025
Contributor
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
Code change otherwise looks good, and testing well for me, too. Nice work! 🚀
Member
Author
Good spotting! I'll update that in this PR then moige it! |
… access for publishing.
- Included new package entry for @wordpress/image-cropper in the manifest. - Updated markdown source path to point to the package's README.md. This addition enhances the documentation and visibility of the image cropper package within the project.
…ackage' into update/integrate-image-cropper-package
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Relies on #72414
What? How?
Implements the image-cropper package in the editor.
Kapture.2025-11-19.at.17.08.44.mp4
Why?
The image cropper component and hooks have been moved to their own package so they can be used across the app, and not just in side the block editor.
Testing
Insert an image block in the editor and crop the image. Make sure to rotate, zoom, and select different aspect ratios.
Save different crops.
There should be no regressions in the way images are cropped in the editor.
There are 2 main differences: