Fix: Gallery does not link to full size images (#16011)

WordPress · Aug 29, 2019 · 5b2ece4 · 5b2ece4
1 parent 5c4c423
commit 5b2ece4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
@@ -13,6 +13,11 @@
 					"selector": "img",
 					"attribute": "src"
 				},
+				"fullUrl": {
+					"source": "attribute",
+					"selector": "img",
+					"attribute": "data-full-url"
+				},
 				"link": {
 					"source": "attribute",
 					"selector": "img",

diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
@@ -17,14 +17,23 @@ export default function save( { attributes } ) {
 
 				switch ( linkTo ) {
 					case 'media':
-						href = image.url;
+						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-link={ image.link } className={ image.id ? `wp-image-${ image.id }` : null } />;
+				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">

diff --git a/packages/block-library/src/gallery/shared.js b/packages/block-library/src/gallery/shared.js
@@ -10,5 +10,9 @@ export function defaultColumnsNumber( attributes ) {
 export const pickRelevantMediaFiles = ( image ) => {
 	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
 	imageProps.url = get( image, [ 'sizes', 'large', 'url' ] ) || get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) || image.url;
+	const fullUrl = get( image, [ 'sizes', 'full', 'url' ] ) || get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );
+	if ( fullUrl ) {
+		imageProps.fullUrl = fullUrl;
+	}
 	return imageProps;
 };