Social Links Block: Icon Storage/Extension Architecture

[0aveRyan]

Per discussion on #18651, the current approach to storing Icons for the Social Links block has quite a bit of duplication of SVGs and associated label data between the JavaScript and PHP file, nor is there a great way to add or override logos (#17277).

We definitely need a way for logos to be added or overridden, and ideally an approach to storing the data in a way both JavaScript/PHP can share, without adding performance burden/blocking requests to site visitors.

For Extension

For extending, ideally we could use a single PHP-based apply_filters() to allow developers to inject, remove or override icons from the list. By using the PHP filter, we could make a single extension point as opposed to having to filter both PHP and JS hooks.

For Icon/Data Storage

There's been some discussion about using SVGR, but taking that approach would create invalid imports for the npm packages and without some laborious/extremely-clever build changes.

Some previously discussed ideas on #18651...

• Leave implementation as-is, add filter hooks in JS & PHP for extension and enhance with clearer inline documentation that any changes must happen to both objects -- still duplicated but extensible and clearer.
• Add a socialData.json file with icons base64 encoded and filter hooks in JS & PHP to allow extension -- adds filesystem read in PHP and base64 strings would be about 1/3 larger.
• Use a socialData.json file to inject the objects into JS & PHP during webpack build, base64 decode icons and add filter hooks -- somewhat obfuscates what's happening and some complexity, but reduces client burden.
• Separate icons into a SVG sprite approach or one-off SVG files, use a socialData.json to point to the proper icon and add filter hooks -- makes a larger payload to transmit to client/increases client requests, but makes using a data file easier.

Describe the solution you'd like
From the approaches I mentioned above, I think the lowest lift approach is simply to add some better inline documentation 😇. This isn't data likely to change with enough frequency to demand a significantly more complex architecture, unless it isn't a huge time investment. Any other ideas of course welcome.

As much as it'd be great not to have a contribution/maintenance burden with the duplication between PHP/JS files, I'd rather the burden be on developers than adding filesystem reads or additional requests for every visitor.

[mkaz]

@0aveRyan, thanks for opening the issue and starting the discussion.

One other issue at hand, that I'm not sure if we should try to solve together with this or not, is the usage of icons in Embeds. There are a half-dozen or so overlapping icons, they are only used in the Editor view so the embed icon usage does not run into the same issue of duplicate JS and PHP.
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/embed/icons.js

Social Icons runs into the issue because we need the icons defined in JS to be usable in Gutenberg, for both display in the block in editor view, but also as the block icon for the inserter. The second usage is the icon being shown to the user so needs to be saved in a way to be referenced via the front-end.

And like all SVG being saved in post content, there are KSES issues.

[KoiKoneessa]

Being able to add and override the icons would be really nice for esthetic purposes (make all match a same style, color scheme).

Please include suggested image type, size in the notes/instructiosn in the Block settings area.

[strarsis]

+1, I have to adjust the instagram icon because the current icon differs too much from the expectations of instagram users.

[jasmussen]

the current icon differs too much from the expectations of instagram users

Can you expand a bit on this? I'm happy to update the icon for all users.

[strarsis]

@jasmussen: First I wanted the rainbow-style Instagram icon, but then I read this on the Instagram brand page (https://en.instagram-brand.com/assets/icons):

Use the glyph to point to your presence on Instagram. The App Icon (shown below) is only used if you are showing it on a device with other apps or if you are encouraging people to download the Instagram app. If you’re representing Instagram in any other way, you should use the glyph.

So the rainbow-style Instagram icon should only be used for links to the Instagram app, not for links to an Instagram page.
Well, it isn't explicitly forbidden, but discouraged. But now I think I'd rather stick with the glyph-style Instagram icon.
I can easily assign the icon a new background (as it is not SVG) via CSS, so I could achieve the rainbow effect for better recognition.

[jasmussen]

Ah, by the rainbow effect you mean the instagram app shelf background gradient? Gotcha, yes. This ticket is definitely one to address to help you accompolish that, and I'm happy you can use CSS in the mean time.

As you point to yourself, for the default offering we've tried our best to adhere to the official guidelines.

[talldan]

A user reported #34559 (closed as a duplicate) mentioning they'd tried to register their own variation. I linked them to this issue.

[mkkeck]

Here is a solution, how to overwrite, add, remove social services for the WordPress block social-link:

Patched WordPress block core/social-link

This solution does not require to code the list for the social service more than once, and supports loading a JSON file with the social services from theme folder.

Example json:

[
  {
    "name":"twitter",
    "attributes":{
      "service":"twitter"
    },
    "title":"Twitter",
    "icon":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z\" \/><\/svg>"
  },
  {
    "name":"youtube",
    "attributes":{
      "service":"youtube"
    },
    "title":"YouTube",
    "icon":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z\" \/><\/svg>"
  }
]

Feedback is welcome ;)

[apmeyer]

Being able to swap in new icons (or add custom icons) via the theme.json file would be a handy solution.

[mkkeck]

Being able to swap in new icons (or add custom icons) via the theme.json file would be a handy solution.

In my last version of my ghist, there is now required a json object socialServices. I don't know if it runs from inside theme.json, because if Gutenberg parses this also and then may be crashed. I will make a test soon.

[YogieAnamCara]

Great idea, I like to upvote. I need a few other social icons and the fastest and best way would be to be able to add own icons to links.
Currently I am missing VERO

[Drivingralle]

Is there any movement on this ticket? Find this feature quite important

[mkkeck]

Is there any movement on this ticket? Find this feature quite important

Have you tried my solution? https://gist.github.com/mkkeck/84fe5fda939002fcf210d66b99de7c0f

[phil-sola]

Echoing @Drivingralle - is there any movement on this ticket? It is extremely limiting having to use the icons defined once by someone within the core team when adding this block. There needs to be a way to customise the social icons being used. Quite an important feature for the socials block. As well as social sharing links...

[nurianadal]

Is there any news on this?

[aksthelion]

Looks like they gave up on this. A simple workaround is to use custom html and add your own code to show social icons.

[talldan]

There was a recent(ish) related discussion about a system for registering icons within WordPress - #53510.

[bshuchter]

+1. Would love it if it was easy to add a new icon. I need to add a Substack icon. Am using the Link icon as a placeholder for now. Thanks!

[davidallenlewis]

I used the blocks.registerBlockType filter to extend the array of variation objects.

https://gist.github.com/davidallenlewis/a1dc52dc8825313a198e3e91f17ad8c4

This gets my custom options working in the Editor but they all just show the default icon on the Front End. So I got silly and used the render_block PHP filter and str_replace() to modify the block content. There must be a better way? LOL

https://gist.github.com/davidallenlewis/1c0da1a4fce44aceffc87e8948c50a95

[chs-kasvu]

Please allow admin to add their own social icons somehow. Ideally, they could be added as plugins though, so they could be found by everyone.

[hundkurserforalla]

Is there any movement on this ticket? Find this feature quite important

Have you tried my solution? https://gist.github.com/mkkeck/84fe5fda939002fcf210d66b99de7c0f

Hi mkkeck, i'm trying your solution but i can't get it to work... am i doing something wrong?

I use the following in functions.php

require_once get_template_directory() . '/class-editor-social-link.php';

if ( class_exists( 'Editor_Social_Link' ) ) {
    new Editor_Social_Link();
}

/*
add_filter(
	'social_services_json', function() {
	return get_stylesheet_directory() . '/social-services.json';
});
*/

and my social-services.json looks like this

{
    "socialServices": [
        "woocommerce": {
            "name": "WooCommerce",
            "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" role=\"img\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z\" \/><\/svg>",
            "keywords": [
                "optional",
                "key",
                "words",
                "woocommerce"
            ]
        }
    ]
}