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