From 8e276bbf71c8fa564a998d05424431925373f176 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 23 Sep 2020 14:57:06 +0100
Subject: [PATCH 1/9] Add labels to img, figure and figcaption elements to make
 captions more accessible

---
 packages/block-library/src/gallery/gallery-image.js | 5 +++--
 packages/block-library/src/gallery/save.js          | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index ac77851911a441..a6fff8620a8fda 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -229,8 +229,8 @@ class GalleryImage extends Component {
 		} );
 
 		return (
-			<figure className={ className }>
-				{ ! isEditing && ( href ? <a href={ href }>{ img }</a> : img ) }
+			<figure className={ className } aria-describedby={ 'caption-' + id }>
+				{ ! isEditing && ( href ? <a href={ href } title={ caption }>{ img }</a> : img ) }
 				{ isEditing && (
 					<MediaPlaceholder
 						labels={ { title: __( 'Edit gallery image' ) } }
@@ -285,6 +285,7 @@ class GalleryImage extends Component {
 						}
 						unstableOnFocus={ this.onSelectCaption }
 						inlineToolbar
+						id={ 'caption' + id }
 					/>
 				) }
 			</figure>
diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
index 87478c82fbf625..ed7429cc1fccf6 100644
--- a/packages/block-library/src/gallery/save.js
+++ b/packages/block-library/src/gallery/save.js
@@ -50,6 +50,7 @@ export default function save( { attributes } ) {
 							className={
 								image.id ? `wp-image-${ image.id }` : null
 							}
+							aria-label={ image.caption }
 						/>
 					);
 
@@ -58,13 +59,14 @@ export default function save( { attributes } ) {
 							key={ image.id || image.url }
 							className="blocks-gallery-item"
 						>
-							<figure>
-								{ href ? <a href={ href }>{ img }</a> : img }
+							<figure aria-describedby={ 'caption-' + image.id }>
+								{ href ? <a href={ href } title={ image.caption }>{ img }</a> : img }
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
 										className="blocks-gallery-item__caption"
 										value={ image.caption }
+										id={ 'caption-' + image.id }
 									/>
 								) }
 							</figure>

From 941b402d984dcf1367130e151c98408938f67f76 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 23 Sep 2020 16:02:04 +0100
Subject: [PATCH 2/9] change aria-label to aria-describedby

---
 .../block-library/src/gallery/gallery-image.js    | 15 +++++++++++++--
 packages/block-library/src/gallery/save.js        | 10 ++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index a6fff8620a8fda..f4658822862855 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -217,6 +217,7 @@ class GalleryImage extends Component {
 					tabIndex="0"
 					aria-label={ ariaLabel }
 					ref={ this.bindContainer }
+					aria-describedby={ 'caption-' + id }
 				/>
 				{ isBlobURL( url ) && <Spinner /> }
 			</>
@@ -229,8 +230,18 @@ class GalleryImage extends Component {
 		} );
 
 		return (
-			<figure className={ className } aria-describedby={ 'caption-' + id }>
-				{ ! isEditing && ( href ? <a href={ href } title={ caption }>{ img }</a> : img ) }
+			<figure
+				className={ className }
+				aria-describedby={ 'caption-' + id }
+			>
+				{ ! isEditing &&
+					( href ? (
+						<a href={ href }>
+							{ img }
+						</a>
+					) : (
+						img
+					) ) }
 				{ isEditing && (
 					<MediaPlaceholder
 						labels={ { title: __( 'Edit gallery image' ) } }
diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
index ed7429cc1fccf6..ef327958cacf9d 100644
--- a/packages/block-library/src/gallery/save.js
+++ b/packages/block-library/src/gallery/save.js
@@ -50,7 +50,7 @@ export default function save( { attributes } ) {
 							className={
 								image.id ? `wp-image-${ image.id }` : null
 							}
-							aria-label={ image.caption }
+							aria-describedby={ 'caption-' + image.id }
 						/>
 					);
 
@@ -60,7 +60,13 @@ export default function save( { attributes } ) {
 							className="blocks-gallery-item"
 						>
 							<figure aria-describedby={ 'caption-' + image.id }>
-								{ href ? <a href={ href } title={ image.caption }>{ img }</a> : img }
+								{ href ? (
+									<a href={ href }>
+										{ img }
+									</a>
+								) : (
+									img
+								) }
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"

From 31b9b51e7ba59a82f1c80539310e5b314c35ae7c Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 24 Sep 2020 21:29:54 +0100
Subject: [PATCH 3/9] Update
 packages/block-library/src/gallery/gallery-image.js

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>
---
 packages/block-library/src/gallery/gallery-image.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index f4658822862855..fe5a20d2482b93 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -296,7 +296,7 @@ class GalleryImage extends Component {
 						}
 						unstableOnFocus={ this.onSelectCaption }
 						inlineToolbar
-						id={ 'caption' + id }
+						id={ 'caption-' + id }
 					/>
 				) }
 			</figure>

From 59253d14e00ca662a20c92cd1c0901c2216ad516 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 24 Sep 2020 21:30:04 +0100
Subject: [PATCH 4/9] Update
 packages/block-library/src/gallery/gallery-image.js

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>
---
 packages/block-library/src/gallery/gallery-image.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index fe5a20d2482b93..dcb6d9b35dac72 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -217,7 +217,7 @@ class GalleryImage extends Component {
 					tabIndex="0"
 					aria-label={ ariaLabel }
 					ref={ this.bindContainer }
-					aria-describedby={ 'caption-' + id }
+					aria-describedby={ `caption-${ id }` }
 				/>
 				{ isBlobURL( url ) && <Spinner /> }
 			</>

From 510151141527996ea7f9f17145f0aa39b8424cb1 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 25 Sep 2020 11:01:04 +1000
Subject: [PATCH 5/9] Replace aria-describedby with conditional aria-label.

---
 .../block-library/src/gallery/gallery-image.js | 15 ++-------------
 packages/block-library/src/gallery/save.js     | 18 ++++++++----------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index dcb6d9b35dac72..75898b6b4c65d8 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -217,7 +217,6 @@ class GalleryImage extends Component {
 					tabIndex="0"
 					aria-label={ ariaLabel }
 					ref={ this.bindContainer }
-					aria-describedby={ `caption-${ id }` }
 				/>
 				{ isBlobURL( url ) && <Spinner /> }
 			</>
@@ -230,18 +229,8 @@ class GalleryImage extends Component {
 		} );
 
 		return (
-			<figure
-				className={ className }
-				aria-describedby={ 'caption-' + id }
-			>
-				{ ! isEditing &&
-					( href ? (
-						<a href={ href }>
-							{ img }
-						</a>
-					) : (
-						img
-					) ) }
+			<figure className={ className }>
+				{ ! isEditing && ( href ? <a href={ href }>{ img }</a> : img ) }
 				{ isEditing && (
 					<MediaPlaceholder
 						labels={ { title: __( 'Edit gallery image' ) } }
diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
index ef327958cacf9d..335f5884167fa3 100644
--- a/packages/block-library/src/gallery/save.js
+++ b/packages/block-library/src/gallery/save.js
@@ -39,6 +39,11 @@ export default function save( { attributes } ) {
 							href = image.link;
 							break;
 					}
+					// The image should only have an aria-label if it's within a link and has no alt text.
+					const imageLabel =
+						! image.alt && image.caption && href
+							? image.caption
+							: null;
 
 					const img = (
 						<img
@@ -50,7 +55,7 @@ export default function save( { attributes } ) {
 							className={
 								image.id ? `wp-image-${ image.id }` : null
 							}
-							aria-describedby={ 'caption-' + image.id }
+							aria-label={ imageLabel || null }
 						/>
 					);
 
@@ -59,20 +64,13 @@ export default function save( { attributes } ) {
 							key={ image.id || image.url }
 							className="blocks-gallery-item"
 						>
-							<figure aria-describedby={ 'caption-' + image.id }>
-								{ href ? (
-									<a href={ href }>
-										{ img }
-									</a>
-								) : (
-									img
-								) }
+							<figure>
+								{ href ? <a href={ href }>{ img }</a> : img }
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
 										className="blocks-gallery-item__caption"
 										value={ image.caption }
-										id={ 'caption-' + image.id }
 									/>
 								) }
 							</figure>

From ecde8359a92a841e85cbf41a654e627f89c4fad8 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 28 Sep 2020 14:37:44 +1000
Subject: [PATCH 6/9] Avoid caption repetition.

---
 packages/block-library/src/gallery/save.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
index 335f5884167fa3..ee0efe3c372178 100644
--- a/packages/block-library/src/gallery/save.js
+++ b/packages/block-library/src/gallery/save.js
@@ -71,6 +71,7 @@ export default function save( { attributes } ) {
 										tagName="figcaption"
 										className="blocks-gallery-item__caption"
 										value={ image.caption }
+										aria-hidden={ !! imageLabel || null }
 									/>
 								) }
 							</figure>

From b34cfed4ec1a85d54c96468fc9cc4de7ae1d0ada Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 28 Sep 2020 15:05:07 +1000
Subject: [PATCH 7/9] Revert "Avoid caption repetition."

This reverts commit d72429a4849e42469c3fb5c33ea08a2149c70c0e.
---
 packages/block-library/src/gallery/save.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
index ee0efe3c372178..335f5884167fa3 100644
--- a/packages/block-library/src/gallery/save.js
+++ b/packages/block-library/src/gallery/save.js
@@ -71,7 +71,6 @@ export default function save( { attributes } ) {
 										tagName="figcaption"
 										className="blocks-gallery-item__caption"
 										value={ image.caption }
-										aria-hidden={ !! imageLabel || null }
 									/>
 								) }
 							</figure>

From 908081cb9cd286642236faa1950d40388df15683 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 28 Sep 2020 17:29:16 +1000
Subject: [PATCH 8/9] Add deprecation.

---
 .../block-library/src/gallery/deprecated.js   | 158 ++++++++++++++++++
 1 file changed, 158 insertions(+)

diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js
index 1b82131b890850..e6fd71a696cec4 100644
--- a/packages/block-library/src/gallery/deprecated.js
+++ b/packages/block-library/src/gallery/deprecated.js
@@ -13,8 +13,166 @@ import { RichText } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { defaultColumnsNumber } from './shared';
+import {
+	LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_MEDIA,
+} from './constants';
 
 const deprecated = [
+	{
+		attributes: {
+			images: {
+				type: 'array',
+				default: [],
+				source: 'query',
+				selector: '.blocks-gallery-item',
+				query: {
+					url: {
+						type: 'string',
+						source: 'attribute',
+						selector: 'img',
+						attribute: 'src',
+					},
+					fullUrl: {
+						type: 'string',
+						source: 'attribute',
+						selector: 'img',
+						attribute: 'data-full-url',
+					},
+					link: {
+						type: 'string',
+						source: 'attribute',
+						selector: 'img',
+						attribute: 'data-link',
+					},
+					alt: {
+						type: 'string',
+						source: 'attribute',
+						selector: 'img',
+						attribute: 'alt',
+						default: '',
+					},
+					id: {
+						type: 'string',
+						source: 'attribute',
+						selector: 'img',
+						attribute: 'data-id',
+					},
+					caption: {
+						type: 'string',
+						source: 'html',
+						selector: '.blocks-gallery-item__caption',
+					},
+				},
+			},
+			ids: {
+				type: 'array',
+				items: {
+					type: 'number',
+				},
+				default: [],
+			},
+			columns: {
+				type: 'number',
+				minimum: 1,
+				maximum: 8,
+			},
+			caption: {
+				type: 'string',
+				source: 'html',
+				selector: '.blocks-gallery-caption',
+			},
+			imageCrop: {
+				type: 'boolean',
+				default: true,
+			},
+			linkTo: {
+				type: 'string',
+			},
+			sizeSlug: {
+				type: 'string',
+				default: 'large',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				images,
+				columns = defaultColumnsNumber( attributes ),
+				imageCrop,
+				caption,
+				linkTo,
+			} = attributes;
+
+			return (
+				<figure
+					className={ `columns-${ columns } ${
+						imageCrop ? 'is-cropped' : ''
+					}` }
+				>
+					<ul className="blocks-gallery-grid">
+						{ images.map( ( image ) => {
+							let href;
+
+							switch ( linkTo ) {
+								case LINK_DESTINATION_MEDIA:
+									href = image.fullUrl || image.url;
+									break;
+								case LINK_DESTINATION_ATTACHMENT:
+									href = image.link;
+									break;
+							}
+
+							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"
+								>
+									<figure>
+										{ href ? (
+											<a href={ href }>{ img }</a>
+										) : (
+											img
+										) }
+										{ ! RichText.isEmpty(
+											image.caption
+										) && (
+											<RichText.Content
+												tagName="figcaption"
+												className="blocks-gallery-item__caption"
+												value={ image.caption }
+											/>
+										) }
+									</figure>
+								</li>
+							);
+						} ) }
+					</ul>
+					{ ! RichText.isEmpty( caption ) && (
+						<RichText.Content
+							tagName="figcaption"
+							className="blocks-gallery-caption"
+							value={ caption }
+						/>
+					) }
+				</figure>
+			);
+		},
+	},
 	{
 		attributes: {
 			images: {

From f6fbc2ee0ac5342ae222f0af107c8aac12d07004 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 29 Sep 2020 11:48:36 +1000
Subject: [PATCH 9/9] Remove unnecessary Id.

---
 packages/block-library/src/gallery/gallery-image.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index 75898b6b4c65d8..ac77851911a441 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -285,7 +285,6 @@ class GalleryImage extends Component {
 						}
 						unstableOnFocus={ this.onSelectCaption }
 						inlineToolbar
-						id={ 'caption-' + id }
 					/>
 				) }
 			</figure>