diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index a2843ecf6e3b42..783183735dd66a 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'; @@ -127,6 +131,127 @@ 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: { + 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 { caption, columns, imageCrop } = attributes; + + 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 ( +
+ { innerBlocksProps.children } + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); + }, +}; + const v6 = { attributes: { images: { @@ -984,4 +1109,4 @@ const v1 = { }, }; -export default [ v6, v5, v4, v3, v2, v1 ]; +export default [ v7, v6, v5, v4, v3, v2, v1 ]; 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 @@ + + + + + + +