fix (image block): allow empty alt tag (#3404)

Co-authored-by: [email protected] <>

Author: bfintal

src/block-components/image/attributes.js

@@ -29,6 +29,10 @@ export const addAttributes = ( attrObject, options = {} ) => {
 				attribute: 'alt',
 				default: '',
 			},
+			imageShowEmptyAlt: {
+				type: 'boolean',
+				default: false,
+			},
 			imageAspectRatio: {
 				stkResponsive: true,
 				type: 'string',

src/block-components/image/edit.js

@@ -368,6 +368,13 @@ const Controls = props => {
 				/>
 			) }
 
+			{ props.hasAlt && ! attributes.imageAlt && (
+				<AdvancedToggleControl
+					label={ __( 'Show Empty Alt Attribute', i18n ) }
+					attribute="imageShowEmptyAlt"
+				/>
+			) }
+
 			<AdvancedRangeControl
 				label={ __( 'Zoom', i18n ) }
 				attribute="imageZoom"

src/block-components/image/image.js

@@ -471,6 +471,8 @@ const ImageContent = props => {
 	const alt = striptags( props.alt || undefined )
 	if ( alt ) {
 		propsToPass.alt = alt
+	} else if ( props.showEmptyAlt ) {
+		propsToPass.alt = ''
 	}
 	const title = striptags( props.title || undefined )
 	if ( title ) {

src/block-components/image/index.js

@@ -152,6 +152,7 @@ Image.Content = props => {
 		imageId={ attributes.imageId }
 		imageURL={ attributes.imageUrl }
 		alt={ alt || attributes.imageAlt }
+		showEmptyAlt={ attributes.imageShowEmptyAlt }
 		size={ attributes.imageSize }
 		src={ src || attributes.imageUrl || attributes.imageExternalUrl }