url: filterURLForDisplay only considers basic image extensions

[t-hamano]

Related to #27530

What problem does this address?

The filterURLForDisplay() function in the url package properly processes the given URL string and generates a string for display. This function accomplishes two main things:

• Remove protocol and www subdomain
• If maxLength is given and the URL is a media filename, return the filename containing an ellipsis

Examples of various conversions can be seen in this unit test.

However, only basic image extensions are considered when rounding strings.

gutenberg/packages/url/src/filter-url-for-display.js

Line 24 in aa3bd6b

const mediaRegexp = /([\w|:])*\.(?:jpg|jpeg|gif|png|svg)/;

As a result, URLs in popovers may overflow in LinkControl components that use this function, for example.

Expected

URL with jpg image

Unexpected

URL with webp image

URL with mp4 video

What is your proposed solution?

I would suggest either of the following approaches:

• Consider all extensions that can be uploaded to WordPress. (mime_types filter may be helpful)
• All extensions to be rounded up by maxLength

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[brookewp]

Thanks for opening the issue! I encountered this in the Video block since it uses the same logic. However, I'm not seeing a scroll bar, so the edit button can be difficult to use: