From 209f9134fa420a9aea76439a57a03b02a9a493bf Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 20 Oct 2022 17:41:41 +0100 Subject: [PATCH 1/4] Gallery: Add a deprecation for captions in the gallery block --- .../block-library/src/gallery/deprecated.js | 170 +++++++++++++++++- 1 file changed, 169 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index a2843ecf6e3b42..09fc45eb73613a 100644 --- a/packages/block-library/src/gallery/deprecated.js +++ b/packages/block-library/src/gallery/deprecated.js @@ -127,6 +127,174 @@ export function getImageBlock( image, sizeSlug, linkTo ) { } ); } +const v7 = { + attributes: { + images: { + type: 'array', + default: [], + source: 'query', + selector: '.blocks-gallery-item', + query: { + url: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'src', + }, + fullUrl: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'data-full-url', + }, + link: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'data-link', + }, + alt: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'alt', + default: '', + }, + id: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'data-id', + }, + caption: { + type: 'string', + source: 'html', + selector: '.blocks-gallery-item__caption', + }, + }, + }, + ids: { + type: 'array', + items: { + type: 'number', + }, + default: [], + }, + shortCodeTransforms: { + type: 'array', + default: [], + items: { + type: 'object', + }, + }, + columns: { + type: 'number', + minimum: 1, + maximum: 8, + }, + caption: { + type: 'string', + source: 'html', + selector: '.blocks-gallery-caption', + }, + imageCrop: { + type: 'boolean', + default: true, + }, + fixedHeight: { + type: 'boolean', + default: true, + }, + linkTarget: { + type: 'string', + }, + linkTo: { + type: 'string', + }, + sizeSlug: { + type: 'string', + default: 'large', + }, + allowResize: { + type: 'boolean', + default: false, + }, + }, + save( { attributes } ) { + const { + images, + columns = defaultColumnsNumberV1( attributes ), + imageCrop, + caption, + linkTo, + } = attributes; + const className = `columns-${ columns } ${ + imageCrop ? 'is-cropped' : '' + }`; + + return ( +
+ + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); + }, +}; + const v6 = { attributes: { images: { @@ -984,4 +1152,4 @@ const v1 = { }, }; -export default [ v6, v5, v4, v3, v2, v1 ]; +export default [ v7, v6, v5, v4, v3, v2, v1 ]; From 7433d4c2261646ae17ac623c36ee46656b4abcbc Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 21 Oct 2022 10:09:57 +1300 Subject: [PATCH 2/4] Update the save function to match the one prior to the element change --- .../block-library/src/gallery/deprecated.js | 77 ++++--------------- 1 file changed, 16 insertions(+), 61 deletions(-) diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index 09fc45eb73613a..d8d4e0588fc0f6 100644 --- a/packages/block-library/src/gallery/deprecated.js +++ b/packages/block-library/src/gallery/deprecated.js @@ -7,7 +7,11 @@ import { map, some } from 'lodash'; /** * WordPress dependencies */ -import { RichText, useBlockProps } from '@wordpress/block-editor'; +import { + RichText, + useBlockProps, + useInnerBlocksProps, +} from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; @@ -221,68 +225,19 @@ const v7 = { }, }, save( { attributes } ) { - const { - images, - columns = defaultColumnsNumberV1( attributes ), - imageCrop, - caption, - linkTo, - } = attributes; - const className = `columns-${ columns } ${ - imageCrop ? 'is-cropped' : '' - }`; + const { caption, columns, imageCrop } = attributes; - return ( -
-
    - { images.map( ( image ) => { - let href; - - switch ( linkTo ) { - case LINK_DESTINATION_MEDIA: - href = image.fullUrl || image.url; - break; - case LINK_DESTINATION_ATTACHMENT: - href = image.link; - break; - } - - const img = ( - { - ); + const className = classnames( 'has-nested-images', { + [ `columns-${ columns }` ]: columns !== undefined, + [ `columns-default` ]: columns === undefined, + 'is-cropped': imageCrop, + } ); + const blockProps = useBlockProps.save( { className } ); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); - return ( -
  • -
    - { href ? ( - { img } - ) : ( - img - ) } - { ! RichText.isEmpty( image.caption ) && ( - - ) } -
    -
  • - ); - } ) } -
+ return ( +
+ { innerBlocksProps.children } { ! RichText.isEmpty( caption ) && ( Date: Fri, 21 Oct 2022 10:34:29 +1300 Subject: [PATCH 3/4] Add fixtures for the new deprecation --- .../blocks/core__gallery__deprecated-7.html | 31 +++++ .../blocks/core__gallery__deprecated-7.json | 120 +++++++++++++++++ .../core__gallery__deprecated-7.parsed.json | 123 ++++++++++++++++++ ...ore__gallery__deprecated-7.serialized.html | 27 ++++ 4 files changed, 301 insertions(+) create mode 100644 test/integration/fixtures/blocks/core__gallery__deprecated-7.html create mode 100644 test/integration/fixtures/blocks/core__gallery__deprecated-7.json create mode 100644 test/integration/fixtures/blocks/core__gallery__deprecated-7.parsed.json create mode 100644 test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.html b/test/integration/fixtures/blocks/core__gallery__deprecated-7.html new file mode 100644 index 00000000000000..61b70f3385fe8c --- /dev/null +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.html @@ -0,0 +1,31 @@ + + + + + + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json new file mode 100644 index 00000000000000..4eaf85b46906d6 --- /dev/null +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json @@ -0,0 +1,120 @@ +[ + { + "name": "core/gallery", + "isValid": true, + "attributes": { + "images": [], + "ids": [], + "shortCodeTransforms": [], + "caption": "", + "imageCrop": true, + "fixedHeight": true, + "linkTo": "media", + "sizeSlug": "large", + "allowResize": false + }, + "innerBlocks": [ + { + "name": "core/image", + "isValid": true, + "attributes": { + "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", + "alt": "", + "caption": "", + "href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", + "id": 705, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [] + }, + { + "name": "core/image", + "isValid": true, + "attributes": { + "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", + "alt": "", + "caption": "", + "href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", + "id": 704, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [] + }, + { + "name": "core/image", + "isValid": true, + "attributes": { + "url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", + "alt": "", + "caption": "", + "href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", + "id": 703, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [] + } + ] + }, + { + "name": "core/gallery", + "isValid": true, + "attributes": { + "images": [], + "ids": [], + "shortCodeTransforms": [], + "caption": "This gallery has a caption", + "imageCrop": true, + "fixedHeight": true, + "linkTo": "media", + "sizeSlug": "large", + "allowResize": false + }, + "innerBlocks": [ + { + "name": "core/image", + "isValid": true, + "attributes": { + "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", + "alt": "", + "caption": "", + "href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", + "id": 705, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [] + }, + { + "name": "core/image", + "isValid": true, + "attributes": { + "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", + "alt": "", + "caption": "", + "href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", + "id": 704, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [] + }, + { + "name": "core/image", + "isValid": true, + "attributes": { + "url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", + "alt": "", + "caption": "", + "href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", + "id": 703, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.parsed.json b/test/integration/fixtures/blocks/core__gallery__deprecated-7.parsed.json new file mode 100644 index 00000000000000..f59684073d1584 --- /dev/null +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.parsed.json @@ -0,0 +1,123 @@ +[ + { + "blockName": "core/gallery", + "attrs": { + "linkTo": "media" + }, + "innerBlocks": [ + { + "blockName": "core/image", + "attrs": { + "id": 705, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t
\"\"
\n\t", + "innerContent": [ + "\n\t\t
\"\"
\n\t" + ] + }, + { + "blockName": "core/image", + "attrs": { + "id": 704, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t
\"\"
\n\t", + "innerContent": [ + "\n\t\t
\"\"
\n\t" + ] + }, + { + "blockName": "core/image", + "attrs": { + "id": 703, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t
\"\"
\n\t", + "innerContent": [ + "\n\t\t
\"\"
\n\t" + ] + } + ], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ "\n" ] + }, + { + "blockName": "core/gallery", + "attrs": { + "linkTo": "media" + }, + "innerBlocks": [ + { + "blockName": "core/image", + "attrs": { + "id": 705, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [], + "innerHTML": "\n\t
\"\"
\n\t", + "innerContent": [ + "\n\t
\"\"
\n\t" + ] + }, + { + "blockName": "core/image", + "attrs": { + "id": 704, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [], + "innerHTML": "\n\t
\"\"
\n\t", + "innerContent": [ + "\n\t
\"\"
\n\t" + ] + }, + { + "blockName": "core/image", + "attrs": { + "id": 703, + "sizeSlug": "large", + "linkDestination": "media" + }, + "innerBlocks": [], + "innerHTML": "\n\t
\"\"
\n\t", + "innerContent": [ + "\n\t
\"\"
\n\t" + ] + } + ], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html b/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html new file mode 100644 index 00000000000000..0aed527cce98c9 --- /dev/null +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html @@ -0,0 +1,27 @@ + + + + + + + From 1ab4b6a6c4917d5046d08da74dd0ac2032a9ca21 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 21 Oct 2022 10:39:29 +1300 Subject: [PATCH 4/4] Add comment to explain need for deprecation --- packages/block-library/src/gallery/deprecated.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index d8d4e0588fc0f6..783183735dd66a 100644 --- a/packages/block-library/src/gallery/deprecated.js +++ b/packages/block-library/src/gallery/deprecated.js @@ -131,6 +131,8 @@ export function getImageBlock( image, sizeSlug, linkTo ) { } ); } +// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname +// to the gallery figcaption element. const v7 = { attributes: { images: {