Image block: wrap images with hrefs in an A tag (#55470)

* 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.

* Removing duplicate <a href /> wrapper
Adding disabled onClick and aria attribute

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,
@@ -725,7 +730,6 @@ export default function Image( {
 			}
 		}
 		/* eslint-enable no-lonely-if */
-
 		img = (
 			<ResizableBox
 				style={ {
@@ -784,7 +788,14 @@ 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 */ }
+			{ !! href ? (
+				<a href={ href } { ...disabledClickProps }>
+					{ img }
+				</a>
+			) : (
+				img
+			) }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText