Add new alt attribute to the Featured Product media settings (#6308)

* Add new `alt` attribute to Media Settings

Allow to define an alt text for the Feature Product block

* Simplify on change

* Improve alt description and use name instead of short description

Short description can contain html and images, so it's not adequate to use on the alt attribute

assets/js/blocks/featured-product/block.js

@@ -19,12 +19,14 @@ import {
 import { withSelect } from '@wordpress/data';
 import {
 	Button,
+	ExternalLink,
 	FocalPointPicker,
 	PanelBody,
 	Placeholder,
 	RangeControl,
 	ResizableBox,
 	Spinner,
+	TextareaControl,
 	ToggleControl,
 	ToolbarGroup,
 	withSpokenMessages,
@@ -339,6 +341,30 @@ const FeaturedProduct = ( {
 											} )
 										}
 									/>
+									<TextareaControl
+										label={ __(
+											'Alt text (alternative text)',
+											'woo-gutenberg-products-block'
+										) }
+										value={ attributes.alt }
+										onChange={ ( alt ) => {
+											setAttributes( { alt } );
+										} }
+										help={
+											<>
+												<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+													{ __(
+														'Describe the purpose of the image',
+														'woo-gutenberg-products-block'
+													) }
+												</ExternalLink>
+												{ __(
+													'Leaving it empty will use the product name.',
+													'woo-gutenberg-products-block'
+												) }
+											</>
+										}
+									/>
 								</PanelBody>
 							) }
 							<PanelColorGradientSettings

assets/js/blocks/featured-product/example.js

@@ -6,6 +6,7 @@ import { previewProducts } from '@woocommerce/resource-previews';
 
 export const example = {
 	attributes: {
+		alt: '',
 		contentAlign: 'center',
 		dimRatio: 50,
 		editMode: false,

assets/js/blocks/featured-product/index.js

@@ -66,6 +66,10 @@ registerBlockType( 'woocommerce/featured-product', {
 	},
 	example,
 	attributes: {
+		alt: {
+			type: 'string',
+			default: '',
+		},
 		/**
 		 * Alignment of content inside block.
 		 */

src/BlockTypes/FeaturedProduct.php

@@ -147,7 +147,7 @@ private function render_image( $attributes, $product ) {
 		if ( ! empty( $image ) ) {
 			return sprintf(
 				'<img alt="%1$s" class="wc-block-featured-product__background-image" src="%2$s" style="%3$s" />',
-				wp_kses_post( $product->get_short_description() ),
+				wp_kses_post( $attributes['alt'] ?? $product->get_name() ),
 				esc_url( $image ),
 				$style
 			);