From 952d383840d9bb3174e9e060bd61865c0ed692f2 Mon Sep 17 00:00:00 2001
From: sdixon194 <steve.dixon@automattic.com>
Date: Thu, 19 Aug 2021 17:54:32 -0400
Subject: [PATCH 1/6] start setting up captions in tile gallery

---
 .../extensions/blocks/tiled-gallery/edit.js   |  2 +-
 .../blocks/tiled-gallery/editor.scss          | 15 +++++++++++++
 .../tiled-gallery/gallery-image/edit.js       |  9 ++++++--
 .../tiled-gallery/gallery-image/save.js       |  3 ++-
 .../extensions/blocks/tiled-gallery/index.js  | 22 +++++++++++++++----
 .../blocks/tiled-gallery/layout/index.js      |  1 +
 .../layout/test/fixtures/image-sets.js        | 14 ++++++++++++
 7 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js
index b70b3752be0ea..c81f92b9aa046 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js
@@ -55,7 +55,7 @@ export function defaultColumnsNumber( attributes ) {
 }
 
 export const pickRelevantMediaFiles = image => {
-	const imageProps = pick( image, [ [ 'alt' ], [ 'id' ], [ 'link' ] ] );
+	const imageProps = pick( image, [ [ 'alt' ], [ 'id' ], [ 'link' ], [ 'caption' ] ] );
 	imageProps.url =
 		get( image, [ 'sizes', 'large', 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) ||
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss
index 82c55ffefb97f..ccae988935409 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss
@@ -183,6 +183,21 @@
 			display: none;
 		}
 	}
+
+	.tiled-gallery__item__caption {
+		background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+		bottom: 0;
+		color: $white;
+		font-size: $default-font-size;
+		left: 0;
+		margin-bottom: 0;
+		max-height: 100%;
+		overflow: auto;
+		padding: 40px 10px 9px;
+		position: absolute;
+		text-align: center;
+		width: 100%;
+	}
 }
 
 .tiled-gallery__filter-picker-menu {
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js
index ef5b0e89fb121..c531f26d1c2b3 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js
@@ -34,7 +34,7 @@ class GalleryImageEdit extends Component {
 	};
 
 	componentDidUpdate() {
-		const { alt, height, image, link, url, width } = this.props;
+		const { alt, height, image, link, url, width, caption } = this.props;
 
 		if ( image ) {
 			const nextAtts = {};
@@ -54,7 +54,9 @@ class GalleryImageEdit extends Component {
 			if ( ! width && image.media_details && image.media_details.width ) {
 				nextAtts.width = +image.media_details.width;
 			}
-
+			if ( ! caption && image.caption ) {
+				nextAtts.caption = image.caption;
+			}
 			if ( Object.keys( nextAtts ).length ) {
 				this.props.setAttributes( nextAtts );
 			}
@@ -65,6 +67,7 @@ class GalleryImageEdit extends Component {
 		const {
 			'aria-label': ariaLabel,
 			alt,
+			caption,
 			columns,
 			height,
 			id,
@@ -105,6 +108,7 @@ class GalleryImageEdit extends Component {
 				<img
 					alt={ alt }
 					aria-label={ ariaLabel }
+					caption={ caption }
 					data-height={ height }
 					data-id={ id }
 					data-link={ link }
@@ -164,6 +168,7 @@ class GalleryImageEdit extends Component {
 				{ /* Keep the <a> HTML structure, but ensure there is no navigation from edit */
 				/* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
 				{ href ? <a>{ img }</a> : img }
+				<figcaption className="tiled-gallery__item__caption">{ caption }</figcaption>
 			</figure>
 		);
 	}
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
index 8d848e9aed729..4c81d91d9b561 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { isBlobURL } from '@wordpress/blob';
 
 export default function GalleryImageSave( props ) {
-	const { alt, imageFilter, height, id, link, linkTo, origUrl, url, width } = props;
+	const { alt, imageFilter, height, id, link, linkTo, origUrl, url, width, caption } = props;
 
 	if ( isBlobURL( origUrl ) ) {
 		return null;
@@ -25,6 +25,7 @@ export default function GalleryImageSave( props ) {
 	const img = (
 		<img
 			alt={ alt }
+			caption={ caption }
 			data-height={ height }
 			data-id={ id }
 			data-link={ link }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/index.js
index 15baa4c8cd6d5..49a5bcea94e42 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/index.js
@@ -101,6 +101,12 @@ const blockAttributes = {
 				selector: 'img',
 				source: 'attribute',
 			},
+			caption: {
+				attribute: 'caption',
+				default: '',
+				selector: 'img',
+				source: 'attribute',
+			},
 			height: {
 				attribute: 'data-height',
 				selector: 'img',
@@ -146,6 +152,7 @@ const exampleAttributes = {
 	images: [
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample1,
 			width: 160,
@@ -153,6 +160,7 @@ const exampleAttributes = {
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample2,
 			width: 160,
@@ -160,6 +168,7 @@ const exampleAttributes = {
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample3,
 			width: 304,
@@ -167,6 +176,7 @@ const exampleAttributes = {
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample4,
 			width: 312,
@@ -174,6 +184,7 @@ const exampleAttributes = {
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample5,
 			width: 152,
@@ -181,6 +192,7 @@ const exampleAttributes = {
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample6,
 			width: 152,
@@ -239,11 +251,12 @@ export const settings = {
 				transform: images => {
 					const validImages = getValidImages( images );
 					return createBlock( `jetpack/${ name }`, {
-						images: validImages.map( ( { id, url, link, alt } ) => ( {
+						images: validImages.map( ( { id, url, link, alt, caption } ) => ( {
 							id,
 							url,
 							link,
 							alt,
+							caption,
 						} ) ),
 						ids: validImages.map( ( { id } ) => id ),
 						columnWidths: [ [ '100.00000' ] ],
@@ -257,11 +270,12 @@ export const settings = {
 					const validImages = getValidImages( images );
 					if ( validImages.length > 0 ) {
 						return createBlock( `jetpack/${ name }`, {
-							images: validImages.map( ( { id, url, link, alt } ) => ( {
+							images: validImages.map( ( { id, url, link, alt, caption } ) => ( {
 								id,
 								url,
 								link,
 								alt,
+								caption,
 							} ) ),
 							ids: validImages.map( ( { id } ) => id ),
 							columnWidths: [ [ '100.00000' ] ],
@@ -283,8 +297,8 @@ export const settings = {
 				blocks: [ 'core/image' ],
 				transform: ( { align, images } ) => {
 					if ( images.length > 0 ) {
-						return images.map( ( { id, url, alt } ) =>
-							createBlock( 'core/image', { align, id, url, alt } )
+						return images.map( ( { id, url, alt, caption } ) =>
+							createBlock( 'core/image', { align, id, url, alt, caption } )
 						);
 					}
 					return createBlock( 'core/image' );
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
index acfac930c1ce5..4a11fc9fc6486 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
@@ -50,6 +50,7 @@ export default class Layout extends Component {
 		return (
 			<Image
 				alt={ img.alt }
+				caption={ img.caption }
 				aria-label={ ariaLabel }
 				columns={ columns }
 				height={ img.height }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/test/fixtures/image-sets.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/test/fixtures/image-sets.js
index fd477f5a6235b..eb0e99e8ed4f1 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/test/fixtures/image-sets.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/test/fixtures/image-sets.js
@@ -1,6 +1,7 @@
 export const imageSet1 = [
 	{
 		alt: '',
+		caption: '',
 		id: 163,
 		url: 'https://example.files.wordpress.com/2018/12/architecture-bay-bridge-356830.jpg',
 		height: 2048,
@@ -8,6 +9,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 162,
 		url: 'https://example.files.wordpress.com/2018/12/bloom-blossom-flora-40797-1.jpg',
 		height: 1562,
@@ -15,6 +17,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 161,
 		url: 'https://example.files.wordpress.com/2018/12/architecture-building-city-597049.jpg',
 		height: 4221,
@@ -22,6 +25,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 160,
 		url: 'https://example.files.wordpress.com/2018/12/architecture-art-blue-699466.jpg',
 		height: 4032,
@@ -29,6 +33,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 159,
 		url:
 			'https://example.files.wordpress.com/2018/12/black-and-white-construction-ladder-54335.jpg',
@@ -37,6 +42,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 158,
 		url: 'https://example.files.wordpress.com/2018/12/architecture-buildings-city-1672110.jpg',
 		height: 6000,
@@ -44,6 +50,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 157,
 		url:
 			'https://example.files.wordpress.com/2018/12/architectural-design-architecture-black-and-white-1672122-1.jpg',
@@ -52,6 +59,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 156,
 		url: 'https://example.files.wordpress.com/2018/12/grass-hd-wallpaper-lake-127753.jpg',
 		height: 2198,
@@ -59,6 +67,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 122,
 		url: 'https://example.files.wordpress.com/2018/12/texaco-car-1.jpg',
 		height: 599,
@@ -66,6 +75,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 92,
 		url: 'https://example.files.wordpress.com/2018/12/43824553435_ea38cbc92a_m.jpg',
 		height: 159,
@@ -73,6 +83,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 90,
 		url: 'https://example.files.wordpress.com/2018/12/42924685680_7b5632e58e_m.jpg',
 		height: 150,
@@ -80,6 +91,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 89,
 		url:
 			'https://example.files.wordpress.com/2018/12/31962299833_1e106f7f7a_z-1-e1545262352979.jpg',
@@ -88,6 +100,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 88,
 		url: 'https://example.files.wordpress.com/2018/12/29797558147_3c72afa8f4_k.jpg',
 		height: 1511,
@@ -95,6 +108,7 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 8,
 		url: 'https://example.files.wordpress.com/2018/11/person-smartphone-office-table.jpeg',
 		height: 1067,

From abd612df637f70fcbf01468ad3e69b02c54a6483 Mon Sep 17 00:00:00 2001
From: sdixon194 <steve.dixon@automattic.com>
Date: Fri, 20 Aug 2021 10:43:17 -0400
Subject: [PATCH 2/6] some more playing around

---
 .../blocks/tiled-gallery/deprecated/v1/image.js     |  3 ++-
 .../blocks/tiled-gallery/gallery-image/save.js      |  1 +
 .../jetpack/extensions/blocks/tiled-gallery/save.js |  1 -
 .../blocks/tiled-gallery/tiled-gallery.php          |  1 -
 .../extensions/blocks/tiled-gallery/view.scss       | 13 +++++++++++++
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js
index 61d4a2cd05cef..1782e4ba7ae92 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js
@@ -7,7 +7,7 @@ export default function GalleryImageSave( props ) {
 	const {
 		'aria-label': ariaLabel,
 		alt,
-		// caption,
+		caption,
 		height,
 		id,
 		link,
@@ -35,6 +35,7 @@ export default function GalleryImageSave( props ) {
 	const img = (
 		<img
 			alt={ alt }
+			caption={ caption }
 			aria-label={ ariaLabel }
 			data-height={ height }
 			data-id={ id }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
index 4c81d91d9b561..d85557b4120c5 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
@@ -43,6 +43,7 @@ export default function GalleryImageSave( props ) {
 			} ) }
 		>
 			{ href ? <a href={ href }>{ img }</a> : img }
+			<figcaption className="tiled-gallery__caption">This is the caption from save.js</figcaption>
 		</figure>
 	);
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
index f5c6d3ee88449..d752c8f8960f4 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
@@ -8,7 +8,6 @@ import { LAYOUT_STYLES } from './constants';
 
 export default function TiledGallerySave( { attributes } ) {
 	const { imageFilter, images } = attributes;
-
 	if ( ! images.length ) {
 		return null;
 	}
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
index bd7cb88b9cf4c..0e2f13da5e135 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
@@ -77,7 +77,6 @@ public static function render( $attr, $content ) {
 			 */
 			$find    = array();
 			$replace = array();
-
 			foreach ( $images[0] as $image_html ) {
 				if (
 					preg_match( '/data-width="([0-9]+)"/', $image_html, $img_width )
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
index 2ff9e5984219e..ffaba6c6401f0 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
@@ -40,6 +40,7 @@ $tiled-gallery-max-rounded-corners: 20; // See constants.js for JS counterpart
 			border-radius: #{$i}px;
 		}
 	}
+
 }
 
 .tiled-gallery__gallery {
@@ -100,6 +101,18 @@ $tiled-gallery-max-rounded-corners: 20; // See constants.js for JS counterpart
 		@include gingham;
 	}
 
+	&.tiled-gallery__caption {
+		bottom: 0;
+		left: 0;
+		margin-bottom: 0;
+		max-height: 100%;
+		overflow: auto;
+		padding: 40px 10px 9px;
+		position: absolute;
+		text-align: center;
+		width: 100%;
+	}
+
 	& + & {
 		margin-top: $tiled-gallery-gutter;
 	}

From 50375407093865bb6876b750399a4b4eab079fcd Mon Sep 17 00:00:00 2001
From: sdixon194 <steve.dixon@automattic.com>
Date: Fri, 20 Aug 2021 18:06:29 -0400
Subject: [PATCH 3/6] adds some CSS and captions on the front end

---
 .../changelog/add-tiled-gallery-captions      |  4 +++
 .../tiled-gallery/gallery-image/save.js       |  2 +-
 .../blocks/tiled-gallery/layout/index.js      |  2 +-
 .../extensions/blocks/tiled-gallery/view.scss | 27 ++++++++++---------
 4 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/add-tiled-gallery-captions

diff --git a/projects/plugins/jetpack/changelog/add-tiled-gallery-captions b/projects/plugins/jetpack/changelog/add-tiled-gallery-captions
new file mode 100644
index 0000000000000..bb45c1973f7f9
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-tiled-gallery-captions
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Adds captions to tiled gallery block.
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
index d85557b4120c5..6075acbd08012 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
@@ -43,7 +43,7 @@ export default function GalleryImageSave( props ) {
 			} ) }
 		>
 			{ href ? <a href={ href }>{ img }</a> : img }
-			<figcaption className="tiled-gallery__caption">This is the caption from save.js</figcaption>
+			<figcaption className="tiled-gallery__caption">{ caption }</figcaption>
 		</figure>
 	);
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
index 4a11fc9fc6486..d3bb9c859a320 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
@@ -50,8 +50,8 @@ export default class Layout extends Component {
 		return (
 			<Image
 				alt={ img.alt }
-				caption={ img.caption }
 				aria-label={ ariaLabel }
+				caption={ img.caption }
 				columns={ columns }
 				height={ img.height }
 				id={ img.id }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
index ffaba6c6401f0..da2ce78ef20ad 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
@@ -101,18 +101,6 @@ $tiled-gallery-max-rounded-corners: 20; // See constants.js for JS counterpart
 		@include gingham;
 	}
 
-	&.tiled-gallery__caption {
-		bottom: 0;
-		left: 0;
-		margin-bottom: 0;
-		max-height: 100%;
-		overflow: auto;
-		padding: 40px 10px 9px;
-		position: absolute;
-		text-align: center;
-		width: 100%;
-	}
-
 	& + & {
 		margin-top: $tiled-gallery-gutter;
 	}
@@ -140,3 +128,18 @@ $tiled-gallery-max-rounded-corners: 20; // See constants.js for JS counterpart
 		display: block;
 	}
 }
+
+.tiled-gallery__caption {
+	background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+	bottom: 0;
+	color: $white;
+	font-size: $default-font-size;
+	left: 0;
+	margin-bottom: 0;
+	max-height: 100%;
+	overflow: auto;
+	padding: 40px 10px 9px;
+	position: absolute;
+	text-align: center;
+	width: 100%;
+}
\ No newline at end of file

From f7c4e7665a213853f1335a07621f143d8fc9d01a Mon Sep 17 00:00:00 2001
From: sdixon194 <steve.dixon@automattic.com>
Date: Fri, 20 Aug 2021 18:20:58 -0400
Subject: [PATCH 4/6] [not verified] fixes some unecessarily changed files

---
 .../extensions/blocks/tiled-gallery/deprecated/v1/image.js     | 3 +--
 .../plugins/jetpack/extensions/blocks/tiled-gallery/save.js    | 1 +
 .../jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php  | 1 +
 .../plugins/jetpack/extensions/blocks/tiled-gallery/view.scss  | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js
index 1782e4ba7ae92..61d4a2cd05cef 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js
@@ -7,7 +7,7 @@ export default function GalleryImageSave( props ) {
 	const {
 		'aria-label': ariaLabel,
 		alt,
-		caption,
+		// caption,
 		height,
 		id,
 		link,
@@ -35,7 +35,6 @@ export default function GalleryImageSave( props ) {
 	const img = (
 		<img
 			alt={ alt }
-			caption={ caption }
 			aria-label={ ariaLabel }
 			data-height={ height }
 			data-id={ id }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
index d752c8f8960f4..f5c6d3ee88449 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
@@ -8,6 +8,7 @@ import { LAYOUT_STYLES } from './constants';
 
 export default function TiledGallerySave( { attributes } ) {
 	const { imageFilter, images } = attributes;
+
 	if ( ! images.length ) {
 		return null;
 	}
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
index 0e2f13da5e135..741cc8ef1b9d0 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
@@ -77,6 +77,7 @@ public static function render( $attr, $content ) {
 			 */
 			$find    = array();
 			$replace = array();
+			
 			foreach ( $images[0] as $image_html ) {
 				if (
 					preg_match( '/data-width="([0-9]+)"/', $image_html, $img_width )
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
index da2ce78ef20ad..5320111cafad7 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
@@ -142,4 +142,4 @@ $tiled-gallery-max-rounded-corners: 20; // See constants.js for JS counterpart
 	position: absolute;
 	text-align: center;
 	width: 100%;
-}
\ No newline at end of file
+}

From 63bd1bbc3702aa1a35c5695a0c706bd727ff8104 Mon Sep 17 00:00:00 2001
From: sdixon194 <steve.dixon@automattic.com>
Date: Fri, 20 Aug 2021 18:23:56 -0400
Subject: [PATCH 5/6] [not verified] fixes php file

---
 .../jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
index 741cc8ef1b9d0..bd7cb88b9cf4c 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php
@@ -77,7 +77,7 @@ public static function render( $attr, $content ) {
 			 */
 			$find    = array();
 			$replace = array();
-			
+
 			foreach ( $images[0] as $image_html ) {
 				if (
 					preg_match( '/data-width="([0-9]+)"/', $image_html, $img_width )

From 6443cfd3a227c89c4ce942c57797c2cd915458c5 Mon Sep 17 00:00:00 2001
From: sdixon194 <steve.dixon@automattic.com>
Date: Fri, 20 Aug 2021 18:29:04 -0400
Subject: [PATCH 6/6] fixes scss building

---
 .../plugins/jetpack/extensions/blocks/tiled-gallery/view.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
index 5320111cafad7..679da976f1e9e 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss
@@ -1,6 +1,7 @@
 @import '../../shared/styles/jetpack-variables.scss';
 @import './variables.scss';
 @import './css-gram.scss';
+@import '../../shared/styles/gutenberg-base-styles.scss';
 
 $tiled-gallery-max-column-count: 20;
 $tiled-gallery-max-rounded-corners: 20; // See constants.js for JS counterpart