Social Link: group all variations under one block type (#19887)

* Social Link: group all variations under one block type

* Social Link: Update test fixtures

* Address review feedback

* Fix misnamed attribute 'type' -> 'site'

* Social Link: Rename attribute 'site' to 'service'

* Social Link: Update description

* Change attribute name to service (previously site)

* Lint: Equal sign alignment

* Social Link: Remove unnecessary block deprecation

This PR introduces `core/social-link` as a new block type. Strictly
speaking, any concerns of backwards compatibility should only deal with
the migration of `core/social-link-FOO` types to this new one --
something that the parser is handling directly, populating the new
`service` attribute in that process.

Thus, no specific provisions are needed for the extant but obsolete
`site` attribute: the attribute will be silently dropped during block
validation. This can be attested by loading any content with links in
the old `core/social-link-FOO` shape.

Co-authored-by: Marcus Kazmierczak <[email protected]>

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

packages/block-library/src/social-link/block.json

@@ -0,0 +1,15 @@
+{
+	"name": "core/social-link",
+	"category": "widgets",
+	"attributes": {
+		"url": {
+			"type": "string"
+		},
+		"service": {
+			"type": "string"
+		},
+		"label": {
+			"type": "number"
+		}
+	}
+}

packages/block-library/src/social-link/edit.js

@@ -26,15 +26,15 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getIconBySite, getNameBySite } from './social-list';
 
 const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
-	const { url, site, label } = attributes;
+	const { url, service, label } = attributes;
 	const [ showURLPopover, setPopover ] = useState( false );
-	const classes = classNames( 'wp-social-link', 'wp-social-link-' + site, {
+	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
 	} );
 
 	// Import icon.
-	const IconComponent = getIconBySite( site );
-	const socialLinkName = getNameBySite( site );
+	const IconComponent = getIconBySite( service );
+	const socialLinkName = getNameBySite( service );
 
 	return (
 		<Fragment>

packages/block-library/src/social-link/index.js

@@ -7,40 +7,23 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import edit from './edit';
-import socialList from './social-list';
+import metadata from './block.json';
+import variations from './variations';
 
-const commonAttributes = {
-	category: 'widgets',
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Social Icon' ),
 	parent: [ 'core/social-links' ],
 	supports: {
 		reusable: false,
 		html: false,
 	},
 	edit,
+	description: __(
+		'Display an icon linking to a social media profile or website.'
+	),
+	variations,
 };
-
-// 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',
-				},
-			},
-		},
-	};
-} );

packages/block-library/src/social-link/index.php

@@ -13,17 +13,17 @@
  * @return string Rendered HTML of the referenced block.
  */
 function render_core_social_link( $attributes ) {
-	$site  = ( isset( $attributes['site'] ) ) ? $attributes['site'] : 'Icon';
-	$url   = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
-	$label = ( isset( $attributes['label'] ) ) ? $attributes['label'] : __( 'Link to ' ) . core_social_link_get_name( $site );
+	$service = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';
+	$url     = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
+	$label   = ( isset( $attributes['label'] ) ) ? $attributes['label'] : __( 'Link to ' ) . core_social_link_get_name( $service );
 
 	// Don't render a link if there is no URL set.
 	if ( ! $url ) {
 		return '';
 	}
 
-	$icon = core_social_link_get_icon( $site );
-	return '<li class="wp-social-link wp-social-link-' . $site . '"><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '"> ' . $icon . '</a></li>';
+	$icon = core_social_link_get_icon( $service );
+	return '<li class="wp-social-link wp-social-link-' . $service . '"><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '"> ' . $icon . '</a></li>';
 }
 
 /**
@@ -72,26 +72,30 @@ function register_block_core_social_link() {
 		'youtube',
 	);
 
+	$path     = __DIR__ . '/social-link/block.json';
+	$metadata = json_decode( file_get_contents( $path ), true );
+
 	foreach ( $sites as $site ) {
 		register_block_type(
 			'core/social-link-' . $site,
-			array(
-				'attributes'      => array(
-					'url'   => array(
-						'type' => 'string',
-					),
-					'site'  => array(
-						'type'    => 'string',
-						'default' => $site,
-					),
-					'label' => array(
-						'type' => 'string',
-					),
-				),
-				'render_callback' => 'render_core_social_link',
+			array_merge(
+				$metadata,
+				array(
+					'render_callback' => 'render_core_social_link',
+				)
 			)
 		);
 	}
+
+	register_block_type(
+		$metadata['name'],
+		array_merge(
+			$metadata,
+			array(
+				'render_callback' => 'render_core_social_link',
+			)
+		)
+	);
 }
 add_action( 'init', 'register_block_core_social_link' );