From 9cc3962377021a8360af6159112d3ab9fe5aac4f Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 15 Apr 2024 12:09:02 -0400
Subject: [PATCH] Block theme: Only show pattern thumbnail helper text for
 screen reader users, hide image on error

This removes the flash of text before the loader kicks in. This text is only used to ensure the link has an accessible name while the image is loading or broken. Once loaded, the image's alt serves this function. If there is an error, the (broken) image should not be visible, and the span provides the accessible text.

See https://github.com/WordPress/pattern-directory/pull/655#issuecomment-2055119364
---
 .../src/blocks/pattern-thumbnail/render.php                    | 3 ++-
 .../src/blocks/pattern-thumbnail/style.scss                    | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/render.php b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/render.php
index a379fe10..4f86dcc4 100644
--- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/render.php
+++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/render.php
@@ -54,6 +54,7 @@
 	data-wp-context="<?php echo esc_attr( $encoded_state ); ?>"
 	data-wp-init="callbacks.init"
 	data-wp-class--has-loaded="state.hasLoaded"
+	data-wp-class--has-error="state.hasError"
 	tabIndex="-1"
 >
 	<?php if ( $has_link ) : ?>
@@ -72,7 +73,7 @@ class="wporg-pattern-thumbnail__container"
 		/>
 		<span
 			data-wp-bind--hidden="state.base64Image"
-			data-wp-class--screen-reader-text="!state.base64Image"
+			class="screen-reader-text"
 			data-wp-text="context.alt"
 		></span>
 	</div>
diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/style.scss b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/style.scss
index f81a3cc6..a50a396c 100644
--- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/style.scss
+++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/style.scss
@@ -38,7 +38,7 @@
 		flex-basis: 0;
 	}
 
-	&.has-loaded {
+	&.has-loaded:not(.has-error) {
 		img {
 			display: block;
 		}