From 52d7c1e678dc74cfd08174e05f3f834e27bfb42c Mon Sep 17 00:00:00 2001
From: George Hotelling <george.hotelling@automattic.com>
Date: Tue, 1 Nov 2022 15:24:14 -0400
Subject: [PATCH 1/3] Add rel attribute for Social Icons

---
 docs/reference-guides/core-blocks.md           |  2 +-
 .../block-library/src/social-link/block.json   |  3 +++
 packages/block-library/src/social-link/edit.js | 18 ++++++++++++++++--
 .../block-library/src/social-link/index.php    | 18 +++++++++++-------
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index b2f3b712d25c51..dd9fdbdc0566b0 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -753,7 +753,7 @@ Display an icon linking to a social media profile or site. ([Source](https://git
 -	**Name:** core/social-link
 -	**Category:** widgets
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** label, service, url
+-	**Attributes:** label, rel, service, url
 
 ## Social Icons
 
diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
index 90a3f270d738d7..5f64b7dcf777c5 100644
--- a/packages/block-library/src/social-link/block.json
+++ b/packages/block-library/src/social-link/block.json
@@ -16,6 +16,9 @@
 		},
 		"label": {
 			"type": "string"
+		},
+		"rel": {
+			"type": "string"
 		}
 	},
 	"usesContext": [
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 7e6a51618a8972..b546921ce454b5 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -12,7 +12,7 @@ import {
 	URLInput,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Fragment, useState } from '@wordpress/element';
+import { Fragment, useState, useCallback } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -66,7 +66,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	setAttributes,
 } ) => {
-	const { url, service, label } = attributes;
+	const { url, service, label, rel } = attributes;
 	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
@@ -88,6 +88,13 @@ const SocialLinkEdit = ( {
 		},
 	} );
 
+	const onSetLinkRel = useCallback(
+		( value ) => {
+			setAttributes( { rel: value } );
+		},
+		[ setAttributes ]
+	);
+
 	return (
 		<Fragment>
 			<InspectorControls>
@@ -113,6 +120,13 @@ const SocialLinkEdit = ( {
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls __experimentalGroup="advanced">
+				<TextControl
+					label={ __( 'Link rel' ) }
+					value={ rel || '' }
+					onChange={ onSetLinkRel }
+				/>
+			</InspectorControls>
 			<li { ...blockProps }>
 				<Button
 					className="wp-block-social-link-anchor"
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 3aabd2a9a8430a..4aecaafccb6337 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -20,6 +20,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$service     = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';
 	$url         = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
 	$label       = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
+	$rel         = ( isset( $attributes['rel'] ) ) ? $attributes['rel'] : '';
 	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
 
 	// Don't render a link if there is no URL set.
@@ -43,11 +44,6 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		$url = 'https://' . $url;
 	}
 
-	$rel_target_attributes = '';
-	if ( $open_in_new_tab ) {
-		$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';
-	}
-
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
@@ -57,13 +53,21 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	);
 
 	$link  = '<li ' . $wrapper_attributes . '>';
-	$link .= '<a href="' . esc_url( $url ) . '" ' . $rel_target_attributes . ' class="wp-block-social-link-anchor">';
+	$link .= '<a href="' . esc_url( $url ) . '" class="wp-block-social-link-anchor">';
 	$link .= $icon;
 	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">';
 	$link .= esc_html( $label );
 	$link .= '</span></a></li>';
 
-	return $link;
+	$w = new WP_HTML_Tag_Processor($link);
+	$w->next_tag('a');
+	if ( $open_in_new_tab ) {
+		$w->set_attribute('rel', esc_attr( $rel ) . ' noopener nofollow');
+		$w->set_attribute('target', '_blank');
+	} else if ( $rel !== '' ) {
+		$w->set_attribute('rel', esc_attr( $rel) );
+	}
+	return $w;
 }
 
 /**

From b94e8485624beec1f4c30d68bc1921e7bb2169c6 Mon Sep 17 00:00:00 2001
From: George Hotelling <george.hotelling@automattic.com>
Date: Tue, 1 Nov 2022 16:08:37 -0400
Subject: [PATCH 2/3] Lint fix

---
 packages/block-library/src/social-link/index.php | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 4aecaafccb6337..7e669bf56d6dad 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -59,13 +59,13 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$link .= esc_html( $label );
 	$link .= '</span></a></li>';
 
-	$w = new WP_HTML_Tag_Processor($link);
-	$w->next_tag('a');
+	$w = new WP_HTML_Tag_Processor( $link );
+	$w->next_tag( 'a' );
 	if ( $open_in_new_tab ) {
-		$w->set_attribute('rel', esc_attr( $rel ) . ' noopener nofollow');
-		$w->set_attribute('target', '_blank');
-	} else if ( $rel !== '' ) {
-		$w->set_attribute('rel', esc_attr( $rel) );
+		$w->set_attribute( 'rel', esc_attr( $rel ) . ' noopener nofollow' );
+		$w->set_attribute( 'target', '_blank' );
+	} elseif ( '' !== $rel ) {
+		$w->set_attribute( 'rel', esc_attr( $rel ) );
 	}
 	return $w;
 }

From 15d99544025d3ab7e0810021db861ba9e72c1682 Mon Sep 17 00:00:00 2001
From: George Hotelling <george.hotelling@automattic.com>
Date: Wed, 2 Nov 2022 08:57:38 -0400
Subject: [PATCH 3/3] Cleanup

---
 packages/block-library/src/social-link/edit.js | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index b546921ce454b5..fab49838afa2e4 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -12,7 +12,7 @@ import {
 	URLInput,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Fragment, useState, useCallback } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -88,13 +88,6 @@ const SocialLinkEdit = ( {
 		},
 	} );
 
-	const onSetLinkRel = useCallback(
-		( value ) => {
-			setAttributes( { rel: value } );
-		},
-		[ setAttributes ]
-	);
-
 	return (
 		<Fragment>
 			<InspectorControls>
@@ -124,7 +117,7 @@ const SocialLinkEdit = ( {
 				<TextControl
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
-					onChange={ onSetLinkRel }
+					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
 			</InspectorControls>
 			<li { ...blockProps }>