Default link to image_default_link_type for gallery (#25582)

WordPress · Sep 24, 2020 · 74cee79 · 74cee79
1 parent 32eca20
commit 74cee79
Show file tree

Hide file tree

Showing 22 changed files with 347 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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 (
+				<figure
+					className={ `columns-${ columns } ${
+						imageCrop ? 'is-cropped' : ''
+					}` }
+				>
+					<ul className="blocks-gallery-grid">
+						{ images.map( ( image ) => {
+							let href;
+
+							switch ( linkTo ) {
+								case 'media':
+									href = image.fullUrl || image.url;
+									break;
+								case 'attachment':
+									href = image.link;
+									break;
+							}
+
+							const img = (
+								<img
+									src={ image.url }
+									alt={ image.alt }
+									data-id={ image.id }
+									data-full-url={ image.fullUrl }
+									data-link={ image.link }
+									className={
+										image.id
+											? `wp-image-${ image.id }`
+											: null
+									}
+								/>
+							);
+
+							return (
+								<li
+									key={ image.id || image.url }
+									className="blocks-gallery-item"
+								>
+									<figure>
+										{ href ? (
+											<a href={ href }>{ img }</a>
+										) : (
+											img
+										) }
+										{ ! RichText.isEmpty(
+											image.caption
+										) && (
+											<RichText.Content
+												tagName="figcaption"
+												className="blocks-gallery-item__caption"
+												value={ image.caption }
+											/>
+										) }
+									</figure>
+								</li>
+							);
+						} ) }
+					</ul>
+					{ ! RichText.isEmpty( caption ) && (
+						<RichText.Content
+							tagName="figcaption"
+							className="blocks-gallery-caption"
+							value={ caption }
+						/>
+					) }
+				</figure>
+			);
+		},
+	},
 	{
 		attributes: {
 			images: {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,3 @@
-<!-- wp:gallery {"ids":[null,null]} -->
+<!-- wp:gallery {"ids":[null,null],"linkTo":"none"} -->
 <figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul><figcaption class="blocks-gallery-caption">Gallery caption.</figcaption></figure>
 <!-- /wp:gallery -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery.serialized.html b/packages/e2e-tests/fixtures/blocks/core__gallery.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:gallery {"ids":[null,null]} -->
+<!-- wp:gallery {"ids":[null,null],"linkTo":"none"} -->
 <figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul></figure>
 <!-- /wp:gallery -->
diff --git 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 @@
-<!-- wp:gallery {"ids":[null,null],"columns":1} -->
+<!-- wp:gallery {"ids":[null,null],"columns":1,"linkTo":"none"} -->
 <figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul></figure>
 <!-- /wp:gallery -->
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
@@ -1,3 +1,3 @@
-<!-- wp:gallery {"columns":2,"align":"wide"} -->
+<!-- wp:gallery {"columns":2,"linkTo":"none","align":"wide"} -->
 <figure class="wp-block-gallery alignwide columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul></figure>
 <!-- /wp:gallery -->
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
@@ -1,3 +1,3 @@
-<!-- wp:gallery {"ids":[],"columns":2,"align":"wide"} -->
+<!-- wp:gallery {"ids":[],"columns":2,"linkTo":"none","align":"wide"} -->
 <figure class="wp-block-gallery alignwide columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title" data-id="1" class="wp-image-1"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title" data-id="2" class="wp-image-2"/></figure></li></ul></figure>
 <!-- /wp:gallery -->
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
@@ -1,3 +1,3 @@
-<!-- wp:gallery {"ids":[null,null],"align":"wide"} -->
+<!-- wp:gallery {"ids":[null,null],"linkTo":"none","align":"wide"} -->
 <figure class="wp-block-gallery alignwide columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul></figure>
 <!-- /wp:gallery -->
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
@@ -1,3 +1,3 @@
-<!-- wp:gallery {"ids":[1421,1440,1362],"align":"wide"} -->
+<!-- wp:gallery {"ids":[1421,1440,1362],"linkTo":"none","align":"wide"} -->
 <figure class="wp-block-gallery alignwide columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190" alt="" data-id="1421" class="wp-image-1421"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580" alt="" data-id="1440" class="wp-image-1440"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://sergioestevaofolio.files.wordpress.com/2017/05/cropped-l1005945-2-2.jpg?w=580" alt="" data-id="1362" class="wp-image-1362"/></figure></li></ul></figure>
 <!-- /wp:gallery -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.html b/packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.html
@@ -0,0 +1,48 @@
+<!-- wp:gallery {"ids":[705,704,703],"linkTo":"media"} -->
+<figure class="wp-block-gallery columns-3 is-cropped">
+	<ul class="blocks-gallery-grid">
+		<li class="blocks-gallery-item">
+			<figure>
+				<a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-scaled.jpg" >
+					<img
+						src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"
+						alt=""
+						data-id="705"
+						data-full-url="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-scaled.jpg"
+						data-link="http://wptest.local/classic/test-image-3/"
+						class="wp-image-705"
+					/>
+				</a>
+			</figure>
+		</li>
+		<li class="blocks-gallery-item">
+			<figure>
+				<a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-scaled.jpg" >
+					<img
+						src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"
+						alt=""
+						data-id="704"
+						data-full-url="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-scaled.jpg"
+						data-link="http://wptest.local/test-image-2/"
+						class="wp-image-704"
+					/>
+				</a>
+			</figure>
+		</li>
+		<li class="blocks-gallery-item">
+			<figure>
+				<a href="http://wptest.local/wp-content/uploads/2020/04/test-image-scaled.jpg" >
+					<img
+						src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"
+						alt=""
+						data-id="703"
+						data-full-url="http://wptest.local/wp-content/uploads/2020/04/test-image-scaled.jpg"
+						data-link="http://wptest.local/test-image/"
+						class="wp-image-703"
+					/>
+				</a>
+			</figure>
+		</li>
+	</ul>
+</figure>
+<!-- /wp:gallery -->