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 ( + + ); +} + 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 ( - - ); - }, + 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 ( +
+
+ { figure } +
+
+ ); + } + + return ( +
+ { figure } +
+ ); +} + 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 ( -
-
- { figure } -
-
- ); - } - - return ( -
- { figure } -
- ); - }, + 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 @@ - +