Media Replace: Long media url is overlapping edit icon and cause potential horizontal scrollbar

Description

Issue

It's difficult to edit media url that are too long (because the url overlap the edit icon)

Code

It seems to be caused by:

gutenberg/packages/block-editor/src/components/media-replace-flow/style.scss

Lines 37 to 41 in 99efe85

    
           .block-editor-link-control__search-item-title, 
        
           .block-editor-link-control__search-item-info { 
        
           	max-width: 200px; 
        
           	white-space: nowrap; 
        
           }

Fix

I propose as a fix to use text overflow ellipsis:

Step-by-step reproduction instructions

Go in the editor (in any context: page edition, template edition...)
Add any media block (ex: image, video...)
Click on the media block
Click on "Insert a url" inside this block
Add a long url and save
Click on the video block and click on "Replace" in the toolbar
Edit link icon is overlapped by the media url, and it can also cause really long horizontal scroll

Screenshots, screen recording, code snippet

Screenshots

Environment info

WordPress version 6.4.3

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

Added fix in PR: #59808

Thanks for the report.

What URL did you enter? Normally, the URL should be shortened as shown below.

Maybe it's been fixed since #57775 ?

@t-hamano

@t-hamano I have used url without file extension at the end (some CDN or other services have that kind of urls)

@DamChtlv

@DamChtlv

I was able to reproduce this issue in WordPress 6.4.3, but it appears to have been fixed by #57775.

Tested URL: https://picsum.photos/id/870/200/300?grayscale&blur=2

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

Can confirm it has been fixed as of WP 6.5

I noticed that the issue reported here has not been completely fixed yet. I'll submit a PR soon.

Navigation Menu

Repository navigation

Media Replace: Long media url is overlapping edit icon and cause potential horizontal scrollbar #59807

Description

Issue

Code

Fix

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Screenshots

Environment info

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

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	.block-editor-link-control__search-item-title,
	.block-editor-link-control__search-item-info {
	max-width: 200px;
	white-space: nowrap;
	}

Media Replace: Long media url is overlapping edit icon and cause potential horizontal scrollbar #59807

Description

Description

Issue

Code

Fix

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Screenshots

Environment info

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

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

Activity

DamChtlv commented on Mar 13, 2024

t-hamano commented on Mar 13, 2024

ramonjd commented on Mar 14, 2024

DamChtlv commented on Mar 14, 2024

torounit commented on Mar 22, 2024

github-actions commented on Apr 7, 2024

DamChtlv commented on Apr 18, 2024

t-hamano commented on Aug 5, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions