Skip to content
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

Removed pointer-events none inline style due it blocking crop action #60305

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

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 <n2erjo00@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>

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
63 of 65 checks passed
@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
…ordPress#60305)

Co-authored-by: n2erjo00 <n2erjo00@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>
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