add target and rel setting in SocialLink Block

WordPress · Sep 18, 2020 · 6da2202 · 6da2202
1 parent 26e4d59
commit 6da2202
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 32 deletions.
diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
@@ -13,6 +13,12 @@
 		},
 		"label": {
 			"type": "string"
+		},
+		"linkTarget": {
+			"type": "string"
+		},
+		"rel": {
+			"type": "string"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -8,35 +8,59 @@ import classNames from 'classnames';
  */
 import {
 	InspectorControls,
-	URLPopover,
-	URLInput,
 	__experimentalBlock as Block,
+	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
 import { Fragment, useState } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
 	PanelRow,
 	TextControl,
+	ToggleControl,
+	Popover,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { keyboardReturn } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { getIconBySite, getNameBySite } from './social-list';
 
+const NEW_TAB_REL = 'noreferrer noopener';
+
 const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
-	const { url, service, label } = attributes;
-	const [ showURLPopover, setPopover ] = useState( false );
+	const { url, service, label, rel, linkTarget } = attributes;
+	const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
 	} );
 
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
 
+	const onToggleOpenInNewTab = ( value ) => {
+		const newLinkTarget = value ? '_blank' : undefined;
+
+		let updatedRel = rel;
+		if ( newLinkTarget && ! rel ) {
+			updatedRel = NEW_TAB_REL;
+		} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
+			updatedRel = undefined;
+		}
+
+		setAttributes( {
+			linkTarget: newLinkTarget,
+			rel: updatedRel,
+		} );
+	};
+
+	const onSetLinkRel = ( value ) => {
+		setAttributes( { rel: value } );
+	};
+
+	const opensInNewTab = linkTarget === '_blank';
+
 	return (
 		<Fragment>
 			<InspectorControls>
@@ -61,36 +85,44 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 						/>
 					</PanelRow>
 				</PanelBody>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ onToggleOpenInNewTab }
+						checked={ opensInNewTab }
+					/>
+					<TextControl
+						label={ __( 'Link rel' ) }
+						value={ rel || '' }
+						onChange={ onSetLinkRel }
+					/>
+				</PanelBody>
 			</InspectorControls>
 			<Block.li className={ classes }>
-				<Button onClick={ () => setPopover( true ) }>
+				<Button onClick={ () => setIsURLPickerOpen( true ) }>
 					<IconComponent />
-					{ isSelected && showURLPopover && (
-						<URLPopover onClose={ () => setPopover( false ) }>
-							<form
-								className="block-editor-url-popover__link-editor"
-								onSubmit={ ( event ) => {
-									event.preventDefault();
-									setPopover( false );
+					{ isSelected && isURLPickerOpen && (
+						<Popover
+							position="bottom center"
+							onClose={ () => setIsURLPickerOpen( false ) }
+						>
+							<LinkControl
+								className="wp-block-navigation-link__inline-link-input"
+								value={ { url, opensInNewTab } }
+								onChange={ ( {
+									url: newURL = '',
+									opensInNewTab: newOpensInNewTab,
+								} ) => {
+									setAttributes( { url: newURL } );
+
+									if ( opensInNewTab !== newOpensInNewTab ) {
+										onToggleOpenInNewTab(
+											newOpensInNewTab
+										);
+									}
 								} }
-							>
-								<div className="block-editor-url-input">
-									<URLInput
-										value={ url }
-										onChange={ ( nextURL ) =>
-											setAttributes( { url: nextURL } )
-										}
-										placeholder={ __( 'Enter address' ) }
-										disableSuggestions={ true }
-									/>
-								</div>
-								<Button
-									icon={ keyboardReturn }
-									label={ __( 'Apply' ) }
-									type="submit"
-								/>
-							</form>
-						</URLPopover>
+							/>
+						</Popover>
 					) }
 				</Button>
 			</Block.li>

diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
@@ -16,6 +16,8 @@ function render_block_core_social_link( $attributes ) {
 	$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 );
+	$target     = ( isset( $attributes['linkTarget'] ) ) ? 'target="' . esc_attr( $attributes['linkTarget'] ) . '"' : '';
+	$rel        = ( isset( $attributes['rel'] ) ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
 	$class_name = isset( $attributes['className'] ) ? ' ' . $attributes['className'] : false;
 
 	// Don't render a link if there is no URL set.
@@ -24,7 +26,7 @@ function render_block_core_social_link( $attributes ) {
 	}
 
 	$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 ) . '"' . $rel . $target . '> ' . $icon . '</a></li>';
 }
 
 /**