Image Block: Enable image block to be selected correctly when clicked (…

…#56043) * Image Block: Enable image blocks to be selected correctly when clicked * Add tabIndex * Update packages/block-library/src/image/editor.scss Co-authored-by: Ramon <[email protected]> * Wrap img element directly to make the image resizable * Use `display:inline` instead of `display:inline-block` --------- Co-authored-by: Ramon <[email protected]>
WordPress · Nov 17, 2023 · 22dcbde · 22dcbde
1 parent cc426ad
commit 22dcbde
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 36 deletions.
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -62,13 +62,6 @@ figure.wp-block-image:not(.wp-block) {
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
-
-	// When the Image block is linked,
-	// it's wrapped with a disabled <a /> tag.
-	// Restore cursor style so it doesn't appear 'clickable'.
-	> a {
-		cursor: default;
-	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -83,9 +83,29 @@ const scaleOptions = [
 	},
 ];
 
-const disabledClickProps = {
-	onClick: ( event ) => event.preventDefault(),
-	'aria-disabled': true,
+// If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles.
+const ImageWrapper = ( { href, children } ) => {
+	if ( ! href ) {
+		return children;
+	}
+	return (
+		<a
+			href={ href }
+			onClick={ ( event ) => event.preventDefault() }
+			aria-disabled={ true }
+			style={ {
+				// When the Image block is linked,
+				// it's wrapped with a disabled <a /> tag.
+				// Restore cursor style so it doesn't appear 'clickable'
+				// and remove pointer events. Safari needs the display property.
+				pointerEvents: 'none',
+				cursor: 'default',
+				display: 'inline',
+			} }
+		>
+			{ children }
+		</a>
+	);
 };
 
 export default function Image( {
@@ -653,25 +673,31 @@ export default function Image( {
 
 	if ( canEditImage && isEditingImage ) {
 		img = (
-			<ImageEditor
-				id={ id }
-				url={ url }
-				width={ numericWidth }
-				height={ numericHeight }
-				clientWidth={ fallbackClientWidth }
-				naturalHeight={ naturalHeight }
-				naturalWidth={ naturalWidth }
-				onSaveImage={ ( imageAttributes ) =>
-					setAttributes( imageAttributes )
-				}
-				onFinishEditing={ () => {
-					setIsEditingImage( false );
-				} }
-				borderProps={ isRounded ? undefined : borderProps }
-			/>
+			<ImageWrapper href={ href }>
+				<ImageEditor
+					id={ id }
+					url={ url }
+					width={ numericWidth }
+					height={ numericHeight }
+					clientWidth={ fallbackClientWidth }
+					naturalHeight={ naturalHeight }
+					naturalWidth={ naturalWidth }
+					onSaveImage={ ( imageAttributes ) =>
+						setAttributes( imageAttributes )
+					}
+					onFinishEditing={ () => {
+						setIsEditingImage( false );
+					} }
+					borderProps={ isRounded ? undefined : borderProps }
+				/>
+			</ImageWrapper>
 		);
 	} else if ( ! isResizable ) {
-		img = <div style={ { width, height, aspectRatio } }>{ img }</div>;
+		img = (
+			<div style={ { width, height, aspectRatio } }>
+				<ImageWrapper href={ href }>{ img }</ImageWrapper>
+			</div>
+		);
 	} else {
 		const numericRatio = aspectRatio && evalAspectRatio( aspectRatio );
 		const customRatio = numericWidth / numericHeight;
@@ -774,7 +800,7 @@ export default function Image( {
 				} }
 				resizeRatio={ align === 'center' ? 2 : 1 }
 			>
-				{ img }
+				<ImageWrapper href={ href }>{ img }</ImageWrapper>
 			</ResizableBox>
 		);
 	}
@@ -788,14 +814,7 @@ export default function Image( {
 			{ /* Hide controls during upload to avoid component remount,
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
-			{ /* If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles */ }
-			{ !! href ? (
-				<a href={ href } { ...disabledClickProps }>
-					{ img }
-				</a>
-			) : (
-				img
-			) }
+			{ img }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText