Add "open in new tab" feature to Social Links Block (#25468)

* add target and rel setting in SocialLink Block * Revert "add target and rel setting in SocialLink Block" This reverts commit 6da2202. * use context to open Social Links in new tab * Update packages/block-library/src/social-links/edit.js Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com> * Update packages/block-library/src/social-links/edit.js Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com> * update test fixture of social links block Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com>
WordPress · Sep 19, 2020 · 8164fb0 · 8164fb0
1 parent 26e4d59
commit 8164fb0
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 13 deletions.
diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
@@ -15,6 +15,9 @@
 			"type": "string"
 		}
 	},
+	"usesContext": [
+		"openInNewTab"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,

diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
@@ -8,11 +8,15 @@
 /**
  * Renders the `core/social-link` block on server.
  *
- * @param array $attributes The block attributes.
+ * @param Array   $attributes The block attributes.
+ * @param String  $content InnerBlocks content of the Block.
+ * @param WPBlock $block Block object.
  *
  * @return string Rendered HTML of the referenced block.
  */
-function render_block_core_social_link( $attributes ) {
+function render_block_core_social_link( $attributes, $content, $block ) {
+	$open_in_new_tab = $block->context['openInNewTab'];
+
 	$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 );
@@ -23,8 +27,13 @@ function render_block_core_social_link( $attributes ) {
 		return '';
 	}
 
+	$attribute = '';
+	if ( $open_in_new_tab ) {
+		$attribute = 'rel="noopener nofollow" target="_blank"';
+	}
+
 	$icon = block_core_social_link_get_icon( $service );
-	return '<li class="wp-social-link wp-social-link-' . esc_attr( $service ) . esc_attr( $class_name ) . '"><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '"> ' . $icon . '</a></li>';
+	return '<li class="wp-social-link wp-social-link-' . esc_attr( $service ) . esc_attr( $class_name ) . '"><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '" ' . $attribute . '> ' . $icon . '</a></li>';
 }
 
 /**

diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
@@ -1,6 +1,15 @@
 {
 	"name": "core/social-links",
 	"category": "widgets",
+	"attributes": {
+		"openInNewTab": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"providesContext": {
+		"openInNewTab": "openInNewTab"
+	},
 	"supports": {
 		"align": [
 			"left",

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -2,10 +2,15 @@
  * WordPress dependencies
  */
 
+import { Fragment } from '@wordpress/element';
+
 import {
 	InnerBlocks,
 	__experimentalBlock as Block,
+	InspectorControls,
 } from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 const ALLOWED_BLOCKS = [ 'core/social-link' ];
 
@@ -22,16 +27,33 @@ const TEMPLATE = [
 	[ 'core/social-link', { service: 'youtube' } ],
 ];
 
-export function SocialLinksEdit() {
+export function SocialLinksEdit( props ) {
+	const {
+		attributes: { openInNewTab },
+		setAttributes,
+	} = props;
 	return (
-		<InnerBlocks
-			allowedBlocks={ ALLOWED_BLOCKS }
-			templateLock={ false }
-			template={ TEMPLATE }
-			orientation="horizontal"
-			__experimentalTagName={ Block.ul }
-			__experimentalAppenderTagName="li"
-		/>
+		<Fragment>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Open links in new tab' ) }
+						checked={ openInNewTab }
+						onChange={ () =>
+							setAttributes( { openInNewTab: ! openInNewTab } )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<InnerBlocks
+				allowedBlocks={ ALLOWED_BLOCKS }
+				templateLock={ false }
+				template={ TEMPLATE }
+				orientation="horizontal"
+				__experimentalTagName={ Block.ul }
+				__experimentalAppenderTagName="li"
+			/>
+		</Fragment>
 	);
 }
 

diff --git a/packages/e2e-tests/fixtures/blocks/core__social-links.json b/packages/e2e-tests/fixtures/blocks/core__social-links.json
@@ -3,7 +3,9 @@
         "clientId": "_clientId_0",
         "name": "core/social-links",
         "isValid": true,
-        "attributes": {},
+        "attributes": {
+			"openInNewTab": false
+		},
         "innerBlocks": [
             {
                 "clientId": "_clientId_0",