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 ( +
+ { href ? { image } : image } + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); }, }; -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 ( +
+ { href ? { image } : image } + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); + }, +}; - 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 ( -
- { figure } -
- ); - }, + return ( +
+ { href ? { image } : image } + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); }, - { - 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 ( -
-
{ figure }
-
- ); - } + const figure = ( + <> + { href ? ( + + { image } + + ) : ( + image + ) } + { ! RichText.isEmpty( caption ) && ( + + ) } + + ); + if ( 'left' === align || 'right' === align || 'center' === align ) { return ( -
- { figure } -
+
+
{ figure }
+
); - }, - }, - { - 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 ( +
+ { figure } +
+ ); + }, +}; - return ( -
- { href ? { image } : image } - { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); +/** + * 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 ( -
- { href ? { image } : image } - { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); + 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 ( -
- { href ? { image } : image } - { ! RichText.isEmpty( caption ) && ( - - ) } -
- ); - }, + const image = ( + { + ); + + const figure = ( + <> + { href ? ( + + { image } + + ) : ( + image + ) } + { ! RichText.isEmpty( caption ) && ( + + ) } + + ); + + return ( +
+ { figure } +
+ ); }, -]; +}; -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