bug: block/image - image url cannot be modified after insertion if current url doesn't ends with .jpg

[tresorama]

Description

If you use "Insert from Url", in Image block, and you insert a non .jpg url and subimt, you can no longer replace the url because you are not able to click "edit" button.

If instead you use a .jpg you are able to click the "edit" button.

---

Other "url inserters", in other blocks of the editor, could be potential affected as well, but I didn't tested.

---

This is a visual bug.
The bug could be seen like this:

• if image url has a .jpg extension, the editor <span> element that contains the image filename shows a truncated and short text.
• if you use a NOT .jpg extension (.webp, or no extension), the image filename text is not treated the same, and this long text will then overflow the <span> allowed size, pushing the edit button out of visible space.

Step-by-step reproduction instructions

See below

Screenshots, screen recording, code snippet

Example of "working" url, .jpg

Image Url (unknown copyright, be careful):
https://blog.hubspot.com/hs-fs/hubfs/bolden-typography-example.jpg?width=1460&height=746&name=bolden-typography-example.jpg

Example of "bugged" url , .webp and no-extension

webp scenario

Image Url (unknown copyright, be careful):
https://s1.wp.com/wp-content/themes/h4/landing/marketing/pages/hp-2022-oct/media/desktop/tablet-7-2x.webp

---

no-extension scenario

Image url (unsplash image):
https://images.unsplash.com/photo-1676839560078-a6c6faa8637d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2064&q=80

Proposed Temporary solution

Ideally the url text should be truncated like in .jpg scenario.
But, until that time, i suggest to include ASAP a temporary and CSS isolated fix, to have a good UX.

Here it is an example of that kind of fix (I don't know the css classes system so i presume this selector to be safe)

.block-editor-link-control__search-item-header {
  min-width: 0;
  overflow: hidden;
}

Environment info

• Wordpress 6.2beta2 (via Beta Tester plugin update) + NO gutenberg plugin
• Google Chrome
• MacOS 11.7.3 BigSur

tested also on (with same bug)

• Wordpress 6.1.1 + NO Gutenberg Plugin

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[shreyasikhar]

Hello,

I was checking this issue and found out that the mentioned url bug is appearing on all media related blocks (like image, video, audio, gallery) that uses the component marked below.

This bug appears for all the extensions except few extensions like jpg, jpeg, gif, png, svg and also appears on media urls without extension.

The temporary solutions suggested by @tresorama can work but I would like to have more opinions on this.
If we want to try the other solution, then we will require list of extensions that will be involved in our media blocks and also need to find the way to identify urls without extension are media urls or not.

[t-hamano]

@tresorama
Thank you for the report.

I believe this problem was fixed in #47949. However, this is a fix for the new LinkControl UI and this PR is part of Gutenberg 15.3. Thus, it would not apply to WordPress 6.2, which is bundled with up to Gutenberg 15.2.

cc @brookewp

[tresorama]

@tresorama

Thank you for the report.

I believe this problem was fixed in #47949. However, this is a fix for the new LinkControl UI and this PR is part of Gutenberg 15.3. Thus, it would not apply to WordPress 6.2, which is bundled with up to Gutenberg 15.2.

cc @brookewp

Great, I will test it when 15.3 is available.

[t-hamano]

@tresorama
Since the release of Gutenberg plugin 15.3, I have checked this issue again and have confirmed that the problem has been fixed. I would like to close this issue, but feel free to comment if you have any issues.