From c88b28730fc711d87148304bf6103cd461d692dc Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 19 Oct 2023 13:15:15 +1100
Subject: [PATCH 1/2] This commit sees what happens when we wrap the image
 element in an A tag in the editor. This is to ensure any inherited styles
 from the link element, such as border color, apply to the image.

---
 packages/block-library/src/image/image.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 1f602c4380e880..db64c947a78634 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -725,7 +725,6 @@ export default function Image( {
 			}
 		}
 		/* eslint-enable no-lonely-if */
-
 		img = (
 			<ResizableBox
 				style={ {
@@ -770,7 +769,9 @@ export default function Image( {
 				} }
 				resizeRatio={ align === 'center' ? 2 : 1 }
 			>
-				{ img }
+				{ /* If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles */ }
+				{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
+				{ !! href ? <a>{ img }</a> : img }
 			</ResizableBox>
 		);
 	}
@@ -784,7 +785,9 @@ export default function Image( {
 			{ /* Hide controls during upload to avoid component remount,
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
-			{ img }
+			{ /* If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles */ }
+			{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
+			{ !! href ? <a>{ img }</a> : img }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText

From eb7b03a368ebb150fa8f646b688455a3c131fd65 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 19 Oct 2023 16:11:19 +1100
Subject: [PATCH 2/2] Removing duplicate <a href /> wrapper Adding disabled
 onClick and aria attribute

---
 packages/block-library/src/image/image.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index db64c947a78634..321e19a6456377 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -83,6 +83,11 @@ const scaleOptions = [
 	},
 ];
 
+const disabledClickProps = {
+	onClick: ( event ) => event.preventDefault(),
+	'aria-disabled': true,
+};
+
 export default function Image( {
 	temporaryURL,
 	attributes,
@@ -769,9 +774,7 @@ export default function Image( {
 				} }
 				resizeRatio={ align === 'center' ? 2 : 1 }
 			>
-				{ /* If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles */ }
-				{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
-				{ !! href ? <a>{ img }</a> : img }
+				{ img }
 			</ResizableBox>
 		);
 	}
@@ -786,8 +789,13 @@ export default function Image( {
 				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 */ }
-			{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
-			{ !! href ? <a>{ img }</a> : img }
+			{ !! href ? (
+				<a href={ href } { ...disabledClickProps }>
+					{ img }
+				</a>
+			) : (
+				img
+			) }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText