Register new variation for social link does not work

[mkkeck]

Description

I have following code:

'use strict';
const { _x } = wp.i18n;
const BLOCKS = wp.blocks;
const SVG = wp.primitives.SVG;
const Path = wp.primitives.Path;

const XingIcon = () => (
 <SVG height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <Path d="..." />
 </SVG>
);

wp.domReady(function () {
  BLOCKS.registerBlockVariation('core/social-link', {
    name: 'xing',
    title: 'XING',
    attributes: { service: 'xing' },
    icon: XingIcon
  });
})();

Step-by-step reproduction instructions

1. Register a new variation for social link.
2. Search and insert the new variation
3. Now the icon of the new social link should be displayed, but the chain /share is displayed.

Screenshots, screen recording, code snippet

Environment info

Wordpres 5.8

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

@mkkeck The icon attribute is the block icon that you see in the inserter or sidebar rather than the social icon.

It looks like the icons shown in the editor are currently hard-coded:

gutenberg/packages/block-library/src/social-link/variations.js

Lines 4 to 47 in 44d1d32

	import {
	AmazonIcon,
	BandcampIcon,
	BehanceIcon,
	ChainIcon,
	CodepenIcon,
	DeviantArtIcon,
	DribbbleIcon,
	DropboxIcon,
	EtsyIcon,
	FacebookIcon,
	FeedIcon,
	FivehundredpxIcon,
	FlickrIcon,
	FoursquareIcon,
	GoodreadsIcon,
	GoogleIcon,
	GitHubIcon,
	InstagramIcon,
	LastfmIcon,
	LinkedInIcon,
	MailIcon,
	MastodonIcon,
	MeetupIcon,
	MediumIcon,
	PatreonIcon,
	PinterestIcon,
	PocketIcon,
	RedditIcon,
	SkypeIcon,
	SnapchatIcon,
	SoundCloudIcon,
	SpotifyIcon,
	TelegramIcon,
	TiktokIcon,
	TumblrIcon,
	TwitchIcon,
	TwitterIcon,
	VimeoIcon,
	VkIcon,
	WordPressIcon,
	YelpIcon,
	YouTubeIcon,
	} from './icons';

So I don't think this is extensible. The only option is to completely replace the block's editor functionality.

I see there's an existing issue (#19041) about extensibility, it's been open a while, but I'll leave a comment there mentioning your issue and will close this as a duplicate.

[mkkeck]

Okay, that would not a problem to me patch the variations to display the correct icon in the backend, when I try to extend the variations json.

But on the front end pages the new added icon is still not shown, instead the share icon is displayed.

What I've done to get it work:

1. Extend the block with new variation
2. Rewrite and refactor the complete PHP code for rendering the social link into a PHP class for my theme
3. Unregister the social link block
4. Re-register the social link block to use the render of my class.

This is hell, I know.

Suggestion:

• Using the variations in json both for Gutenberg and PHP renderer.
• Make it possible the json uses plain SVG sources without needing external/internal libraries (putting the SVG string directly into json string)
• Perhaps add a fallback json with default base icons (without less used icons)

[talldan]

@mkkeck Yes, you're right that the PHP rendering code is also hard-coded and uses an icon defined there, it seems like it needs to be replaced entirely.

This is hell, I know.

I'm an atheist so I don't believe in that. 😄

Suggestion:

This issue is closed, I think it'd be good to leave comments on #19041 as comments here are unlikely to be seen by anyone other than me.

I notice there is also a pull request that seeks to resolve this - #30749, it seems like some progress was made there, but still a bit to do.