Fix Inconsistent Labels for Lightbox Feature (WordPress#68261)

* Image size fix in lightbox * Revert "Image size fix in lightbox" This reverts commit 63f81c1. * Update the enlarge image icon label * Capslock updated * Feedback changes updated * Feedback changes * Feedback Changes * Feedback Changes * Feedback changes Co-authored-by: karthick-murugan <[email protected]> Co-authored-by: afercia <[email protected]>
MaxMood96 · Jan 8, 2025 · d74dfb9 · d74dfb9
1 parent 54f59fe
commit d74dfb9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js
@@ -61,14 +61,14 @@ export default function ImageSettingsPanel( {
 					// "RESET" button ONLY when the user has explicitly set a value in the
 					// Global Styles.
 					hasValue={ () => !! value?.lightbox }
-					label={ __( 'Expand on click' ) }
+					label={ __( 'Enlarge on click' ) }
 					onDeselect={ resetLightbox }
 					isShownByDefault
 					panelId={ panelId }
 				>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Expand on click' ) }
+						label={ __( 'Enlarge on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }
 					/>

diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -265,14 +265,14 @@ const ImageURLInputUI = ( {
 				<div className="block-editor-url-popover__expand-on-click">
 					<Icon icon={ fullscreen } />
 					<div className="text">
-						<p>{ __( 'Expand on click' ) }</p>
+						<p>{ __( 'Enlarge on click' ) }</p>
 						<p className="description">
 							{ __( 'Scales the image with a lightbox effect' ) }
 						</p>
 					</div>
 					<Button
 						icon={ linkOff }
-						label={ __( 'Disable expand on click' ) }
+						label={ __( 'Disable enlarge on click' ) }
 						onClick={ () => {
 							onSetLightbox?.( false );
 						} }
@@ -372,7 +372,7 @@ const ImageURLInputUI = ( {
 											stopEditLink();
 										} }
 									>
-										{ __( 'Expand on click' ) }
+										{ __( 'Enlarge on click' ) }
 									</MenuItem>
 								) }
 							</NavigableMenu>

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -80,7 +80,7 @@ const LINK_OPTIONS = [
 	},
 	{
 		icon: fullscreen,
-		label: __( 'Expand on click' ),
+		label: __( 'Enlarge on click' ),
 		value: LINK_DESTINATION_LIGHTBOX,
 		noticeText: __( 'Lightbox effect' ),
 		infoText: __( 'Scale images with a lightbox effect' ),

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -149,18 +149,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		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' );
-
-	if ( $alt ) {
-		/* translators: %s: Image alt text. */
-		$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt );
-	}
+	$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' );
+	$dialog_aria_label = __( 'Enlarged image' );
 
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
@@ -190,7 +186,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 					'targetWidth'      => $img_width,
 					'targetHeight'     => $img_height,
 					'scaleAttr'        => $block['attrs']['scale'] ?? false,
-					'ariaLabel'        => $aria_label,
+					'ariaLabel'        => $dialog_aria_label,
 					'alt'              => $alt,
 				),
 			),

diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
@@ -859,17 +859,17 @@ test.describe( 'Image', () => {
 			} )
 		).toBeFocused();
 
-		// Select "Expand on click", then remove it.
+		// Select "Enlarge on click", then remove it.
 		await pageUtils.pressKeys( 'Tab' );
 		await page.keyboard.press( 'Enter' );
 		await pageUtils.pressKeys( 'Tab', { times: 5 } );
 		await expect(
-			page.getByRole( 'menuitem', { name: 'Expand on click' } )
+			page.getByRole( 'menuitem', { name: 'Enlarge on click' } )
 		).toBeFocused();
 		await page.keyboard.press( 'Enter' );
 		await expect(
 			page.getByRole( 'button', {
-				name: 'Disable expand on click',
+				name: 'Disable enlarge on click',
 			} )
 		).toBeFocused();
 		await page.keyboard.press( 'Enter' );
@@ -933,7 +933,7 @@ test.describe( 'Image - lightbox', () => {
 
 				await expect(
 					page.getByRole( 'menuitem', {
-						name: 'Expand on click',
+						name: 'Enlarge on click',
 					} )
 				).toBeHidden();
 			} );
@@ -958,13 +958,13 @@ test.describe( 'Image - lightbox', () => {
 
 				await page
 					.getByRole( 'button', {
-						name: 'Disable expand on click',
+						name: 'Disable enlarge on click',
 					} )
 					.click();
 
 				await expect(
 					page.getByRole( 'menuitem', {
-						name: 'Expand on click',
+						name: 'Enlarge on click',
 					} )
 				).toBeHidden();
 			} );