From d2d3215b0ea800ae20ac1ff9f9e2cb135b393197 Mon Sep 17 00:00:00 2001
From: Alquen Antonio Sarmiento <sarmientoalquen@gmail.com>
Date: Tue, 3 Dec 2024 10:45:00 +0800
Subject: [PATCH 1/2] fix(image): only overwrite current alt if new alt is not
 empty

---
 src/block-components/image/edit.js      | 2 +-
 src/block-components/image/use-image.js | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/block-components/image/edit.js b/src/block-components/image/edit.js
index 4597bc4ab..89a2201cd 100644
--- a/src/block-components/image/edit.js
+++ b/src/block-components/image/edit.js
@@ -137,7 +137,7 @@ const Controls = props => {
 							imageWidthAttribute: width,
 							imageHeightAttribute: height,
 							imageExternalUrl: '',
-							...( attributes.imageAlt ? {} : { imageAlt: image.alt || '' } ), // Only set the alt if it's empty.
+							...( image.alt ? { imageAlt: image.alt || '' } : {} ), // Only overwrite current alt if new alt is not empty.
 						} )
 					} }
 				/>
diff --git a/src/block-components/image/use-image.js b/src/block-components/image/use-image.js
index 9a20cabc1..cca376477 100644
--- a/src/block-components/image/use-image.js
+++ b/src/block-components/image/use-image.js
@@ -1,13 +1,10 @@
 /**
  * WordPress Dependencies
  */
-import { useBlockAttributesContext, useBlockSetAttributesContext } from '~stackable/hooks'
+import { useBlockSetAttributesContext } from '~stackable/hooks'
 
 export const useImage = () => {
 	const setAttributes = useBlockSetAttributesContext()
-	const attributes = useBlockAttributesContext( attributes => ( {
-		imageAlt: attributes.imageAlt,
-	} ) )
 
 	const onChange = image => {
 		setAttributes( {
@@ -16,7 +13,7 @@ export const useImage = () => {
 			imageHeightAttribute: image.height,
 			imageWidthAttribute: image.width,
 			imageExternalUrl: '',
-			...( attributes.imageAlt ? {} : { imageAlt: image.alt || '' } ), // Only add the image alt if it's empty.
+			...( image.alt ? { imageAlt: image.alt || '' } : {} ), // Only overwrite current alt if new alt is not empty.
 		} )
 	}
 

From a67e1f565e5be277019c526648ef880acceb775f Mon Sep 17 00:00:00 2001
From: Alquen Antonio Sarmiento <sarmientoalquen@gmail.com>
Date: Tue, 3 Dec 2024 10:48:47 +0800
Subject: [PATCH 2/2] feat(image): allow explicit empty string of alt attribute
 for accessibility

---
 src/block-components/image/image.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/block-components/image/image.js b/src/block-components/image/image.js
index ac14edb80..c03692980 100644
--- a/src/block-components/image/image.js
+++ b/src/block-components/image/image.js
@@ -269,7 +269,7 @@ const Image = memo( props => {
 					onError={ () => setHasImageError( true ) }
 					className={ imageClasses }
 					src={ src || undefined }
-					alt={ striptags( props.alt || undefined ) }
+					alt={ striptags( props.alt || '' ) }
 					title={ striptags( props.title || undefined ) }
 					width={ props.width || undefined }
 					height={ props.height || undefined }
@@ -438,10 +438,10 @@ const ImageContent = props => {
 		: undefined
 
 	const propsToPass = {}
-	const alt = striptags( props.alt || undefined )
-	if ( alt ) {
-		propsToPass.alt = alt
-	}
+
+	// Allow explicit empty string for accessibility
+	propsToPass.alt = striptags( props.alt || '' )
+
 	const title = striptags( props.title || undefined )
 	if ( title ) {
 		propsToPass.title = title