Invalid links for social icons

[Rishit30G]

Description

Currently, there is no validation mechanism to ensure that users enter a valid URL for social icons. This lack of validation can lead to issues when incorrect or improperly formatted URLs are added. To prevent potential errors, we need to implement a validation check that ensures only properly structured URLs are accepted in the input field.

Step-by-step reproduction instructions

1. Create a new post
2. Add 'Social Icons' block
3. Add any social icon like 'WordPress', 'YouTube' etc
4. Add a social link to the icon by clicking on the social icon
5. Notice that anything can be added to the input field even when it's not a proper link

Screenshots, screen recording, code snippet

Screen.Recording.2025-02-11.at.4.45.00.PM.mov

Environment info

• WordPress: 6.7.1
• Gutenberg: 20.2.0

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Rishit30G]

I tried to fix this by using a regex expression and an error state based on user input.

Below is a screencast demonstrating the approach:

Just a raw implementation, there are places where it can be improved like only showing error when the user enters the url
Would appreciate some feedback before implementation 🙇🏻

Screen.Recording.2025-02-11.at.5.29.10.PM.mov

[t-hamano]

There have been efforts in the past to solve a similar problem by auto-matching services from URL patterns. See #59303.

cc @Mamaduka

[im3dabasia]

Thank you @Rishit30G for opening the issue.

The type is set to "text" in the URLInput component. I changed it to "url" and it works well.

Additional checks to validate correct URLs would help. But at the very least I think, the type should be "url" instead of "text" This would further improve the proper positioning of the URL in RTL languages.

Related issue: #68188

gutenberg/packages/block-editor/src/components/url-input/index.js

Lines 452 to 453 in 05c8450

	type: 'text',
	onChange: this.onChange,

[Rishit30G]

Thanks for sharing this @im3dabasia! 👍🏻

Additional checks to validate correct URLs would help. But at the very least I think, the type should be "url" instead of "text"

That's true.

IMO, we should be a bit more flexible with the URLs, using regex would be a bit more appropriate here. Also, improving error message display would be beneficial, a tooltip like the current one doesn't scale well on different screen sizes.

[hanneslsm]

IMO, we should be a bit more flexible with the URLs, using regex would be a bit more appropriate here.

I agree. Please note that there is a social icon for email - meaning other URI schemes must work, like mailto:[email protected] . Also for Telegram and WhatsApp for example people might prefer using tel:

[Mamaduka]

IIRC, this is using a test for a reason. When you combine all possible values for Social Links, validation becomes complicated, and that would be truer when the block allows consumers to add custom variations.

Additionally, themes like to use placeholder values, which might not be a correct URLs.

I think the simplest solution here is to trust users to input the correct URLs.

[Rishit30G]

I think the simplest solution here is to trust users to input the correct URLs.

Valid points, makes sense 👍🏻

Let me know if I should close this issue then

[Mamaduka]

Thanks, @Rishit30G!

Yes, let's close the issue.