Social icons without a link are invisible

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.

https://wordpress.org/gutenberg/

Other

10.51k stars 4.21k forks source link

Social icons without a link are invisible #55543

Open jsnajdr opened 1 year ago

jsnajdr commented 1 year ago

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 commented 1 year ago

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

jsnajdr commented 1 year ago

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

jsnajdr commented 1 year ago

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 commented 1 year ago

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

jsnajdr commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 3 months ago

@jsnajdr is this issue resolved, or still lingering?

jsnajdr commented 3 months ago

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

realthemes commented 2 months ago

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 commented 2 months ago

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.