From 7ef5c7b2b6775987c2923991fe8c303eeeae2762 Mon Sep 17 00:00:00 2001
From: Miguel Fonseca <miguelcsf@gmail.com>
Date: Mon, 3 Feb 2020 15:32:08 +0000
Subject: [PATCH] Social Link: group all variations under one block type

---
 packages/block-library/src/index.js           |   2 +-
 .../block-library/src/social-link/edit.js     |   6 +-
 .../block-library/src/social-link/index.js    |  46 ++-
 .../block-library/src/social-link/index.php   |  18 ++
 .../src/social-link/social-list.js            | 220 +-------------
 .../src/social-link/variations.js             | 285 ++++++++++++++++++
 .../block-library/src/social-links/edit.js    |  21 +-
 .../block-library/src/social-links/index.js   |  21 +-
 packages/blocks/src/api/parser.js             |   6 +
 9 files changed, 365 insertions(+), 260 deletions(-)
 create mode 100644 packages/block-library/src/social-link/variations.js

diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 13ef75a96409d..f9b3052d88b21 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -185,7 +185,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				[
 					__experimentalEnableLegacyWidgetBlock ? legacyWidget : null,
 					socialLinks,
-					...socialLink.sites,
+					socialLink,
 
 					// Register Full Site Editing Blocks.
 					...( __experimentalEnableFullSiteEditing
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 0652646c03556..141b8034f3a77 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -33,8 +33,8 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 	} );
 
 	// Import icon.
-	const IconComponent = getIconBySite( site );
-	const socialLinkName = getNameBySite( site );
+	const IconComponent = site ? getIconBySite( site ) : null;
+	const socialLinkName = site ? getNameBySite( site ) : '';
 
 	return (
 		<Fragment>
@@ -58,7 +58,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 				</PanelBody>
 			</InspectorControls>
 			<Button className={ classes } onClick={ () => setPopover( true ) }>
-				<IconComponent />
+				{ IconComponent && <IconComponent /> }
 				{ isSelected && showURLPopover && (
 					<URLPopover onClose={ () => setPopover( false ) }>
 						<form
diff --git a/packages/block-library/src/social-link/index.js b/packages/block-library/src/social-link/index.js
index 9df66a4a50635..db0ad61791439 100644
--- a/packages/block-library/src/social-link/index.js
+++ b/packages/block-library/src/social-link/index.js
@@ -7,9 +7,12 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import edit from './edit';
-import socialList from './social-list';
+import variations from './variations';
 
-const commonAttributes = {
+export const name = 'core/social-link';
+
+export const settings = {
+	title: __( 'Social Icon' ),
 	category: 'widgets',
 	parent: [ 'core/social-links' ],
 	supports: {
@@ -17,30 +20,17 @@ const commonAttributes = {
 		html: false,
 	},
 	edit,
-};
-
-// Create individual blocks out of each site in social-list.js
-export const sites = Object.keys( socialList ).map( ( site ) => {
-	const siteParams = socialList[ site ];
-	return {
-		name: 'core/social-link-' + site,
-		settings: {
-			title: siteParams.name,
-			icon: siteParams.icon,
-			description: __( 'Link to ' + siteParams.name ),
-			...commonAttributes,
-			attributes: {
-				url: {
-					type: 'string',
-				},
-				site: {
-					type: 'string',
-					default: site,
-				},
-				label: {
-					type: 'string',
-				},
-			},
+	description: __( 'Create a link to the wider Web' ),
+	attributes: {
+		url: {
+			type: 'string',
+		},
+		site: {
+			type: 'string',
 		},
-	};
-} );
+		label: {
+			type: 'string',
+		},
+	},
+	variations,
+};
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index ae8b5e97bc952..df4ee06a32296 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -92,6 +92,24 @@ function register_block_core_social_link() {
 			)
 		);
 	}
+
+	register_block_type(
+		'core/social-link',
+		array(
+			'attributes'      => array(
+				'url'   => array(
+					'type' => 'string',
+				),
+				'site'  => array(
+					'type' => 'string',
+				),
+				'label' => array(
+					'type' => 'string',
+				),
+			),
+			'render_callback' => 'render_core_social_link',
+		)
+	);
 }
 add_action( 'init', 'register_block_core_social_link' );
 
diff --git a/packages/block-library/src/social-link/social-list.js b/packages/block-library/src/social-link/social-list.js
index 47d598e643e14..fb26b36178c5d 100644
--- a/packages/block-library/src/social-link/social-list.js
+++ b/packages/block-library/src/social-link/social-list.js
@@ -1,227 +1,31 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
-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,
-	PinterestIcon,
-	PocketIcon,
-	RedditIcon,
-	SkypeIcon,
-	SnapchatIcon,
-	SoundCloudIcon,
-	SpotifyIcon,
-	TumblrIcon,
-	TwitchIcon,
-	TwitterIcon,
-	VimeoIcon,
-	VkIcon,
-	WordPressIcon,
-	YelpIcon,
-	YouTubeIcon,
-} from './icons';
-
-const socialList = {
-	fivehundredpx: {
-		name: '500px',
-		icon: FivehundredpxIcon,
-	},
-	amazon: {
-		name: 'Amazon',
-		icon: AmazonIcon,
-	},
-	bandcamp: {
-		name: 'Bandcamp',
-		icon: BandcampIcon,
-	},
-	behance: {
-		name: 'Behance',
-		icon: BehanceIcon,
-	},
-	chain: {
-		name: 'Link',
-		icon: ChainIcon,
-	},
-	codepen: {
-		name: 'CodePen',
-		icon: CodepenIcon,
-	},
-	deviantart: {
-		name: 'DeviantArt',
-		icon: DeviantArtIcon,
-	},
-	dribbble: {
-		name: 'Dribbble',
-		icon: DribbbleIcon,
-	},
-	dropbox: {
-		name: 'Dropbox',
-		icon: DropboxIcon,
-	},
-	etsy: {
-		name: 'Etsy',
-		icon: EtsyIcon,
-	},
-	facebook: {
-		name: 'Facebook',
-		icon: FacebookIcon,
-	},
-	feed: {
-		name: 'RSS Feed',
-		icon: FeedIcon,
-	},
-	flickr: {
-		name: 'Flickr',
-		icon: FlickrIcon,
-	},
-	foursquare: {
-		name: 'Foursquare',
-		icon: FoursquareIcon,
-	},
-	goodreads: {
-		name: 'Goodreads',
-		icon: GoodreadsIcon,
-	},
-	google: {
-		name: 'Google',
-		icon: GoogleIcon,
-	},
-	github: {
-		name: 'GitHub',
-		icon: GitHubIcon,
-	},
-	instagram: {
-		name: 'Instagram',
-		icon: InstagramIcon,
-	},
-	lastfm: {
-		name: 'Last.fm',
-		icon: LastfmIcon,
-	},
-	linkedin: {
-		name: 'LinkedIn',
-		icon: LinkedInIcon,
-	},
-	mail: {
-		name: 'Mail',
-		icon: MailIcon,
-	},
-	mastodon: {
-		name: 'Mastodon',
-		icon: MastodonIcon,
-	},
-	meetup: {
-		name: 'Meetup',
-		icon: MeetupIcon,
-	},
-	medium: {
-		name: 'Medium',
-		icon: MediumIcon,
-	},
-	pinterest: {
-		name: 'Pinterest',
-		icon: PinterestIcon,
-	},
-	pocket: {
-		name: 'Pocket',
-		icon: PocketIcon,
-	},
-	reddit: {
-		name: 'Reddit',
-		icon: RedditIcon,
-	},
-	skype: {
-		name: 'Skype',
-		icon: SkypeIcon,
-	},
-	snapchat: {
-		name: 'Snapchat',
-		icon: SnapchatIcon,
-	},
-	soundcloud: {
-		name: 'SoundCloud',
-		icon: SoundCloudIcon,
-	},
-	spotify: {
-		name: 'Spotify',
-		icon: SpotifyIcon,
-	},
-	tumblr: {
-		name: 'Tumblr',
-		icon: TumblrIcon,
-	},
-	twitch: {
-		name: 'Twitch',
-		icon: TwitchIcon,
-	},
-	twitter: {
-		name: 'Twitter',
-		icon: TwitterIcon,
-	},
-	vimeo: {
-		name: 'Vimeo',
-		icon: VimeoIcon,
-	},
-	vk: {
-		name: 'VK',
-		icon: VkIcon,
-	},
-	wordpress: {
-		name: 'WordPress',
-		icon: WordPressIcon,
-	},
-	yelp: {
-		name: 'Yelp',
-		icon: YelpIcon,
-	},
-	youtube: {
-		name: 'YouTube',
-		icon: YouTubeIcon,
-	},
-};
+import { find } from 'lodash';
 
-export default socialList;
+/**
+ * Internal dependencies
+ */
+import variations from './variations';
 
 /**
  * Retrieves the social service's icon component.
  *
- * @param {string} site key for a social service (lowercase slug)
+ * @param {string} name key for a social service (lowercase slug)
  *
  * @return {WPComponent} Icon component for social service.
  */
-export const getIconBySite = ( site ) => {
-	return socialList[ site ].icon;
+export const getIconBySite = ( name ) => {
+	return find( variations, { name } ).icon;
 };
 
 /**
  * Retrieves the display name for the social service.
  *
- * @param {string} site key for a social service (lowercase slug)
+ * @param {string} name key for a social service (lowercase slug)
  *
  * @return {string} Display name for social service
  */
-export const getNameBySite = ( site ) => {
-	return socialList[ site ].name;
+export const getNameBySite = ( name ) => {
+	return find( variations, { name } ).title;
 };
diff --git a/packages/block-library/src/social-link/variations.js b/packages/block-library/src/social-link/variations.js
new file mode 100644
index 0000000000000..5e51fc28a5ab0
--- /dev/null
+++ b/packages/block-library/src/social-link/variations.js
@@ -0,0 +1,285 @@
+/**
+ * Internal dependencies
+ */
+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,
+	PinterestIcon,
+	PocketIcon,
+	RedditIcon,
+	SkypeIcon,
+	SnapchatIcon,
+	SoundCloudIcon,
+	SpotifyIcon,
+	TumblrIcon,
+	TwitchIcon,
+	TwitterIcon,
+	VimeoIcon,
+	VkIcon,
+	WordPressIcon,
+	YelpIcon,
+	YouTubeIcon,
+} from './icons';
+
+const patterns = [
+	{
+		isDefault: true,
+		name: 'wordpress',
+		attributes: { site: 'wordpress' },
+		title: 'WordPress',
+		icon: WordPressIcon,
+	},
+
+	{
+		name: 'fivehundredpx',
+		attributes: { site: 'fivehundredpx' },
+		title: '500px',
+		icon: FivehundredpxIcon,
+	},
+	{
+		name: 'amazon',
+		attributes: { site: 'amazon' },
+		title: 'Amazon',
+		icon: AmazonIcon,
+	},
+	{
+		name: 'bandcamp',
+		attributes: { site: 'bandcamp' },
+		title: 'Bandcamp',
+		icon: BandcampIcon,
+	},
+	{
+		name: 'behance',
+		attributes: { site: 'behance' },
+		title: 'Behance',
+		icon: BehanceIcon,
+	},
+	{
+		name: 'chain',
+		attributes: { site: 'chain' },
+		title: 'Link',
+		icon: ChainIcon,
+	},
+	{
+		name: 'codepen',
+		attributes: { site: 'codepen' },
+		title: 'CodePen',
+		icon: CodepenIcon,
+	},
+	{
+		name: 'deviantart',
+		attributes: { site: 'deviantart' },
+		title: 'DeviantArt',
+		icon: DeviantArtIcon,
+	},
+	{
+		name: 'dribbble',
+		attributes: { site: 'dribbble' },
+		title: 'Dribbble',
+		icon: DribbbleIcon,
+	},
+	{
+		name: 'dropbox',
+		attributes: { site: 'dropbox' },
+		title: 'Dropbox',
+		icon: DropboxIcon,
+	},
+	{
+		name: 'etsy',
+		attributes: { site: 'etsy' },
+		title: 'Etsy',
+		icon: EtsyIcon,
+	},
+	{
+		name: 'facebook',
+		attributes: { site: 'facebook' },
+		title: 'Facebook',
+		icon: FacebookIcon,
+	},
+	{
+		name: 'feed',
+		attributes: { site: 'feed' },
+		title: 'RSS Feed',
+		icon: FeedIcon,
+	},
+	{
+		name: 'flickr',
+		attributes: { site: 'flickr' },
+		title: 'Flickr',
+		icon: FlickrIcon,
+	},
+	{
+		name: 'foursquare',
+		attributes: { site: 'foursquare' },
+		title: 'Foursquare',
+		icon: FoursquareIcon,
+	},
+	{
+		name: 'goodreads',
+		attributes: { site: 'goodreads' },
+		title: 'Goodreads',
+		icon: GoodreadsIcon,
+	},
+	{
+		name: 'google',
+		attributes: { site: 'google' },
+		title: 'Google',
+		icon: GoogleIcon,
+	},
+	{
+		name: 'github',
+		attributes: { site: 'github' },
+		title: 'GitHub',
+		icon: GitHubIcon,
+	},
+	{
+		name: 'instagram',
+		attributes: { site: 'instagram' },
+		title: 'Instagram',
+		icon: InstagramIcon,
+	},
+	{
+		name: 'lastfm',
+		attributes: { site: 'lastfm' },
+		title: 'Last.fm',
+		icon: LastfmIcon,
+	},
+	{
+		name: 'linkedin',
+		attributes: { site: 'linkedin' },
+		title: 'LinkedIn',
+		icon: LinkedInIcon,
+	},
+	{
+		name: 'mail',
+		attributes: { site: 'mail' },
+		title: 'Mail',
+		icon: MailIcon,
+	},
+	{
+		name: 'mastodon',
+		attributes: { site: 'mastodon' },
+		title: 'Mastodon',
+		icon: MastodonIcon,
+	},
+	{
+		name: 'meetup',
+		attributes: { site: 'meetup' },
+		title: 'Meetup',
+		icon: MeetupIcon,
+	},
+	{
+		name: 'medium',
+		attributes: { site: 'medium' },
+		title: 'Medium',
+		icon: MediumIcon,
+	},
+	{
+		name: 'pinterest',
+		attributes: { site: 'pinterest' },
+		title: 'Pinterest',
+		icon: PinterestIcon,
+	},
+	{
+		name: 'pocket',
+		attributes: { site: 'pocket' },
+		title: 'Pocket',
+		icon: PocketIcon,
+	},
+	{
+		name: 'reddit',
+		attributes: { site: 'reddit' },
+		title: 'Reddit',
+		icon: RedditIcon,
+	},
+	{
+		name: 'skype',
+		attributes: { site: 'skype' },
+		title: 'Skype',
+		icon: SkypeIcon,
+	},
+	{
+		name: 'snapchat',
+		attributes: { site: 'snapchat' },
+		title: 'Snapchat',
+		icon: SnapchatIcon,
+	},
+	{
+		name: 'soundcloud',
+		attributes: { site: 'soundcloud' },
+		title: 'SoundCloud',
+		icon: SoundCloudIcon,
+	},
+	{
+		name: 'spotify',
+		attributes: { site: 'spotify' },
+		title: 'Spotify',
+		icon: SpotifyIcon,
+	},
+	{
+		name: 'tumblr',
+		attributes: { site: 'tumblr' },
+		title: 'Tumblr',
+		icon: TumblrIcon,
+	},
+	{
+		name: 'twitch',
+		attributes: { site: 'twitch' },
+		title: 'Twitch',
+		icon: TwitchIcon,
+	},
+	{
+		name: 'twitter',
+		attributes: { site: 'twitter' },
+		title: 'Twitter',
+		icon: TwitterIcon,
+	},
+	{
+		name: 'vimeo',
+		attributes: { site: 'vimeo' },
+		title: 'Vimeo',
+		icon: VimeoIcon,
+	},
+	{
+		name: 'vk',
+		attributes: { site: 'vk' },
+		title: 'VK',
+		icon: VkIcon,
+	},
+	{
+		name: 'yelp',
+		attributes: { site: 'yelp' },
+		title: 'Yelp',
+		icon: YelpIcon,
+	},
+	{
+		name: 'youtube',
+		attributes: { site: 'youtube' },
+		title: 'YouTube',
+		icon: YouTubeIcon,
+	},
+];
+
+export default patterns;
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index a164d5f6611ce..13f245966d613 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -4,23 +4,16 @@
 
 import { InnerBlocks } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import socialList from '../social-link/social-list';
-
-const ALLOWED_BLOCKS = Object.keys( socialList ).map( ( site ) => {
-	return 'core/social-link-' + site;
-} );
+const ALLOWED_BLOCKS = [ 'core/social-link' ];
 
 // Template contains the links that show when start.
 const TEMPLATE = [
-	[ 'core/social-link-wordpress', { url: 'https://wordpress.org' } ],
-	[ 'core/social-link-facebook' ],
-	[ 'core/social-link-twitter' ],
-	[ 'core/social-link-instagram' ],
-	[ 'core/social-link-linkedin' ],
-	[ 'core/social-link-youtube' ],
+	[ 'core/social-link', { site: 'wordpress', url: 'https://wordpress.org' } ],
+	[ 'core/social-link', { site: 'facebook' } ],
+	[ 'core/social-link', { site: 'twitter' } ],
+	[ 'core/social-link', { site: 'instagram' } ],
+	[ 'core/social-link', { site: 'linkedin' } ],
+	[ 'core/social-link', { site: 'youtube' } ],
 ];
 
 export const SocialLinksEdit = function( { className } ) {
diff --git a/packages/block-library/src/social-links/index.js b/packages/block-library/src/social-links/index.js
index 13549051c9030..7f769a2e81c72 100644
--- a/packages/block-library/src/social-links/index.js
+++ b/packages/block-library/src/social-links/index.js
@@ -25,16 +25,25 @@ export const settings = {
 	example: {
 		innerBlocks: [
 			{
-				name: 'core/social-link-wordpress',
-				attributes: { url: 'https://wordpress.org' },
+				name: 'core/social-link',
+				attributes: {
+					type: 'wordpress',
+					url: 'https://wordpress.org',
+				},
 			},
 			{
-				name: 'core/social-link-facebook',
-				attributes: { url: 'https://www.facebook.com/WordPress/' },
+				name: 'core/social-link',
+				attributes: {
+					type: 'facebook',
+					url: 'https://www.facebook.com/WordPress/',
+				},
 			},
 			{
-				name: 'core/social-link-twitter',
-				attributes: { url: 'https://twitter.com/WordPress' },
+				name: 'core/social-link',
+				attributes: {
+					type: 'twitter',
+					url: 'https://twitter.com/WordPress',
+				},
 			},
 		],
 	},
diff --git a/packages/blocks/src/api/parser.js b/packages/blocks/src/api/parser.js
index 85b44d31468d8..e86f11ddd62f0 100644
--- a/packages/blocks/src/api/parser.js
+++ b/packages/blocks/src/api/parser.js
@@ -429,6 +429,12 @@ export function createBlockWithFallback( blockNode ) {
 		name = 'core/paragraph';
 	}
 
+	// Convert derivative blocks such as 'core/social-link-wordpress' to the
+	// canonical form 'core/social-link'.
+	if ( name && name.indexOf( 'core/social-link-' ) === 0 ) {
+		name = 'core/social-link';
+	}
+
 	// Fallback content may be upgraded from classic editor expecting implicit
 	// automatic paragraphs, so preserve them. Assumes wpautop is idempotent,
 	// meaning there are no negative consequences to repeated autop calls.