Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Social Links Block: Icon Storage/Extension Architecture #19041

Open
0aveRyan opened this issue Dec 10, 2019 · 21 comments · May be fixed by #30749
Open

Social Links Block: Icon Storage/Extension Architecture #19041

0aveRyan opened this issue Dec 10, 2019 · 21 comments · May be fixed by #30749
Assignees
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@0aveRyan
Copy link
Contributor

0aveRyan commented Dec 10, 2019

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.

@0aveRyan 0aveRyan added the [Block] Social Affects the Social Block - used to display Social Media accounts label Dec 10, 2019
@mkaz
Copy link
Member

mkaz commented Dec 10, 2019

@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
Copy link

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
Copy link
Contributor

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

@jasmussen
Copy link
Contributor

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
Copy link
Contributor

strarsis commented Jan 14, 2021

@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
Copy link
Contributor

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.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Apr 12, 2021
@talldan
Copy link
Contributor

talldan commented Sep 6, 2021

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

@mkkeck
Copy link

mkkeck commented Sep 17, 2021

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
Copy link

apmeyer commented Sep 19, 2021

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

@mkkeck
Copy link

mkkeck commented Sep 19, 2021

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
Copy link

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
Copy link

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

@mkkeck
Copy link

mkkeck commented Mar 28, 2023

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
Copy link

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
Copy link

Is there any news on this?

@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Aug 16, 2023
@aksthelion
Copy link

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
Copy link
Contributor

talldan commented Jan 15, 2024

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

@bshuchter
Copy link

+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
Copy link

davidallenlewis commented Mar 29, 2024

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
Copy link

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
Copy link

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"
            ]
        }
    ]
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.