Block theme: Only show pattern thumbnail helper text for screen reade…

…r 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 #655 (comment)

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>

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;
 		}