update label to audio,video,image blocks

WordPress · Oct 21, 2022 · 146d1cd · 146d1cd
1 parent bbe9524
commit 146d1cd
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 14 deletions.
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -186,7 +186,11 @@ function AudioEdit( {
 					} }
 					icon={ captionIcon }
 					isPressed={ showCaption }
-					label={ __( 'Caption' ) }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
 				/>
 			</BlockControls>
 			<BlockControls group="other">

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -32,7 +32,13 @@ import {
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
-import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
+import {
+	useEffect,
+	useMemo,
+	useState,
+	useRef,
+	useCallback,
+} from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import {
@@ -93,7 +99,6 @@ export default function Image( {
 		sizeSlug,
 	} = attributes;
 	const imageRef = useRef();
-	const captionRef = useRef();
 	const prevCaption = usePrevious( caption );
 	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const { allowResize = true } = context;
@@ -195,11 +200,14 @@ export default function Image( {
 	}, [ caption, prevCaption ] );
 
 	// Focus the caption when we click to add one.
-	useEffect( () => {
-		if ( showCaption && ! caption ) {
-			captionRef.current?.focus();
-		}
-	}, [ caption, showCaption ] );
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -343,7 +351,11 @@ export default function Image( {
 						} }
 						icon={ captionIcon }
 						isPressed={ showCaption }
-						label={ __( 'Caption' ) }
+						label={
+							showCaption
+								? __( 'Remove caption' )
+								: __( 'Add caption' )
+						}
 					/>
 				) }
 				{ ! multiImageSelection && ! isEditingImage && (

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -224,7 +224,11 @@ function VideoEdit( {
 					} }
 					icon={ captionIcon }
 					isPressed={ showCaption }
-					label={ __( 'Caption' ) }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
 				/>
 				<TracksEditor
 					tracks={ tracks }

diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js
@@ -111,7 +111,7 @@ describe( 'Gallery', () => {
 
 		const imageListLink = ( await getListViewBlocks( 'Image' ) )[ 0 ];
 		await imageListLink.click();
-		await clickBlockToolbarButton( 'Caption' );
+		await clickBlockToolbarButton( 'Add caption' );
 		const captionElement = await figureElement.$(
 			'.block-editor-rich-text__editable'
 		);

diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
@@ -157,7 +157,7 @@ test.describe( 'Image', () => {
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
-		await editor.clickBlockToolbarButton( 'Caption' );
+		await editor.clickBlockToolbarButton( 'Add caption' );
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Backspace' );
@@ -186,7 +186,7 @@ test.describe( 'Image', () => {
 
 		await expect( image ).toBeVisible();
 		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
-		await editor.clickBlockToolbarButton( 'Caption' );
+		await editor.clickBlockToolbarButton( 'Add caption' );
 		await page.keyboard.type( '12' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.press( 'Enter' );
@@ -217,7 +217,7 @@ test.describe( 'Image', () => {
 		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
 		// Add caption and navigate to inline toolbar.
-		await editor.clickBlockToolbarButton( 'Caption' );
+		await editor.clickBlockToolbarButton( 'Add caption' );
 		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
 		await expect(
 			await page.evaluate( () =>