diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 963365ecb67501..a5b9c2fddc4c2d 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -445,7 +445,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
- **Name:** core/image
- **Category:** media
- **Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity, shadow, spacing (margin)
-- **Attributes:** alt, aspectRatio, blob, caption, focalPoint, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
+- **Attributes:** alt, aspectRatio, blob, caption, focalPoint, height, href, id, isDecorative, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
## Latest Comments
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 66a4fac4a30236..31c4873fe3b7a9 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -105,6 +105,10 @@
"source": "attribute",
"selector": "figure > a",
"attribute": "target"
+ },
+ "isDecorative": {
+ "type": "boolean",
+ "default": false
}
},
"supports": {
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 0bec32c7ae4d96..15a2ede59f9686 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -9,6 +9,7 @@ import {
Spinner,
TextareaControl,
TextControl,
+ CheckboxControl,
ToolbarButton,
ToolbarGroup,
__experimentalToolsPanel as ToolsPanel,
@@ -297,6 +298,7 @@ export default function Image( {
sizeSlug,
lightbox,
metadata,
+ isDecorative,
} = attributes;
const [ imageElement, setImageElement ] = useState();
const [ resizeDelta, setResizeDelta ] = useState( null );
@@ -525,6 +527,7 @@ export default function Image( {
if ( enable && ! lightboxSetting?.enabled ) {
setAttributes( {
lightbox: { enabled: true },
+ isDecorative: false,
} );
} else if ( ! enable && lightboxSetting?.enabled ) {
setAttributes( {
@@ -563,6 +566,20 @@ export default function Image( {
setAttributes( { alt: newAlt } );
}
+ function updateIsDecorative( value ) {
+ setAttributes( {
+ isDecorative: value || undefined,
+ ...( value && {
+ alt: '',
+ caption: undefined,
+ href: undefined,
+ linkDestination: undefined,
+ linkTarget: undefined,
+ rel: undefined,
+ } ),
+ } );
+ }
+
const imperativeFocalPointPreview = ( value ) => {
if ( imageElement ) {
imageElement.style.setProperty(
@@ -806,7 +823,8 @@ export default function Image( {
isSingleSelected &&
! isEditingImage &&
! lockHrefControls &&
- ! lockUrlControls;
+ ! lockUrlControls &&
+ ! isDecorative;
const showCoverControls =
isSingleSelected && canInsertCover && ! isContentOnlyMode;
@@ -914,7 +932,10 @@ export default function Image( {
onSelectImage( undefined ) }
+ resetAll={ () => {
+ onSelectImage( undefined );
+ setAttributes( { isDecorative: false } );
+ } }
dropdownMenuProps={ dropdownMenuProps }
>
{ ! lockUrlControls && (
@@ -944,24 +965,24 @@ export default function Image( {
/>
) }
- !! alt }
- onDeselect={ () =>
- setAttributes( { alt: undefined } )
- }
- >
- { lockAltControlsMessage }
- ) : (
- <>
+ isShownByDefault
+ hasValue={ () => !! alt }
+ onDeselect={ () =>
+ setAttributes( { alt: undefined } )
+ }
+ >
+ { lockAltControlsMessage }
+ ) : (
-
- { __(
- 'Leave empty if decorative.'
- ) }
-
- )
+ )
+ }
+ />
+
+ ) }
+
+ { ! lockAltControls && ! lightboxChecked && (
+ !! isDecorative }
+ onDeselect={ () =>
+ setAttributes( { isDecorative: false } )
}
- />
-
+ >
+
+
+ ) }
) }
@@ -1072,7 +1110,17 @@ export default function Image( {
const filename = getFilename( url );
let defaultedAlt;
- if ( alt ) {
+ if ( isDecorative ) {
+ defaultedAlt = filename
+ ? sprintf(
+ /* translators: %s: file name */
+ __(
+ 'This image has been marked as decorative; its file name is %s'
+ ),
+ filename
+ )
+ : __( 'This image has been marked as decorative.' );
+ } else if ( alt ) {
defaultedAlt = alt;
} else if ( filename ) {
defaultedAlt = sprintf(
@@ -1327,18 +1375,20 @@ export default function Image( {
{ img }
{ resizableBox }
-
+ { ! isDecorative && (
+
+ ) }
);
}
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index 9996099d0791c2..38bb1f5d917807 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -108,21 +108,40 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
rel: value.rel,
linkTarget: value.linkTarget,
} ),
+ isVisible: ( item ) => ! item.isDecorative,
},
{
id: 'caption',
label: __( 'Caption' ),
type: 'text',
Edit: 'rich-text', // TODO: replace with custom component
+ isVisible: ( item ) => ! item.isDecorative,
},
{
id: 'alt',
label: __( 'Alt text' ),
type: 'text',
+ isVisible: ( item ) => ! item.isDecorative,
+ },
+ {
+ id: 'isDecorative',
+ label: __( 'Mark as decorative' ),
+ type: 'boolean',
+ setValue: ( { value } ) => ( {
+ isDecorative: value || undefined,
+ ...( value && {
+ alt: '',
+ caption: undefined,
+ href: undefined,
+ linkDestination: undefined,
+ linkTarget: undefined,
+ rel: undefined,
+ } ),
+ } ),
},
];
settings[ formKey ] = {
- fields: [ 'image', 'link', 'caption', 'alt' ],
+ fields: [ 'image', 'link', 'caption', 'alt', 'isDecorative' ],
};
}
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index c6cfef070238f6..c2f51b72cda810 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -37,6 +37,7 @@ export default function save( { attributes } ) {
linkTarget,
sizeSlug,
title,
+ isDecorative,
metadata: { bindings = {} } = {},
} = attributes;
@@ -78,6 +79,7 @@ export default function save( { attributes } ) {
height,
} }
title={ title }
+ role={ isDecorative ? 'none' : undefined }
/>
);
diff --git a/test/integration/fixtures/blocks/core__gallery-with-caption.json b/test/integration/fixtures/blocks/core__gallery-with-caption.json
index 01fff6f9b68185..3a3722e48b38df 100644
--- a/test/integration/fixtures/blocks/core__gallery-with-caption.json
+++ b/test/integration/fixtures/blocks/core__gallery-with-caption.json
@@ -27,7 +27,8 @@
"caption": "",
"id": 1421,
"sizeSlug": "large",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -40,7 +41,8 @@
"caption": "",
"id": 1440,
"sizeSlug": "large",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery.json b/test/integration/fixtures/blocks/core__gallery.json
index 95b7d700b5a941..26ed006028f203 100644
--- a/test/integration/fixtures/blocks/core__gallery.json
+++ b/test/integration/fixtures/blocks/core__gallery.json
@@ -27,7 +27,8 @@
"caption": "",
"id": 1421,
"sizeSlug": "large",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -40,7 +41,8 @@
"caption": "",
"id": 1440,
"sizeSlug": "large",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery__columns.json b/test/integration/fixtures/blocks/core__gallery__columns.json
index fe6efbc972ae3b..c0fb508fa304ad 100644
--- a/test/integration/fixtures/blocks/core__gallery__columns.json
+++ b/test/integration/fixtures/blocks/core__gallery__columns.json
@@ -27,7 +27,8 @@
"caption": "",
"id": 1421,
"sizeSlug": "large",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -40,7 +41,8 @@
"caption": "",
"id": 1440,
"sizeSlug": "large",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-1.json b/test/integration/fixtures/blocks/core__gallery__deprecated-1.json
index bd6108a97230a3..93509c14c511ae 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-1.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-1.json
@@ -17,7 +17,8 @@
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "title",
"caption": "",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -28,7 +29,8 @@
"url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
"alt": "title",
"caption": "",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-2.json b/test/integration/fixtures/blocks/core__gallery__deprecated-2.json
index a60776801eb337..9cedcae9bc57ca 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-2.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-2.json
@@ -18,7 +18,8 @@
"alt": "title",
"caption": "",
"id": 1,
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -30,7 +31,8 @@
"alt": "title",
"caption": "",
"id": 2,
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-3.json b/test/integration/fixtures/blocks/core__gallery__deprecated-3.json
index 9ac2c197819ce5..a5739de3f1bd83 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-3.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-3.json
@@ -16,7 +16,8 @@
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "title",
"caption": "",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -27,7 +28,8 @@
"url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
"alt": "title",
"caption": "",
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-4.json b/test/integration/fixtures/blocks/core__gallery__deprecated-4.json
index dad150cc96b48b..19f05861fe2724 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-4.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-4.json
@@ -18,7 +18,8 @@
"alt": "",
"caption": "",
"id": 1421,
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -30,7 +31,8 @@
"alt": "",
"caption": "",
"id": 1440,
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -42,7 +44,8 @@
"alt": "",
"caption": "",
"id": 1362,
- "linkDestination": "none"
+ "linkDestination": "none",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-5.json b/test/integration/fixtures/blocks/core__gallery__deprecated-5.json
index 9ef1f03ba09349..020807e4d55445 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-5.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-5.json
@@ -20,7 +20,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
"id": 705,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -34,7 +35,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
"id": 704,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -48,7 +50,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
"id": 703,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-6.json b/test/integration/fixtures/blocks/core__gallery__deprecated-6.json
index 9ef1f03ba09349..020807e4d55445 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-6.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-6.json
@@ -20,7 +20,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
"id": 705,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -34,7 +35,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
"id": 704,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -48,7 +50,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
"id": 703,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
index a7a69865f4bb34..a270ef59fb7ea6 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
@@ -27,7 +27,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
"id": 705,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -41,7 +42,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
"id": 704,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -55,7 +57,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
"id": 703,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
}
@@ -86,7 +89,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
"id": 705,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -100,7 +104,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
"id": 704,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
},
@@ -114,7 +119,8 @@
"href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
"id": 703,
"sizeSlug": "large",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__image.json b/test/integration/fixtures/blocks/core__image.json
index 3da5557bb05cad..ad59b6092a8068 100644
--- a/test/integration/fixtures/blocks/core__image.json
+++ b/test/integration/fixtures/blocks/core__image.json
@@ -5,7 +5,8 @@
"attributes": {
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
- "caption": ""
+ "caption": "",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__image__attachment-link.json b/test/integration/fixtures/blocks/core__image__attachment-link.json
index 055e4a61d2f383..da1e619c78dee0 100644
--- a/test/integration/fixtures/blocks/core__image__attachment-link.json
+++ b/test/integration/fixtures/blocks/core__image__attachment-link.json
@@ -7,7 +7,8 @@
"alt": "",
"caption": "",
"href": "http://localhost:8888/?attachment_id=7",
- "linkDestination": "attachment"
+ "linkDestination": "attachment",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__image__caption-block-bindings.json b/test/integration/fixtures/blocks/core__image__caption-block-bindings.json
index a4de3566cc831b..dd61a7f0fe0beb 100644
--- a/test/integration/fixtures/blocks/core__image__caption-block-bindings.json
+++ b/test/integration/fixtures/blocks/core__image__caption-block-bindings.json
@@ -6,6 +6,7 @@
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
"caption": "",
+ "isDecorative": false,
"metadata": {
"bindings": {
"caption": {
diff --git a/test/integration/fixtures/blocks/core__image__center-caption.json b/test/integration/fixtures/blocks/core__image__center-caption.json
index 034047c07089b9..b79818c2c8fc57 100644
--- a/test/integration/fixtures/blocks/core__image__center-caption.json
+++ b/test/integration/fixtures/blocks/core__image__center-caption.json
@@ -6,6 +6,7 @@
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
"caption": "Give it a try. Press the \"really wide\" button on the image toolbar.",
+ "isDecorative": false,
"align": "center"
},
"innerBlocks": []
diff --git a/test/integration/fixtures/blocks/core__image__custom-link-class.json b/test/integration/fixtures/blocks/core__image__custom-link-class.json
index 2b5a36e78bdb8b..e26a936c672032 100644
--- a/test/integration/fixtures/blocks/core__image__custom-link-class.json
+++ b/test/integration/fixtures/blocks/core__image__custom-link-class.json
@@ -8,7 +8,8 @@
"caption": "",
"href": "https://wordpress.org/",
"linkClass": "custom-link",
- "linkDestination": "custom"
+ "linkDestination": "custom",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__image__custom-link-rel.json b/test/integration/fixtures/blocks/core__image__custom-link-rel.json
index dc3a04a932c415..a05722117d3c25 100644
--- a/test/integration/fixtures/blocks/core__image__custom-link-rel.json
+++ b/test/integration/fixtures/blocks/core__image__custom-link-rel.json
@@ -8,7 +8,8 @@
"caption": "",
"href": "https://wordpress.org/",
"rel": "external",
- "linkDestination": "custom"
+ "linkDestination": "custom",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__image__custom-link.json b/test/integration/fixtures/blocks/core__image__custom-link.json
index 54cfa81f72b148..d21b1d38ded8e3 100644
--- a/test/integration/fixtures/blocks/core__image__custom-link.json
+++ b/test/integration/fixtures/blocks/core__image__custom-link.json
@@ -7,7 +7,8 @@
"alt": "",
"caption": "",
"href": "https://wordpress.org/",
- "linkDestination": "custom"
+ "linkDestination": "custom",
+ "isDecorative": false
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__image__media-link.json b/test/integration/fixtures/blocks/core__image__media-link.json
index 0d411f713203de..09856e9ac8df6d 100644
--- a/test/integration/fixtures/blocks/core__image__media-link.json
+++ b/test/integration/fixtures/blocks/core__image__media-link.json
@@ -7,7 +7,8 @@
"alt": "",
"caption": "",
"href": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
- "linkDestination": "media"
+ "linkDestination": "media",
+ "isDecorative": false
},
"innerBlocks": []
}