diff --git a/src/block-components/image/attributes.js b/src/block-components/image/attributes.js index 8b0754e1ad..da756b491a 100644 --- a/src/block-components/image/attributes.js +++ b/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', diff --git a/src/block-components/image/edit.js b/src/block-components/image/edit.js index 4597bc4abd..314a998785 100644 --- a/src/block-components/image/edit.js +++ b/src/block-components/image/edit.js @@ -244,6 +244,13 @@ const Controls = props => { /> ) } + { props.hasAlt && ! attributes.imageAlt && ( + + ) } + { 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 ) { diff --git a/src/block-components/image/index.js b/src/block-components/image/index.js index 6c975409c5..2eb4f1f479 100644 --- a/src/block-components/image/index.js +++ b/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 }