diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
index 9b7a41cab188d..34b4573c1002c 100644
--- a/packages/block-library/src/image/deprecated.js
+++ b/packages/block-library/src/image/deprecated.js
@@ -8,353 +8,535 @@ import classnames from 'classnames';
*/
import { RichText, useBlockProps } from '@wordpress/block-editor';
-const blockAttributes = {
- align: {
- type: 'string',
- },
- url: {
- type: 'string',
- source: 'attribute',
- selector: 'img',
- attribute: 'src',
- },
- alt: {
- type: 'string',
- source: 'attribute',
- selector: 'img',
- attribute: 'alt',
- default: '',
- },
- caption: {
- type: 'string',
- source: 'html',
- selector: 'figcaption',
- },
- title: {
- type: 'string',
- source: 'attribute',
- selector: 'img',
- attribute: 'title',
- },
- href: {
- type: 'string',
- source: 'attribute',
- selector: 'figure > a',
- attribute: 'href',
- },
- rel: {
- type: 'string',
- source: 'attribute',
- selector: 'figure > a',
- attribute: 'rel',
- },
- linkClass: {
- type: 'string',
- source: 'attribute',
- selector: 'figure > a',
- attribute: 'class',
- },
- id: {
- type: 'number',
- },
- width: {
- type: 'number',
- },
- height: {
- type: 'number',
- },
- sizeSlug: {
- type: 'string',
- },
- linkDestination: {
- type: 'string',
+/**
+ * Deprecation for adding the `wp-image-${id}` class to the image block for
+ * responsive images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/4898
+ */
+const v1 = {
+ attributes: {
+ url: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'src',
+ },
+ alt: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'alt',
+ default: '',
+ },
+ caption: {
+ type: 'array',
+ source: 'children',
+ selector: 'figcaption',
+ },
+ href: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'a',
+ attribute: 'href',
+ },
+ id: {
+ type: 'number',
+ },
+ align: {
+ type: 'string',
+ },
+ width: {
+ type: 'number',
+ },
+ height: {
+ type: 'number',
+ },
},
- linkTarget: {
- type: 'string',
- source: 'attribute',
- selector: 'figure > a',
- attribute: 'target',
+ save( { attributes } ) {
+ const { url, alt, caption, align, href, width, height } = attributes;
+ const extraImageProps = width || height ? { width, height } : {};
+ const image = ;
+
+ let figureStyle = {};
+
+ if ( width ) {
+ figureStyle = { width };
+ } else if ( align === 'left' || align === 'right' ) {
+ figureStyle = { maxWidth: '50%' };
+ }
+
+ return (
+
+ );
},
};
-const blockSupports = {
- anchor: true,
- color: {
- __experimentalDuotone: 'img',
- text: false,
- background: false,
- },
- __experimentalBorder: {
- radius: true,
- __experimentalDefaultControls: {
- radius: true,
+/**
+ * Deprecation for adding the `is-resized` class to the image block to fix
+ * captions on resized images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/6496
+ */
+const v2 = {
+ attributes: {
+ url: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'src',
+ },
+ alt: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'alt',
+ default: '',
+ },
+ caption: {
+ type: 'array',
+ source: 'children',
+ selector: 'figcaption',
+ },
+ href: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'a',
+ attribute: 'href',
+ },
+ id: {
+ type: 'number',
+ },
+ align: {
+ type: 'string',
+ },
+ width: {
+ type: 'number',
+ },
+ height: {
+ type: 'number',
},
},
-};
+ save( { attributes } ) {
+ const { url, alt, caption, align, href, width, height, id } =
+ attributes;
-const deprecated = [
- // The following deprecation moves existing border radius styles onto the
- // inner img element where new border block support styles must be applied.
- // It will also add a new `.has-custom-border` class for existing blocks
- // with border radii set. This class is required to improve caption position
- // and styling when an image within a gallery has a custom border or
- // rounded corners.
- //
- // See: https://github.com/WordPress/gutenberg/pull/31366/
- {
- attributes: blockAttributes,
- supports: blockSupports,
- save( { attributes } ) {
- const {
- url,
- alt,
- caption,
- align,
- href,
- rel,
- linkClass,
- width,
- height,
- id,
- linkTarget,
- sizeSlug,
- title,
- } = attributes;
+ const image = (
+
+ );
- const newRel = ! rel ? undefined : rel;
+ return (
+
+ );
+ },
+};
- const classes = classnames( {
- [ `align${ align }` ]: align,
- [ `size-${ sizeSlug }` ]: sizeSlug,
- 'is-resized': width || height,
- } );
+/**
+ * Deprecation for image floats including a wrapping div.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/7721
+ */
+const v3 = {
+ attributes: {
+ url: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'src',
+ },
+ alt: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'alt',
+ default: '',
+ },
+ caption: {
+ type: 'array',
+ source: 'children',
+ selector: 'figcaption',
+ },
+ href: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'href',
+ },
+ id: {
+ type: 'number',
+ },
+ align: {
+ type: 'string',
+ },
+ width: {
+ type: 'number',
+ },
+ height: {
+ type: 'number',
+ },
+ linkDestination: {
+ type: 'string',
+ default: 'none',
+ },
+ },
+ save( { attributes } ) {
+ const { url, alt, caption, align, href, width, height, id } =
+ attributes;
- const image = (
-
- );
+ const classes = classnames( {
+ [ `align${ align }` ]: align,
+ 'is-resized': width || height,
+ } );
- const figure = (
- <>
- { href ? (
-
- { image }
-
- ) : (
- image
- ) }
- { ! RichText.isEmpty( caption ) && (
-
- ) }
- >
- );
+ const image = (
+
+ );
- return (
-
- );
- },
+ return (
+
+ );
},
- {
- attributes: {
- ...blockAttributes,
- title: {
- type: 'string',
- source: 'attribute',
- selector: 'img',
- attribute: 'title',
- },
- sizeSlug: {
- type: 'string',
- },
- },
- supports: blockSupports,
- save( { attributes } ) {
- const {
- url,
- alt,
- caption,
- align,
- href,
- rel,
- linkClass,
- width,
- height,
- id,
- linkTarget,
- sizeSlug,
- title,
- } = attributes;
+};
- const newRel = ! rel ? undefined : rel;
+/**
+ * Deprecation for removing the outer div wrapper around aligned images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/38657
+ */
+const v4 = {
+ attributes: {
+ align: {
+ type: 'string',
+ },
+ url: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'src',
+ },
+ alt: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'alt',
+ default: '',
+ },
+ caption: {
+ type: 'string',
+ source: 'html',
+ selector: 'figcaption',
+ },
+ title: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'title',
+ },
+ href: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'href',
+ },
+ rel: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'rel',
+ },
+ linkClass: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'class',
+ },
+ id: {
+ type: 'number',
+ },
+ width: {
+ type: 'number',
+ },
+ height: {
+ type: 'number',
+ },
+ sizeSlug: {
+ type: 'string',
+ },
+ linkDestination: {
+ type: 'string',
+ },
+ linkTarget: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'target',
+ },
+ },
+ supports: {
+ anchor: true,
+ },
+ save( { attributes } ) {
+ const {
+ url,
+ alt,
+ caption,
+ align,
+ href,
+ rel,
+ linkClass,
+ width,
+ height,
+ id,
+ linkTarget,
+ sizeSlug,
+ title,
+ } = attributes;
- const classes = classnames( {
- [ `align${ align }` ]: align,
- [ `size-${ sizeSlug }` ]: sizeSlug,
- 'is-resized': width || height,
- } );
+ const newRel = ! rel ? undefined : rel;
- const image = (
-
- );
+ const classes = classnames( {
+ [ `align${ align }` ]: align,
+ [ `size-${ sizeSlug }` ]: sizeSlug,
+ 'is-resized': width || height,
+ } );
- const figure = (
- <>
- { href ? (
-
- { image }
-
- ) : (
- image
- ) }
- { ! RichText.isEmpty( caption ) && (
-
- ) }
- >
- );
+ const image = (
+
+ );
- if ( 'left' === align || 'right' === align || 'center' === align ) {
- return (
-
-
-
- );
- }
+ const figure = (
+ <>
+ { href ? (
+
+ { image }
+
+ ) : (
+ image
+ ) }
+ { ! RichText.isEmpty( caption ) && (
+
+ ) }
+ >
+ );
+ if ( 'left' === align || 'right' === align || 'center' === align ) {
return (
-
+
+
+
);
- },
- },
- {
- attributes: blockAttributes,
- save( { attributes } ) {
- const { url, alt, caption, align, href, width, height, id } =
- attributes;
-
- const classes = classnames( {
- [ `align${ align }` ]: align,
- 'is-resized': width || height,
- } );
+ }
- const image = (
-
- );
+ return (
+
+ );
+ },
+};
- return (
-
- );
+/**
+ * Deprecation for moving existing border radius styles onto the inner img
+ * element where new border block support styles must be applied.
+ * It will also add a new `.has-custom-border` class for existing blocks
+ * with border radii set. This class is required to improve caption position
+ * and styling when an image within a gallery has a custom border or
+ * rounded corners.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31366
+ */
+const v5 = {
+ attributes: {
+ align: {
+ type: 'string',
+ },
+ url: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'src',
+ },
+ alt: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'alt',
+ default: '',
+ },
+ caption: {
+ type: 'string',
+ source: 'html',
+ selector: 'figcaption',
+ },
+ title: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'title',
+ },
+ href: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'href',
+ },
+ rel: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'rel',
+ },
+ linkClass: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'class',
+ },
+ id: {
+ type: 'number',
+ },
+ width: {
+ type: 'number',
+ },
+ height: {
+ type: 'number',
+ },
+ sizeSlug: {
+ type: 'string',
+ },
+ linkDestination: {
+ type: 'string',
+ },
+ linkTarget: {
+ type: 'string',
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'target',
},
},
- {
- attributes: blockAttributes,
- save( { attributes } ) {
- const { url, alt, caption, align, href, width, height, id } =
- attributes;
-
- const image = (
-
- );
-
- return (
-
- );
+ supports: {
+ anchor: true,
+ color: {
+ __experimentalDuotone: 'img',
+ text: false,
+ background: false,
+ },
+ __experimentalBorder: {
+ radius: true,
+ __experimentalDefaultControls: {
+ radius: true,
+ },
+ },
+ __experimentalStyle: {
+ spacing: {
+ margin: '0 0 1em 0',
+ },
},
},
- {
- attributes: blockAttributes,
- save( { attributes } ) {
- const { url, alt, caption, align, href, width, height } =
- attributes;
- const extraImageProps = width || height ? { width, height } : {};
- const image = (
-
- );
+ save( { attributes } ) {
+ const {
+ url,
+ alt,
+ caption,
+ align,
+ href,
+ rel,
+ linkClass,
+ width,
+ height,
+ id,
+ linkTarget,
+ sizeSlug,
+ title,
+ } = attributes;
- let figureStyle = {};
+ const newRel = ! rel ? undefined : rel;
- if ( width ) {
- figureStyle = { width };
- } else if ( align === 'left' || align === 'right' ) {
- figureStyle = { maxWidth: '50%' };
- }
+ const classes = classnames( {
+ [ `align${ align }` ]: align,
+ [ `size-${ sizeSlug }` ]: sizeSlug,
+ 'is-resized': width || height,
+ } );
- return (
-
- );
- },
+ const image = (
+
+ );
+
+ const figure = (
+ <>
+ { href ? (
+
+ { image }
+
+ ) : (
+ image
+ ) }
+ { ! RichText.isEmpty( caption ) && (
+
+ ) }
+ >
+ );
+
+ return (
+
+ );
},
-];
+};
-export default deprecated;
+export default [ v5, v4, v3, v2, v1 ];
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.html b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-1.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.json b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json
similarity index 93%
rename from test/integration/fixtures/blocks/core__image__deprecated-1.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json
index e5d1dcba576aa..24be125d856ab 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-1.json
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json
@@ -6,7 +6,7 @@
"align": "left",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
- "caption": ""
+ "caption": []
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-1.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.serialized.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-1.serialized.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.serialized.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.html b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-2.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.json b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json
similarity index 94%
rename from test/integration/fixtures/blocks/core__image__deprecated-3.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json
index bae213510011a..8d1d58f3e6fd3 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-3.json
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json
@@ -6,7 +6,7 @@
"align": "left",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
- "caption": "",
+ "caption": [],
"width": 100,
"height": 100
},
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-2.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.html b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-3.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.json b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-2.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-3.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.html b/test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.json b/test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.serialized.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.serialized.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.serialized.html