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 ''; + return ''; } /** 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",