Exploring: Adding Captions to Tiled Galleries

projects/plugins/jetpack/changelog/add-tiled-gallery-captions

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Adds captions to tiled gallery block.

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' ] ) ||

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 {

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>
 		);
 	}

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 }
@@ -42,6 +43,7 @@ export default function GalleryImageSave( props ) {
 			} ) }
 		>
 			{ href ? <a href={ href }>{ img }</a> : img }
+			<figcaption className="tiled-gallery__caption">{ caption }</figcaption>
 		</figure>
 	);
 }

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,41 +152,47 @@ const exampleAttributes = {
 	images: [
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample1,
 			width: 160,
 			height: 95,
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample2,
 			width: 160,
 			height: 107,
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample3,
 			width: 304,
 			height: 203,
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample4,
 			width: 312,
 			height: 207,
 		},
 		{
 			alt: '',
+			caption: '',
 			link: '',
 			url: tiledGalleryExample5,
 			width: 152,
 			height: 101,
 		},
 		{
 			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' );

projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js

@@ -51,6 +51,7 @@ export default class Layout extends Component {
 			<Image
 				alt={ img.alt }
 				aria-label={ ariaLabel }
+				caption={ img.caption }
 				columns={ columns }
 				height={ img.height }
 				id={ img.id }

projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/test/fixtures/image-sets.js

@@ -1,34 +1,39 @@
 export const imageSet1 = [
 	{
 		alt: '',
+		caption: '',
 		id: 163,
 		url: 'https://example.files.wordpress.com/2018/12/architecture-bay-bridge-356830.jpg',
 		height: 2048,
 		width: 8192,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 162,
 		url: 'https://example.files.wordpress.com/2018/12/bloom-blossom-flora-40797-1.jpg',
 		height: 1562,
 		width: 3531,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 161,
 		url: 'https://example.files.wordpress.com/2018/12/architecture-building-city-597049.jpg',
 		height: 4221,
 		width: 2818,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 160,
 		url: 'https://example.files.wordpress.com/2018/12/architecture-art-blue-699466.jpg',
 		height: 4032,
 		width: 3024,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 159,
 		url:
 			'https://example.files.wordpress.com/2018/12/black-and-white-construction-ladder-54335.jpg',
@@ -37,13 +42,15 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 158,
 		url: 'https://example.files.wordpress.com/2018/12/architecture-buildings-city-1672110.jpg',
 		height: 6000,
 		width: 4000,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 157,
 		url:
 			'https://example.files.wordpress.com/2018/12/architectural-design-architecture-black-and-white-1672122-1.jpg',
@@ -52,34 +59,39 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 156,
 		url: 'https://example.files.wordpress.com/2018/12/grass-hd-wallpaper-lake-127753.jpg',
 		height: 2198,
 		width: 7999,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 122,
 		url: 'https://example.files.wordpress.com/2018/12/texaco-car-1.jpg',
 		height: 599,
 		width: 800,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 92,
 		url: 'https://example.files.wordpress.com/2018/12/43824553435_ea38cbc92a_m.jpg',
 		height: 159,
 		width: 240,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 90,
 		url: 'https://example.files.wordpress.com/2018/12/42924685680_7b5632e58e_m.jpg',
 		height: 150,
 		width: 240,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 89,
 		url:
 			'https://example.files.wordpress.com/2018/12/31962299833_1e106f7f7a_z-1-e1545262352979.jpg',
@@ -88,13 +100,15 @@ export const imageSet1 = [
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 88,
 		url: 'https://example.files.wordpress.com/2018/12/29797558147_3c72afa8f4_k.jpg',
 		height: 1511,
 		width: 2048,
 	},
 	{
 		alt: '',
+		caption: '',
 		id: 8,
 		url: 'https://example.files.wordpress.com/2018/11/person-smartphone-office-table.jpeg',
 		height: 1067,

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
@@ -40,6 +41,7 @@ $tiled-gallery-max-rounded-corners: 20; // See constants.js for JS counterpart
 			border-radius: #{$i}px;
 		}
 	}
+
 }
 
 .tiled-gallery__gallery {
@@ -127,3 +129,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%;
+}