diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index dadb8f562c9206..ffdbb1d51981cf 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -68,8 +68,7 @@ "default": true }, "linkTo": { - "type": "string", - "default": "none" + "type": "string" }, "sizeSlug": { "type": "string", diff --git a/packages/block-library/src/gallery/constants.js b/packages/block-library/src/gallery/constants.js new file mode 100644 index 00000000000000..f4b6e7af56d473 --- /dev/null +++ b/packages/block-library/src/gallery/constants.js @@ -0,0 +1,3 @@ +export const LINK_DESTINATION_NONE = 'none'; +export const LINK_DESTINATION_MEDIA = 'file'; +export const LINK_DESTINATION_ATTACHMENT = 'post'; diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js index 36196e6d6427dc..1b82131b890850 100644 --- a/packages/block-library/src/gallery/deprecated.js +++ b/packages/block-library/src/gallery/deprecated.js @@ -15,6 +15,181 @@ import { RichText } from '@wordpress/block-editor'; import { defaultColumnsNumber } from './shared'; const deprecated = [ + { + 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: [], + }, + columns: { + type: 'number', + minimum: 1, + maximum: 8, + }, + caption: { + type: 'string', + source: 'html', + selector: '.blocks-gallery-caption', + }, + imageCrop: { + type: 'boolean', + default: true, + }, + linkTo: { + type: 'string', + default: 'none', + }, + sizeSlug: { + type: 'string', + default: 'large', + }, + }, + supports: { + align: true, + }, + isEligible( { linkTo } ) { + return ! linkTo || linkTo === 'attachment' || linkTo === 'media'; + }, + migrate( attributes ) { + let linkTo = attributes.linkTo; + if ( ! attributes.linkTo ) { + linkTo = 'none'; + } else if ( attributes.linkTo === 'attachment' ) { + linkTo = 'post'; + } else if ( attributes.linkTo === 'media' ) { + linkTo = 'file'; + } + return { + ...attributes, + linkTo, + }; + }, + save( { attributes } ) { + const { + images, + columns = defaultColumnsNumber( attributes ), + imageCrop, + caption, + linkTo, + } = attributes; + + return ( +
+ + { ! RichText.isEmpty( caption ) && ( + + ) } +
+ ); + }, + }, { attributes: { images: { diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index ed870e33092b62..46074ab2683279 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -38,12 +38,17 @@ import { withViewportMatch } from '@wordpress/viewport'; import { sharedIcon } from './shared-icon'; import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared'; import Gallery from './gallery'; +import { + LINK_DESTINATION_ATTACHMENT, + LINK_DESTINATION_MEDIA, + LINK_DESTINATION_NONE, +} from './constants'; const MAX_COLUMNS = 8; const linkOptions = [ - { value: 'attachment', label: __( 'Attachment Page' ) }, - { value: 'media', label: __( 'Media File' ) }, - { value: 'none', label: __( 'None' ) }, + { value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) }, + { value: LINK_DESTINATION_MEDIA, label: __( 'Media File' ) }, + { value: LINK_DESTINATION_NONE, label: __( 'None' ) }, ]; const ALLOWED_MEDIA_TYPES = [ 'image' ]; @@ -331,6 +336,14 @@ class GalleryEdit extends Component { captionSelected: false, } ); } + // linkTo attribute must be saved so blocks don't break when changing image_default_link_type in options.php + if ( ! this.props.attributes.linkTo ) { + this.setAttributes( { + linkTo: + window?.wp?.media?.view?.settings?.defaultProps?.link || + LINK_DESTINATION_NONE, + } ); + } } render() { diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 411ea9114932bb..ac77851911a441 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -27,6 +27,10 @@ import { * Internal dependencies */ import { pickRelevantMediaFiles } from './shared'; +import { + LINK_DESTINATION_ATTACHMENT, + LINK_DESTINATION_MEDIA, +} from './constants'; const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url ); @@ -190,10 +194,10 @@ class GalleryImage extends Component { let href; switch ( linkTo ) { - case 'media': + case LINK_DESTINATION_MEDIA: href = url; break; - case 'attachment': + case LINK_DESTINATION_ATTACHMENT: href = link; break; } diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js index aef56dc6adb1d5..87478c82fbf625 100644 --- a/packages/block-library/src/gallery/save.js +++ b/packages/block-library/src/gallery/save.js @@ -7,6 +7,10 @@ import { RichText } from '@wordpress/block-editor'; * Internal dependencies */ import { defaultColumnsNumber } from './shared'; +import { + LINK_DESTINATION_ATTACHMENT, + LINK_DESTINATION_MEDIA, +} from './constants'; export default function save( { attributes } ) { const { @@ -28,10 +32,10 @@ export default function save( { attributes } ) { let href; switch ( linkTo ) { - case 'media': + case LINK_DESTINATION_MEDIA: href = image.fullUrl || image.url; break; - case 'attachment': + case LINK_DESTINATION_ATTACHMENT: href = image.link; break; } diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js index 3f6fa0810ee0dd..fa7fff8d46f9f5 100644 --- a/packages/block-library/src/gallery/transforms.js +++ b/packages/block-library/src/gallery/transforms.js @@ -13,6 +13,7 @@ import { createBlobURL } from '@wordpress/blob'; * Internal dependencies */ import { pickRelevantMediaFiles } from './shared'; +import { LINK_DESTINATION_ATTACHMENT } from './constants'; const parseShortcodeIds = ( ids ) => { if ( ! ids ) { @@ -82,8 +83,10 @@ const transforms = { }, linkTo: { type: 'string', - shortcode: ( { named: { link = 'attachment' } } ) => { - return link === 'file' ? 'media' : link; + shortcode: ( { + named: { link = LINK_DESTINATION_ATTACHMENT }, + } ) => { + return link; }, }, }, diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.serialized.html index 2828012f9610ae..39a9da57a48fa8 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.serialized.html @@ -1,3 +1,3 @@ - +
Gallery caption.
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery.serialized.html index 4675f6d3cf05bc..62c72702eb57f6 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__gallery.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__columns.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery__columns.serialized.html index b203e7841d6786..022a6a9cb73967 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery__columns.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__columns.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-1.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-1.serialized.html index 6331b6bd2f7403..dd51c3ac37cac0 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-1.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-1.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-2.serialized.html index 90d526172ee87e..bd177026c8c5bf 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-2.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-2.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-3.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-3.serialized.html index be64b7f2b23aab..0fc203739e6dbd 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-3.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-3.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-4.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-4.serialized.html index 5e430b949044c9..e9bf8294c2f7e0 100644 --- a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-4.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-4.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.html b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.html new file mode 100644 index 00000000000000..d97624d43e0c3d --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.html @@ -0,0 +1,48 @@ + +
+ +
+ diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.json b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.json new file mode 100644 index 00000000000000..8cbe9760d13bab --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.json @@ -0,0 +1,46 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/gallery", + "isValid": true, + "attributes": { + "images": [ + { + "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", + "fullUrl": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-scaled.jpg", + "link": "http://wptest.local/classic/test-image-3/", + "alt": "", + "id": "705", + "caption": "" + }, + { + "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", + "fullUrl": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-scaled.jpg", + "link": "http://wptest.local/test-image-2/", + "alt": "", + "id": "704", + "caption": "" + }, + { + "url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", + "fullUrl": "http://wptest.local/wp-content/uploads/2020/04/test-image-scaled.jpg", + "link": "http://wptest.local/test-image/", + "alt": "", + "id": "703", + "caption": "" + } + ], + "ids": [ + 705, + 704, + 703 + ], + "caption": "", + "imageCrop": true, + "linkTo": "file", + "sizeSlug": "large" + }, + "innerBlocks": [], + "originalContent": "
\n\t\n
" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.parsed.json b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.parsed.json new file mode 100644 index 00000000000000..79acfbcf66ddd5 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.parsed.json @@ -0,0 +1,27 @@ +[ + { + "blockName": "core/gallery", + "attrs": { + "ids": [ + 705, + 704, + 703 + ], + "linkTo": "media" + }, + "innerBlocks": [], + "innerHTML": "\n
\n\t\n
\n", + "innerContent": [ + "\n
\n\t\n
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.serialized.html new file mode 100644 index 00000000000000..f3afe00b34a31c --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.serialized.html @@ -0,0 +1,3 @@ + +
+ diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js index 8db6bfe60a2bea..eff1b56a5d7148 100644 --- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js +++ b/packages/e2e-tests/specs/editor/blocks/gallery.test.js @@ -47,7 +47,7 @@ describe( 'Gallery', () => { const filename = await upload( '.wp-block-gallery input[type="file"]' ); const regex = new RegExp( - `\\s*