From 9b58c8139c4a9e4aa3327efa738c8b34dac82afd Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 6 Feb 2025 13:04:44 +0100
Subject: [PATCH] WIP - fix broken frontend

---
 packages/block-library/src/image/index.php | 31 +++++++++++++++-------
 packages/block-library/src/image/view.js   |  6 +++--
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 906ae318cb090..3b2a104412cbd 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -150,14 +150,25 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 		return $block_content;
 	}
 
-	$alt                = $p->get_attribute( 'alt' );
-	$img_uploaded_src   = $p->get_attribute( 'src' );
-	$img_class_names    = $p->get_attribute( 'class' );
-	$img_styles         = $p->get_attribute( 'style' );
-	$img_width          = 'none';
-	$img_height         = 'none';
-	$aria_label         = __( 'Enlarge image' );
-	$screen_reader_text = __( 'Enlarged image' );
+	$alt              = $p->get_attribute( 'alt' );
+	$img_uploaded_src = $p->get_attribute( 'src' );
+	$img_class_names  = $p->get_attribute( 'class' );
+	$img_styles       = $p->get_attribute( 'style' );
+	$img_width        = 'none';
+	$img_height       = 'none';
+	$aria_label       = __( 'Enlarge image' );
+
+	wp_interactivity_config(
+		'core/image',
+		array(
+			'defaultAriaLabel' => $aria_label,
+		)
+	);
+
+	if ( $alt ) {
+		/* translators: %s: Image alt text. */
+		$custom_aria_label = sprintf( __( 'Enlarge image: %s' ), $alt );
+	}
 
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
@@ -187,8 +198,8 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 					'targetHeight'     => $img_height,
 					'scaleAttr'        => $block['attrs']['scale'] ?? false,
 					'alt'              => $alt,
-					'screenReaderText' => empty( $alt ) ? $screen_reader_text : "$screen_reader_text: $alt",
 					'galleryId'        => $block_instance->context['galleryId'] ?? null,
+					'customAriaLabel'  => $custom_aria_label ?? null,
 				),
 			),
 		)
@@ -311,7 +322,7 @@ class="wp-lightbox-overlay zoom"
 						<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
 					</figure>
 				</div>
-				<div data-wp-watch="callbacks.setScreenReaderText" aria-live="polite" aria-atomic="true" class="lightbox-speak screen-reader-text"></div>
+				<div data-wp-text="state.screenReaderText" aria-live="polite" aria-atomic="true" class="lightbox-speak screen-reader-text"></div>
 				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
 				<style data-wp-text="state.overlayStyles"></style>
 		</div>
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 8f0eb51719ddb..1fb96a799c9aa 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
-// import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Tracks whether user is touching screen; used to differentiate behavior for
@@ -105,6 +104,9 @@ const { state, actions, callbacks } = store(
 					state.currentImageId === ctx.imageId
 				);
 			},
+			get screenReaderText() {
+				return state.overlayEnabled ? state.currentImage.ariaLabel : '';
+			},
 		},
 		actions: {
 			showLightbox() {
@@ -443,7 +445,7 @@ const { state, actions, callbacks } = store(
 				if ( ! state.overlayEnabled ) {
 					ref.textContent = '';
 				} else {
-					ref.textContent = state.currentImage.screenReaderText;
+					ref.textContent = state.currentImage.ariaLabel;
 				}
 			},
 			setButtonStyles() {