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 (
+
+ );
+ },
+};
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This gallery has a caption
+
+
\ 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\t\n\t\n\t\n\t\n\t\n\n",
+ "innerContent": [
+ "\n\n\t",
+ null,
+ "\n\t\n\t",
+ null,
+ "\n\t\n\t",
+ null,
+ "\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\t\n\t\n\t\n\t\n\t\n\tThis gallery has a caption\n\n",
+ "innerContent": [
+ "\n\n\t",
+ null,
+ "\n\t\n\t",
+ null,
+ "\n\t\n\t",
+ null,
+ "\n\tThis gallery has a caption\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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This gallery has a caption
+