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.

Sign up for GitHub

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

Jump to bottom

JS error when clicking Crop button on Image block #90791

Closed
jsnajdr opened this issue May 16, 2024 · 4 comments · Fixed by #90849
Closed

JS error when clicking Crop button on Image block #90791

jsnajdr opened this issue May 16, 2024 · 4 comments · Fixed by #90849
Assignees
@jsnajdr
Labels
Blocks Editor blocks, aka Gutenberg blocks, plugins, and extensions Needs triage Ticket needs to be triaged [Pri] TBD [Type] Bug

Comments

@jsnajdr
Copy link
Member

jsnajdr commented May 16, 2024

Steps to reproduce

  1. Edit a post, insert an image
  2. Click on the "Crop" button in the block toolbar

What happens is that Crop doesn't work, and I see this error in console:

Uncaught TypeError: Cannot read properties of null (reading 'tagName')
    at calypso.editor.min.js?ver=0f9b91c3744:9:14744
    at HTMLDivElement.<anonymous> (calypso.editor.min.js?ver=0f9b91c3744:9:14822)

It happens in this traverseToFindLink loop:

wp-calypso/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js

Line 1031 in 652a787

if ( element.tagName.toLowerCase() === 'a' && element?.href === link ) {

One notable thing about this loop is that it traverses up the element hierarchy: element = element.parentElement, but doesn't check if the element becomes null. The element that I clicked on is an SVG path, and I think the .parentElement becomes null because the clicked element is immediately removed from DOM (the button is removed from the toolbar) and then it has no parent.
@mrfoxtalbot mrfoxtalbot added [Status] Needs Author Reply Blocks Editor blocks, aka Gutenberg blocks, plugins, and extensions Needs triage Ticket needs to be triaged labels May 17, 2024
@mrfoxtalbot
Copy link

📌 REPRODUCTION RESULTS
– Tested on Simple: Could Not Replicate
– Tested on Atomic: Could Not Replicate

📌 ACTIONS
– Requested author feedback

📌 Message to Author
Thank your for reporting this @jsnajdr. I am unable to replicate this on neither my AT or Simple testing sites.

  • Which site are you seeing this on?
  • Can you still reproduce this consistently?
  • Can you reproduce it on more than one site?

I am going to close this as "cannot repro" but please feel free to reopen if you can still reproduce this.

@mrfoxtalbot mrfoxtalbot closed this as not planned Won't fix, can't repro, duplicate, stale May 17, 2024
@jsnajdr
Copy link
Member Author

jsnajdr commented May 17, 2024 •
edited

Hi @mrfoxtalbot 👋

I can consistently reproduce the issue on one of my sites, jardasn.blog. What's special about it is that it uses the Calypso Posts view, and uses the Calypsoified iframed Gutenberg -- the URL is not wp-admin, but like https://wordpress.com/post/jardasn.blog/626. The other two sites I just tried use the wp-admin posts view and editor, and I couldn't reproduce the issue there.

Sometimes I need to click crop, leave the crop mode by clicking outside the image, and the click crop again to trigger the issue. Here is a screen recording showing how I can trigger it two times in a row:

Screen.Recording.2024-05-17.at.14.35.10.mov

@mrfoxtalbot
Copy link

Thank you @jsnajdr!

Do you want to reopen the issue and update the title to add the details you just shared?

@jsnajdr
Copy link
Member Author

jsnajdr commented May 17, 2024

Yes, let's reopen it, especially if the fix is known and easy. I think the title is good, do you think there is some important detail that should be added there?

@jsnajdr jsnajdr mentioned this issue May 17, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jsnajdr jsnajdr

Labels
Blocks Editor blocks, aka Gutenberg blocks, plugins, and extensions Needs triage Ticket needs to be triaged [Pri] TBD [Type] Bug
Projects
Automattic Prioritization: The One Board ™
Status: Done 🎉
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Editor iframe: remove site editor Dashboard link handler Automattic/wp-calypso
2 participants
@jsnajdr @mrfoxtalbot