From d5eb120293f5a06a2d864c4477b6d517ed8ff00d Mon Sep 17 00:00:00 2001
From: Fabian Pimminger <fabs.pim@gmail.com>
Date: Tue, 7 Aug 2018 12:55:57 +0200
Subject: [PATCH] Let Wordpress make images in gallery block responsive / add
 srcset attribute  (#8593)

* Add wp-image-ID class to gallery to make images reponsive

* edit tests to include class name
---
 core-blocks/gallery/index.js                 | 37 +++++++++++++++++++-
 test/integration/fixtures/wordpress-out.html |  2 +-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/core-blocks/gallery/index.js b/core-blocks/gallery/index.js
index e02377a8ff3459..5b046ee653204a 100644
--- a/core-blocks/gallery/index.js
+++ b/core-blocks/gallery/index.js
@@ -175,7 +175,7 @@ export const settings = {
 							break;
 					}
 
-					const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-link={ image.link } />;
+					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 } />;
 
 					return (
 						<li key={ image.id || image.url } className="blocks-gallery-item">
@@ -193,6 +193,41 @@ export const settings = {
 	},
 
 	deprecated: [
+		{
+			attributes: blockAttributes,
+			save( { attributes } ) {
+				const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;
+				return (
+					<ul className={ `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
+						{ images.map( ( image ) => {
+							let href;
+
+							switch ( linkTo ) {
+								case 'media':
+									href = 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 } />;
+
+							return (
+								<li key={ image.id || image.url } className="blocks-gallery-item">
+									<figure>
+										{ href ? <a href={ href }>{ img }</a> : img }
+										{ image.caption && image.caption.length > 0 && (
+											<RichText.Content tagName="figcaption" value={ image.caption } />
+										) }
+									</figure>
+								</li>
+							);
+						} ) }
+					</ul>
+				);
+			},
+		},
 		{
 			attributes: {
 				...blockAttributes,
diff --git a/test/integration/fixtures/wordpress-out.html b/test/integration/fixtures/wordpress-out.html
index ffb360c11cae2f..b1d5977395c22f 100644
--- a/test/integration/fixtures/wordpress-out.html
+++ b/test/integration/fixtures/wordpress-out.html
@@ -19,5 +19,5 @@ <h3>Shortcode</h3>
 <!-- /wp:heading -->
 
 <!-- wp:gallery {"columns":3,"linkTo":"attachment"} -->
-<ul class="wp-block-gallery columns-3 is-cropped"><li class="blocks-gallery-item"><figure><img data-id="1"/></figure></li></ul>
+<ul class="wp-block-gallery columns-3 is-cropped"><li class="blocks-gallery-item"><figure><img data-id="1" class="wp-image-1"/></figure></li></ul>
 <!-- /wp:gallery -->