Site logo: Add link toggle option (#31162)

* Site logo: Add link toggle option Co-authored-by: Ari Stathopoulos <aristath@gmail.com>
WordPress · May 6, 2021 · f6dd6a1 · f6dd6a1
1 parent 2595c46
commit f6dd6a1
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 33 deletions.
diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json
@@ -11,6 +11,14 @@
 		},
 		"width": {
 			"type": "number"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": true
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
@@ -16,6 +16,7 @@ import {
 	RangeControl,
 	ResizableBox,
 	Spinner,
+	ToggleControl,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -46,7 +47,7 @@ const ACCEPT_MEDIA_STRING = 'image/*';
 
 const SiteLogo = ( {
 	alt,
-	attributes: { align, width, height },
+	attributes: { align, width, height, isLink, linkTarget },
 	containerRef,
 	isSelected,
 	setAttributes,
@@ -59,7 +60,7 @@ const SiteLogo = ( {
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const { toggleSelection } = useDispatch( blockEditorStore );
-	const classes = classnames( {
+	const classes = classnames( 'custom-logo-link', {
 		'is-transient': isBlobURL( logoUrl ),
 	} );
 	const { maxWidth, title } = useSelect( ( select ) => {
@@ -83,35 +84,38 @@ const SiteLogo = ( {
 	}
 
 	const img = (
-		// Disable reason: Image itself is not meant to be interactive, but
-		// should direct focus to block.
-		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-		<a
-			href={ siteUrl }
-			className={ classes }
-			rel="home"
-			title={ title }
-			onClick={ ( event ) => event.preventDefault() }
-		>
-			<span className="custom-logo-link">
-				<img
-					className="custom-logo"
-					src={ logoUrl }
-					alt={ alt }
-					onLoad={ ( event ) => {
-						setNaturalSize(
-							pick( event.target, [
-								'naturalWidth',
-								'naturalHeight',
-							] )
-						);
-					} }
-				/>
-			</span>
-		</a>
-		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+		<img
+			className="custom-logo"
+			src={ logoUrl }
+			alt={ alt }
+			onLoad={ ( event ) => {
+				setNaturalSize(
+					pick( event.target, [ 'naturalWidth', 'naturalHeight' ] )
+				);
+			} }
+		/>
 	);
 
+	let imgWrapper = img;
+
+	// Disable reason: Image itself is not meant to be interactive, but
+	// should direct focus to block.
+	if ( isLink ) {
+		imgWrapper = (
+			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+			<a
+				href={ siteUrl }
+				className={ classes }
+				rel="home"
+				title={ title }
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				{ img }
+			</a>
+			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+		);
+	}
+
 	let imageWidthWithinContainer;
 
 	if ( clientWidth && naturalWidth && naturalHeight ) {
@@ -120,7 +124,7 @@ const SiteLogo = ( {
 	}
 
 	if ( ! isResizable || ! imageWidthWithinContainer ) {
-		return <div style={ { width, height } }>{ img }</div>;
+		return <div style={ { width, height } }>{ imgWrapper }</div>;
 	}
 
 	const currentWidth = width || imageWidthWithinContainer;
@@ -192,6 +196,24 @@ const SiteLogo = ( {
 						value={ width || '' }
 						disabled={ ! isResizable }
 					/>
+					<ToggleControl
+						label={ __( 'Link image to home' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+					{ isLink && (
+						<>
+							<ToggleControl
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						</>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			<ResizableBox
@@ -217,7 +239,7 @@ const SiteLogo = ( {
 					} );
 				} }
 			>
-				{ img }
+				{ imgWrapper }
 			</ResizableBox>
 		</>
 	);

diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
@@ -23,7 +23,20 @@ function render_block_core_site_logo( $attributes ) {
 
 	add_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter );
 	$custom_logo = get_custom_logo();
-	$classnames  = array();
+
+	if ( ! $attributes['isLink'] ) {
+		// Remove the link.
+		$custom_logo = preg_replace( '#<a.*?>(.*?)</a>#i', '\1', $custom_logo );
+	}
+
+	if ( $attributes['isLink'] && '_blank' === $attributes['linkTarget'] ) {
+		// Add the link target after the rel="home".
+		// Add an aria-label for informing that the page opens in a new tab.
+		$aria_label  = 'aria-label="' . esc_attr__( '(Home link, opens in a new tab)' ) . '"';
+		$custom_logo = str_replace( 'rel="home"', 'rel="home" target="' . $attributes['linkTarget'] . '"' . $aria_label, $custom_logo );
+	}
+
+	$classnames = array();
 	if ( ! empty( $attributes['className'] ) ) {
 		$classnames[] = $attributes['className'];
 	}

diff --git a/packages/e2e-tests/fixtures/blocks/core__site-logo.json b/packages/e2e-tests/fixtures/blocks/core__site-logo.json
@@ -3,7 +3,10 @@
 		"clientId": "_clientId_0",
 		"name": "core/site-logo",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"isLink": true,
+			"linkTarget": "_self"
+		},
 		"innerBlocks": [],
 		"originalContent": ""
 	}