Skip to content

Conversation

@n2erjo00
Copy link
Contributor

What?

In the block editor using Image block if image has a link it is impossible to use crop action. This PR fixes that issue.

Why?

Closes #60081

How?

When editor adds <a> tag around the image, the link has inline styles. One of those styles is pointer-events: none which will block all actions related directly to link and all its children. This PR removes that style because it creates the issue and it is redundant since <a> already has onClick handler which prevents user from triggering link action

Testing Instructions

  1. Open any post or page in the editor
  2. Insert "Image" block and set a image there
  3. Crop that image. You now should have brand new cropped image in the editor (and public side). This is for reference, actual testing starts now.
  4. Set new Image block and set a image there
  5. Add link around the image. Actual URL does not matter
  6. Try to click link (in the editor) and observe nothing happens
  7. Crop that image and enjoy your new cropped image in the public side

Also linked issue contains really good documentation how the issue can be replicated.

Testing Instructions for Keyboard

Screenshots or screencast

@github-actions
Copy link

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: n2erjo00 <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: MadtownLems <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@michalczaplinski michalczaplinski added [Type] Bug An existing feature does not function as intended [Package] Block library /packages/block-library [Block] Image Affects the Image Block labels Apr 2, 2024
Copy link
Contributor

@michalczaplinski michalczaplinski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes sense to me. I've tested it and it fixes the issue 🙂 .

Thank you for the fix @n2erjo00 !

@michalczaplinski michalczaplinski merged commit 3700871 into WordPress:trunk Apr 2, 2024
@github-actions github-actions bot added this to the Gutenberg 18.1 milestone Apr 2, 2024
cbravobernal pushed a commit to garridinsi/gutenberg that referenced this pull request Apr 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Image Affects the Image Block [Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Image Cropping via Block Toolbar doesn't work when Image is a Link (cannot drag)

2 participants