Image block: Fix focus style not around whole image when linked (#62556)

* Add inline-block display to image and media-text image * Add display:block to image's <a> tag * Addressed feedback * Fix linting * Change syntax for .wp-block-media-text__media a CSS Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: krokodok <krokodok@git.wordpress.org>
WordPress · Jun 20, 2024 · 1a1372b · 1a1372b · github-actions · Jun 20, 2024
1 parent a33a94d
commit 1a1372b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -1,4 +1,9 @@
 .wp-block-image {
+
+	a {
+		display: inline-block;
+	}
+
 	img {
 		height: auto;
 		max-width: 100%;
@@ -27,6 +32,11 @@
 		text-align: center;
 	}
 
+	&.alignfull a,
+	&.alignwide a {
+		width: 100%;
+	}
+
 	&.alignfull img,
 	&.alignwide img {
 		height: auto;

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
@@ -68,6 +68,10 @@
 	/*!rtl:end:ignore*/
 }
 
+.wp-block-media-text__media a {
+	display: inline-block;
+}
+
 .wp-block-media-text__media img,
 .wp-block-media-text__media video {
 	height: auto;