Add image alt

WordPress · Jun 11, 2020 · c420dc5 · c420dc5
1 parent 9bc36b6
commit c420dc5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -436,12 +436,28 @@ export function ImageEdit( {
 		);
 	}
 
+	const filename = getFilename( url );
+	let defaultedAlt;
+
+	if ( alt ) {
+		defaultedAlt = alt;
+	} else if ( filename ) {
+		defaultedAlt = sprintf(
+			/* translators: %s: file name */
+			__( 'This image has an empty alt attribute; its file name is %s' ),
+			filename
+		);
+	} else {
+		defaultedAlt = __( 'This image has an empty alt attribute' );
+	}
+
 	if ( isEditingImage ) {
 		return (
 			<Block.figure ref={ ref } className={ classes }>
 				<ImageEditor
 					id={ id }
 					url={ url }
+					alt={ defaultedAlt }
 					setAttributes={ setAttributes }
 					setIsEditingImage={ setIsEditingImage }
 				/>
@@ -515,21 +531,6 @@ export function ImageEdit( {
 		</>
 	);
 
-	const filename = getFilename( url );
-	let defaultedAlt;
-
-	if ( alt ) {
-		defaultedAlt = alt;
-	} else if ( filename ) {
-		defaultedAlt = sprintf(
-			/* translators: %s: file name */
-			__( 'This image has an empty alt attribute; its file name is %s' ),
-			filename
-		);
-	} else {
-		defaultedAlt = __( 'This image has an empty alt attribute' );
-	}
-
 	let img = (
 		// Disable reason: Image itself is not meant to be interactive, but
 		// should direct focus to block.

diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
@@ -160,6 +160,7 @@ function AspectMenu( { isDisabled, onClick, toggleProps } ) {
 export default function ImageEditor( {
 	id,
 	url,
+	alt,
 	setAttributes,
 	setIsEditingImage,
 } ) {
@@ -263,7 +264,7 @@ export default function ImageEditor( {
 						/>
 					</div>
 				) : (
-					<img alt="" src={ url } />
+					<img alt={ alt } src={ url } />
 				) }
 			</div>
 			<BlockControls>