Social icons without a link are invisible

[jsnajdr]

Steps to reproduce:
Design your site's header in the Site Editor, and add a social icon to the header. Don't add your profile URL to that icon yet. In the editor, you see the social icon is there, aligned exactly how you need it etc.:

Now open the site preview in a new tab. The social icon is not there!

My first impression is that I'm very confused. I'm not sure if the edited content was saved properly etc. Only later I find out that social icons without an url are not rendered and am able to rationalize what I saw.

The solution could be to assign default value to the url attribute. Every social network has an obvious "canonical" URL like https://instagram.com. We could use it.

Block patterns already use this "trick" -- on WordPress.com you can insert patterns like "header with social icons" and the markup has the url attributes populated. If they didn't do this, the inserted social icons wouldn't be visible.

[cbravobernal]

May I work on fixing this issue during the Core Table at WordCamp Madrid Contributor's Day?

[jsnajdr]

@c4rl0sbr4v0 #55296 could also be an interesting one for Contributor Day. Also a Social Icons bug.

[jsnajdr]

What is the use case for displaying social icons without links?

To clarify the original issue description: the use case is previewing an unfinished site, when I'm in the middle of editing it. It's very confusing that some blocks are outright missing from the site preview. The final site is going to have icons with links, the issue will no longer be there.

[cbravobernal]

Could we add just a # so the user does not experience any navigation when clicking on it but still showing the icons?

[jsnajdr]

I think that a # link is good, it solves the problem, but the canonical URLs like https://instagram.com are better. It's a good default, when you want to edit the link, you just append a slash and your profile name and are done.

[cbravobernal]

when you want to edit the link, you just append a slash and your profile name and are done.

That's true. We can work on the PR and then wait for more feedback in case if needed. Using either the hashtag (#) or the canonical URL should not be a big change.

[hanneslsm]

Even though I initially was also confused, I'd argue that it makes sense not showing the icons if there is no link.
As you already pointed out, it's possible to manually link to # or https://instagram.com
It might, at first, be unusual that icons don't show up but on the other hand no one benefits from blank links, so they're rather only "ads" for the platforms. (I'd assume it also hurts SEO, but I'm not a specialist)

Gutenberg has also a lot of other blocks that are invisible if they are not filled out, such as the pre- and suffix for categories and tags, the Read more link in excerpts or in general empty paragraphs and spaces.

[jsnajdr]

Gutenberg has also a lot of other blocks that are invisible if they are not filled out

These are dynamic blocks though, where their content depends on whether there are categories or tags, whether the excerpt is short or long... On the other hand, a social icon is a completely static markup.

they're rather only "ads" for the platforms.

That's true, an Instagram social link is not only an ad for your Instagram profile, but also for the Instagram platform itself. It's unavoidable, but it happens no matter what is the default value for the url attribute.

[tomfinitely]

@jsnajdr is this issue resolved, or still lingering?

[jsnajdr]

@tomfinitely It's been discussed at various places over the last year, but it's still not resolved.

[realthemes]

Putting # as a URL gives me unexpected results in the href attribute; it becomes href="http://#/", which looks weird and is not valid. Please fix this. It is really useful to leave # as a URL because some marketplaces don't allow third-party links in themes (for example, TemplateMonster).

[jsnajdr]

Putting # as a URL gives me unexpected results in the href attribute

This is a good point and I can trace back this behavior to @Mamaduka's #42167.

The a href link in the social-link should be sanitized the same way as a link inside a paragraph. But the behavior is different:

• for social-link, whatever value I enter in the link field is saved verbatim as a url attribute of the block. Only the PHP code that renders the block for frontend will optionally add the https:// prefix. In a rather blunt way that doesn't recognize valid relative URLs etc.
• a link inside a paragraph is sanitized right in the editor. The content that is saved is already sanitized. A value like foo or foo.com will be updated to http://foo or http://foo.com (should be modified to https://?). A value like /foo or ?foo=bar or # is detected as a relative URL and left unchanged.