Let Wordpress make images in gallery block responsive / add srcset at…

…tribute (#8593) * Add wp-image-ID class to gallery to make images reponsive * edit tests to include class name
WordPress · Aug 7, 2018 · d5eb120 · d5eb120
1 parent 8fdf226
commit d5eb120
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git 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
@@ -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 -->