Image block: Focus style not around whole image when linked

[krokodok]

Description

When the image block is linked the focus style for the link does not stretch around the whole image. This happens because both a (anchor) and img (image) tags have display: inline by default.

Step-by-step reproduction instructions

1. Open a clean installation of WordPress with a block theme, e.g. on https://playground.wordpress.net/ with current WordPress 6.5.4.
2. Insert an image block and link the image with a URL.
3. Tab to the linked image using the keyboard in the frontend.
4. The link's outline will not stretch around the whole image.

Screenshots, screen recording, code snippet

Backend

Frontend (with WordPress twenty-twentyfour)

Should look like this

(The outline should also have a second color or whitespace towards the image, but that's a problem of the twenty-twentyfour theme focus style and not the same issue as the stretching around the anchor.)

Environment info

• Firefox 126.0.1 & Chrome 125.0.6422.142

• MacOS 14.5

• WordPress 6.5.4 on Playground

• No special Gutenberg version installed

• I could also recreate it with Gutenberg at commit ee30a87

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

Thanks for the report.

I tested on Windows OS, but this issue could be reproduced in the Firefox browser. What is your environment?

I also found that this issue occurs in the Media & Text block.

[krokodok]

@t-hamano Sorry for leaving out these facts. I reproduced it in Firefox and Chrome on MacOS 14.5.