add support for title rel and target

WordPress · Apr 23, 2021 · 99e9de5 · 99e9de5
1 parent 1aa73ef
commit 99e9de5
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 48 deletions.
diff --git a/packages/block-library/src/home-link/block.json b/packages/block-library/src/home-link/block.json
@@ -10,6 +10,12 @@
 		"opensInNewTab": {
 			"type": "boolean",
 			"default": false
+		},
+		"rel": {
+			"type": "string"
+		},
+		"title": {
+			"type": "string"
 		}
 	},
 	"usesContext": [
@@ -19,7 +25,6 @@
 		"customBackgroundColor",
 		"fontSize",
 		"customFontSize",
-		"showSubmenuIcon",
 		"style"
 	],
 	"supports": {

diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
@@ -1,11 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	InspectorControls,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
+import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
 
 const preventDefault = ( event ) => event.preventDefault();
 
@@ -23,7 +28,7 @@ export default function HomeEdit( { attributes, setAttributes, clientId } ) {
 		[ clientId ]
 	);
 
-	const { label } = attributes;
+	const { label, opensInNewTab, rel, title } = attributes;
 
 	useEffect( () => {
 		if ( label === undefined ) {
@@ -32,30 +37,60 @@ export default function HomeEdit( { attributes, setAttributes, clientId } ) {
 	}, [ clientId, label ] );
 
 	return (
-		<li { ...blockProps }>
-			<a
-				className="wp-block-home-link__content"
-				href={ homeUrl }
-				onClick={ preventDefault }
-			>
-				<RichText
-					identifier="label"
-					className="wp-block-home-link__label"
-					value={ label }
-					onChange={ ( labelValue ) => {
-						setAttributes( { label: labelValue } );
-					} }
-					aria-label={ __( 'Home link text' ) }
-					placeholder={ __( 'Add home link' ) }
-					withoutInteractiveFormatting
-					allowedFormats={ [
-						'core/bold',
-						'core/italic',
-						'core/image',
-						'core/strikethrough',
-					] }
-				/>
-			</a>
-		</li>
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Home link settings' ) }>
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						checked={ opensInNewTab }
+						onChange={ () => {
+							setAttributes( { opensInNewTab: ! opensInNewTab } );
+						} }
+						help={ __( 'Opens the home link in a new tab' ) }
+					/>
+					<TextControl
+						value={ title || '' }
+						onChange={ ( titleValue ) => {
+							setAttributes( { title: titleValue } );
+						} }
+						label={ __( 'Link title' ) }
+						autoComplete="off"
+					/>
+					<TextControl
+						value={ rel || '' }
+						onChange={ ( relValue ) => {
+							setAttributes( { rel: relValue } );
+						} }
+						label={ __( 'Link rel' ) }
+						autoComplete="off"
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<li { ...blockProps }>
+				<a
+					className="wp-block-home-link__content"
+					href={ homeUrl }
+					onClick={ preventDefault }
+				>
+					<RichText
+						identifier="label"
+						className="wp-block-home-link__label"
+						value={ label }
+						onChange={ ( labelValue ) => {
+							setAttributes( { label: labelValue } );
+						} }
+						aria-label={ __( 'Home link text' ) }
+						placeholder={ __( 'Add home link' ) }
+						withoutInteractiveFormatting
+						allowedFormats={ [
+							'core/bold',
+							'core/italic',
+							'core/image',
+							'core/strikethrough',
+						] }
+					/>
+				</a>
+			</li>
+		</>
 	);
 }
diff --git a/packages/block-library/src/home-link/index.php b/packages/block-library/src/home-link/index.php
@@ -19,28 +19,49 @@ function render_block_core_home( $attributes ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classnames ) ) );
 
-	$label = wp_kses(
-		$attributes['label'],
-		array(
-			'code'   => array(),
-			'em'     => array(),
-			'img'    => array(
-				'scale' => array(),
-				'class' => array(),
-				'style' => array(),
-				'src'   => array(),
-				'alt'   => array(),
-			),
-			's'      => array(),
-			'span'   => array(
-				'style' => array(),
-			),
-			'strong' => array(),
-		)
-	);
+	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home__content"';
+
+	// Start appending HTML attributes to anchor tag.
+	$html .= ' href="' . esc_url( home_url() ) . '"';
+
+	if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
+		$html .= ' target="_blank" ';
+	}
 
-	$html = sprintf( '<li %s><a classname="wp-block-home__content" href="%s">%s</a></li>', $wrapper_attributes, home_url(), $label );
+	if ( isset( $attributes['rel'] ) ) {
+		$html .= ' rel="' . esc_attr( $attributes['rel'] ) . '"';
+	}
+
+	if ( isset( $attributes['title'] ) ) {
+		$html .= ' title="' . esc_attr( $attributes['title'] ) . '"';
+	}
+
+	// End appending HTML attributes to anchor tag.
+	$html .= '>';
+
+	if ( isset( $attributes['label'] ) ) {
+		$html .= wp_kses(
+			$attributes['label'],
+			array(
+				'code'   => array(),
+				'em'     => array(),
+				'img'    => array(
+					'scale' => array(),
+					'class' => array(),
+					'style' => array(),
+					'src'   => array(),
+					'alt'   => array(),
+				),
+				's'      => array(),
+				'span'   => array(
+					'style' => array(),
+				),
+				'strong' => array(),
+			)
+		);
+	}
 
+	$html .= '</a></li>';
 	return $html;
 }
 

diff --git a/packages/block-library/src/home-link/style.scss b/packages/block-library/src/home-link/style.scss
@@ -17,6 +17,7 @@
 	}
 
 	&:not([style*="text-decoration"]) {
+		.wp-block-home-link,
 		.wp-block-home-link__content {
 			text-decoration: none;