diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
index b525d267a1171..5539298ec3bed 100644
--- 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
index dc732a7a1f90e..d5168e95c11fe 100644
--- 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 '
' . $icon . '';
+ return ' ' . $icon . '';
}
/**
diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
index 93f8a1f226afb..46a31ce06590c 100644
--- 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
index 041b0816839f6..5e17cb2b5ee8f 100644
--- 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 (
-
+
+
+
+
+ setAttributes( { openInNewTab: ! openInNewTab } )
+ }
+ />
+
+
+
+
);
}
diff --git a/packages/e2e-tests/fixtures/blocks/core__social-links.json b/packages/e2e-tests/fixtures/blocks/core__social-links.json
index b3cf93c19f980..42232b6887ae5 100644
--- 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",