diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
index 137090eaf339b..b7fe92407cbec 100644
--- a/packages/block-library/src/gallery/index.js
+++ b/packages/block-library/src/gallery/index.js
@@ -17,12 +17,12 @@ import { G, Path, SVG } from '@wordpress/components';
*/
import { default as edit, defaultColumnsNumber, pickRelevantMediaFiles } from './edit';
+// Attributes are to be saved as JSON in the block boundary for easier
+// server-side access.
const blockAttributes = {
images: {
type: 'array',
default: [],
- source: 'query',
- selector: 'ul.wp-block-gallery .blocks-gallery-item',
query: {
url: {
source: 'attribute',
@@ -64,6 +64,50 @@ const blockAttributes = {
},
};
+// Identical schema, but wherein `images` are not saved in the block boundary,
+// and instead are sourced in the block's inner HTML.
+const deprecatedBlockAttributes = {
+ ...blockAttributes,
+ images: {
+ ...blockAttributes.images,
+ source: 'query',
+ selector: 'ul.wp-block-gallery .blocks-gallery-item',
+ },
+};
+
+function save( { attributes } ) {
+ const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;
+ return (
+
+ { images.map( ( image ) => {
+ let href;
+
+ switch ( linkTo ) {
+ case 'media':
+ href = image.url;
+ break;
+ case 'attachment':
+ href = image.link;
+ break;
+ }
+
+ const img = ;
+
+ return (
+ -
+
+
+ );
+ } ) }
+
+ );
+}
+
export const name = 'core/gallery';
export const settings = {
@@ -164,42 +208,15 @@ export const settings = {
edit,
- save( { attributes } ) {
- const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;
- return (
-
- { images.map( ( image ) => {
- let href;
-
- switch ( linkTo ) {
- case 'media':
- href = image.url;
- break;
- case 'attachment':
- href = image.link;
- break;
- }
-
- const img = ;
-
- return (
- -
-
-
- );
- } ) }
-
- );
- },
+ save,
deprecated: [
{
- attributes: blockAttributes,
+ attributes: deprecatedBlockAttributes,
+ save,
+ },
+ {
+ attributes: deprecatedBlockAttributes,
save( { attributes } ) {
const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;
return (
@@ -235,9 +252,9 @@ export const settings = {
},
{
attributes: {
- ...blockAttributes,
+ ...deprecatedBlockAttributes,
images: {
- ...blockAttributes.images,
+ ...deprecatedBlockAttributes.images,
selector: 'div.wp-block-gallery figure.blocks-gallery-image img',
},
align: {
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index f7f6e17f6b66c..7e5a9c918d198 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -31,26 +31,16 @@ export const name = 'core/image';
const blockAttributes = {
url: {
type: 'string',
- source: 'attribute',
- selector: 'img',
- attribute: 'src',
},
alt: {
type: 'string',
- source: 'attribute',
- selector: 'img',
- attribute: 'alt',
default: '',
},
caption: {
- source: 'html',
- selector: 'figcaption',
+ type: 'string',
},
href: {
type: 'string',
- source: 'attribute',
- selector: 'figure > a',
- attribute: 'href',
},
id: {
type: 'number',
@@ -70,6 +60,37 @@ const blockAttributes = {
},
linkTarget: {
type: 'string',
+ },
+};
+
+const deprecatedBlockAttributes = {
+ ...blockAttributes,
+ url: {
+ ...blockAttributes.url,
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'src',
+ },
+ alt: {
+ ...blockAttributes.alt,
+ source: 'attribute',
+ selector: 'img',
+ attribute: 'alt',
+ },
+ caption: {
+ ...blockAttributes.caption,
+ type: undefined,
+ source: 'html',
+ selector: 'figcaption',
+ },
+ href: {
+ ...blockAttributes.href,
+ source: 'attribute',
+ selector: 'figure > a',
+ attribute: 'href',
+ },
+ linkTarget: {
+ ...blockAttributes.linkTarget,
source: 'attribute',
selector: 'figure > a',
attribute: 'target',
@@ -99,6 +120,48 @@ const schema = {
},
};
+function save( { attributes } ) {
+ const { url, alt, caption, align, href, width, height, id, linkTarget } = attributes;
+
+ const classes = classnames( {
+ [ `align${ align }` ]: align,
+ 'is-resized': width || height,
+ } );
+
+ const image = (
+
+ );
+
+ const figure = (
+
+ { href ? { image } : image }
+ { ! RichText.isEmpty( caption ) && }
+
+ );
+
+ if ( 'left' === align || 'right' === align || 'center' === align ) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ );
+}
+
export const settings = {
title: __( 'Image' ),
@@ -212,51 +275,15 @@ export const settings = {
edit,
- save( { attributes } ) {
- const { url, alt, caption, align, href, width, height, id, linkTarget } = attributes;
-
- const classes = classnames( {
- [ `align${ align }` ]: align,
- 'is-resized': width || height,
- } );
-
- const image = (
-
- );
-
- const figure = (
-
- { href ? { image } : image }
- { ! RichText.isEmpty( caption ) && }
-
- );
-
- if ( 'left' === align || 'right' === align || 'center' === align ) {
- return (
-
-
-
- );
- }
-
- return (
-
- );
- },
+ save,
deprecated: [
{
- attributes: blockAttributes,
+ attributes: deprecatedBlockAttributes,
+ save,
+ },
+ {
+ attributes: deprecatedBlockAttributes,
save( { attributes } ) {
const { url, alt, caption, align, href, width, height, id } = attributes;
@@ -284,7 +311,7 @@ export const settings = {
},
},
{
- attributes: blockAttributes,
+ attributes: deprecatedBlockAttributes,
save( { attributes } ) {
const { url, alt, caption, align, href, width, height, id } = attributes;
@@ -307,7 +334,7 @@ export const settings = {
},
},
{
- attributes: blockAttributes,
+ attributes: deprecatedBlockAttributes,
save( { attributes } ) {
const { url, alt, caption, align, href, width, height } = attributes;
const extraImageProps = width || height ? { width, height } : {};
diff --git a/test/integration/full-content/fixtures/core__gallery.html b/test/integration/full-content/fixtures/core__gallery.html
index 5e48c7e66351f..8670368046b38 100644
--- a/test/integration/full-content/fixtures/core__gallery.html
+++ b/test/integration/full-content/fixtures/core__gallery.html
@@ -1,4 +1,4 @@
-
+
-