Polish Social Icons setup state to make adding blocks more intuitive

[getdave]

Currently this is the state fo the Social Icons block when inserted:

Problems I see:

• the instructional text contains the word "Click" which makes you assume you can click to add. This is not the case. Moreover we shouldn't need to rely on this text.
• the + plus icon is aligned to far right and is disconnected from where the user is naturally drawn. It sholud be where the instructional text is and the text shouldn't even be there.

Other suggested improvements:

• consider a placeholder state whereby a placeholder icon acts as the inserter. When you click the icon it brings up the block inserter to pick your social platform.

cc @richtabor who is looking into editor polish and may have other ideas for improvements

[jasmussen]

This has been an adventure ever since the first iterations of this block, and it really needs a rethink. The problem is, each service is its own block, and inserting a service is not just a single click on the plus like it is for the Buttons block, it's click and then searchm, and then click again. We've tried pre-inserting a curated list of services, but that gives bias to those over others. Even then, they won't show up on the frontend until you add a URL. How can we make it as simple to add a social link as it is to add a button?

Just to explore an out-there idea:

• WordPress button always inserted by default.
• Plus button always inserts the WordPress service.
• Clicking the service shows recent transforms right in the popover, in addition to the URL you mean to add
• The inspector shows transforms, the most recent N, at the top, just like it does for Group blocks now, and how it might for navigation items in #46195. Also shows the URL field.
• Buttons are always output on the frontend, and are not considered "empty" just because they have no link. Longer term we add a design linter, a pre-publish panel that surfaces empty links.

Quick sketch of the idea:

The potential benefits I could see from this would be:

• Click click click to insert a bunch of services.
• Click each individual one to change the service to something else.
• By ordering according to usage, very soon the list of social links will put Mastodon at the top of that's the one you're always inserting.
• Patterns could pre-suggest social links, and they'd appear on the frontend even if empty.

[richtabor]

What about a pre-publish check for empty, or #, social icons? Instead of omitting them from the front-end if empty.

[jasmussen]

Yep, I think that's a "design linting" tool that would be useful regardless. Whether we then output empty icons on the frontend or not, I could go either way.

[richtabor]

Could we just infer icon/variation based on URL?

i.e. You type in https://twitter.com/richard_tabor and it selects the Twitter variation for you? And if you edit the link to https://profiles.wordpress.org/richtabor/ then it changes the icon/variation to WordPress.

If there is no variation, then just use the link variation.

[richtabor]

Could we just infer icon/variation based on URL?

Something like this, which leans on LinkControl UI a bit (also adding open in a new tab in the same fashion).

https://github.com/WordPress/gutenberg/assets/1813435/43dd87ba-ba7b-457a-8ee6-21b2966a81b9

[jasmussen]

I'm into it! What happens if you paste a URL that is not recognized? I suppose it just falls back to the generic link icon?

Perhaps more importantly: how do we enable generic patterns to pre-build a curated selection of social links — would they have to paste in the URL? That might not be the most discoverable. Could we show, perhaps, an "advanced" chevron that lets you choose the particular icon without filling in a URL, and then leaning on the URL inferring as the main interface? Mainly, if we'll ever build a pre-publish or document-outline linting tool to surface empty URLs, it would be nice if patterns wouldn't have to pre-fill them.

[richtabor]

I'm into it! What happens if you paste a URL that is not recognized? I suppose it just falls back to the generic link icon?

Yes, that's what I'm thinking — which we already have a variation for.

how do we enable generic patterns to pre-build a curated selection of social links — would they have to paste in the URL?

Instead of # which they're typing now, the values would be twitter.com/# for a Twitter/X link.

Though in this concept, the URL is just a quick entry for inserting the block (essentially like embeds do with relative URLs), then you could still add the block within the pattern markup, empty.

[jasmussen]

Though in this concept, as the URL is just a quick entry for inserting the block (essentially like embeds do with relative URLs), then you could still add the block within the pattern markup, empty.

Ah yes, so the individual links exist, but this is just a shortcut. Yes, let's try this! 👍 👍

[krokodok]

I think the URL recognition looks promising. I had one additional thought about improving the block: Should we allow users to upload a custom logo and enter an accompanying a11y-text for services that are not supported? As an alternative to the fallback icon?

In addition: Would this issue here be the right place to include the issue of transforming block variations (https://github.com/WordPress/gutenberg/issues/46726)? I think the URL auto-detect mechanism would not solve this entirely. I would need to know the exact URL scheme of a service that can be parsed and then type it out or copy-paste it from a new tab I opened to search the correct URL, just to transform a placeholder block I created to the right variation.

[richtabor]

I think the URL auto-detect mechanism would not solve this entirely. I would need to know the exact URL scheme of a service that can be parsed and then type it out or copy-paste it from a new tab

My expectation is that copy/paste is currently (and would continue being) the primary pattern used to add social links. The URL mechanism would just remove the step required currently, where you first insert the block before copy/paste.

[Mamaduka]

Thank you, @jasmussen, for pointing me to this issue.

I can start working on a variation auto-detect mechanism using the URLs.

[Mamaduka]

The PR is ready for testing and reviews - #59303.

[afercia]

Just noting that I recently created a few issues about the Social Icons:

• This block can't be operated with the keyboard.
• Empty links should be prevented at all costs. This one also has a pull request ready for review. It also changes a few labels and descriptions as agreed with @richtabor.

[getdave]

Another incremental improvement