Accessibility of Gallery blocks (#2040)

* Gallery Collage a11y * number of pictures * Gallery Collage caption * update snapshots * Masonry Gallery a11y * Offset Gallery a11y * Carousel Gallery a11y * Simplify * deprecation for Gallery Carousel * reorder deprecation to make sure that the last one is executed first * deprecation for gallery collage * deprecation for gallery masonry * put back deprecation gallery collage is order where it was * fix gallery collage deprecation * deprecation for gallery offset * default value to small Co-authored-by: Olivier Lafleur <olafleur@godaddy.com>
godaddy-wordpress · Oct 8, 2021 · abbb0c8 · abbb0c8
1 parent 69c988d
commit abbb0c8
Show file tree

Hide file tree

Showing 12 changed files with 544 additions and 92 deletions.
diff --git a/src/blocks/gallery-carousel/deprecated.js b/src/blocks/gallery-carousel/deprecated.js
@@ -17,6 +17,176 @@ import { getColorClassName, RichText } from '@wordpress/block-editor';
 
 const deprecated =
 [ {
+	attributes: {
+		...GalleryAttributes,
+		...BackgroundAttributes,
+		...metadata.attributes,
+	},
+	save( { attributes, className } ) {
+		const {
+			autoPlay,
+			autoPlaySpeed,
+			draggable,
+			freeScroll,
+			gridSize,
+			gutter,
+			gutterMobile,
+			height,
+			images,
+			pageDots,
+			pauseHover,
+			prevNextButtons,
+			primaryCaption,
+			alignCells,
+			thumbnails,
+			responsiveHeight,
+			lightbox,
+			navForClass,
+		} = attributes;
+
+		// Return early if there are no images.
+		if ( images.length <= 0 ) {
+			return;
+		}
+
+		const classes = classnames(
+			className, {
+				'has-responsive-height': responsiveHeight,
+			}
+		);
+
+		const innerClasses = classnames(
+			'is-cropped',
+			...GalleryClasses( attributes ), {
+				'has-horizontal-gutter': gutter > 0,
+				'has-lightbox': lightbox,
+			}
+		);
+
+		const flickityClasses = classnames(
+			'has-carousel',
+			`has-carousel-${ gridSize }`, {
+				'has-aligned-cells': alignCells,
+				[ `has-margin-bottom-${ gutter }` ]: thumbnails && gutter > 0,
+				[ `has-margin-bottom-mobile-${ gutterMobile }` ]: thumbnails && gutterMobile > 0,
+				[ navForClass ]: thumbnails,
+			}
+		);
+
+		const flickityStyles = {
+			height: height ? height + 'px' : undefined,
+		};
+
+		const figureClasses = classnames(
+			'coblocks-gallery--figure', {
+				[ `has-margin-left-${ gutter }` ]: gutter > 0,
+				[ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0,
+				[ `has-margin-right-${ gutter }` ]: gutter > 0,
+				[ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0,
+			}
+		);
+
+		const flickityOptions = {
+			autoPlay: autoPlay && autoPlaySpeed ? parseFloat( autoPlaySpeed ) : false,
+			draggable,
+			pageDots,
+			prevNextButtons,
+			wrapAround: true,
+			cellAlign: alignCells ? 'left' : 'center',
+			pauseAutoPlayOnHover: pauseHover,
+			freeScroll,
+			arrowShape: {
+				x0: 10,
+				x1: 60, y1: 50,
+				x2: 65, y2: 45,
+				x3: 20,
+			},
+			thumbnails,
+			responsiveHeight,
+		};
+
+		const captionClasses = classnames(
+			'coblocks-gallery--caption',
+			'coblocks-gallery--primary-caption', {}
+		);
+
+		const navClasses = classnames(
+			'carousel-nav', {
+				[ `has-margin-top-${ gutter }` ]: gutter > 0,
+				[ `has-margin-top-mobile-${ gutterMobile }` ]: gutterMobile > 0,
+				[ `has-negative-margin-left-${ gutter }` ]: gutter > 0,
+				[ `has-negative-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0,
+				[ `has-negative-margin-right-${ gutter }` ]: gutter > 0,
+				[ `has-negative-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0,
+			}
+		);
+
+		const navFigureClasses = classnames(
+			'coblocks--figure', {
+				[ `has-margin-left-${ gutter }` ]: gutter > 0,
+				[ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0,
+				[ `has-margin-right-${ gutter }` ]: gutter > 0,
+				[ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0,
+			}
+		);
+
+		const navOptions = {
+			asNavFor: `.${ navForClass }`,
+			autoPlay: false,
+			contain: true,
+			cellAlign: 'left',
+			pageDots: false,
+			thumbnails: false,
+			draggable,
+			prevNextButtons: false,
+			wrapAround: false,
+		};
+
+		return (
+			<div className={ classes }>
+				<div className={ innerClasses }>
+					<div
+						className={ flickityClasses }
+						style={ responsiveHeight ? undefined : flickityStyles }
+						data-flickity={ JSON.stringify( flickityOptions ) }
+					>
+						{ images.map( ( image ) => {
+							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 (
+								<div key={ image.id || image.url } className="coblocks-gallery--item">
+									<figure className={ figureClasses }>
+										{ img }
+									</figure>
+								</div>
+							);
+						} ) }
+					</div>
+					{ thumbnails
+						? (
+							<div
+								className={ navClasses }
+								data-flickity={ JSON.stringify( navOptions ) }
+							>
+								{ images.map( ( image ) => {
+									const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-link={ image.link } />;
+									return (
+										<div key={ image.id || image.url } className="coblocks--item-thumbnail">
+											<figure className={ navFigureClasses }>
+												{ img }
+											</figure>
+										</div>
+									);
+								} ) }
+							</div> ) : null
+					}
+				</div>
+				{ ! RichText.isEmpty( primaryCaption ) && <RichText.Content tagName="figcaption" className={ captionClasses } value={ primaryCaption } /> }
+			</div>
+		);
+	},
+},
+{
 	attributes: {
 		...GalleryAttributes,
 		...BackgroundAttributes,

diff --git a/src/blocks/gallery-carousel/save.js b/src/blocks/gallery-carousel/save.js
@@ -12,6 +12,7 @@ import { GalleryClasses } from '../../components/block-gallery/shared';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 const save = ( { attributes, className } ) => {
 	const {
@@ -134,7 +135,8 @@ const save = ( { attributes, className } ) => {
 	};
 
 	return (
-		<div className={ classes }>
+		<div aria-label={ __( `Carousel Gallery`, 'coblocks' ) }
+			className={ classes }>
 			<div className={ innerClasses }>
 				<div
 					className={ flickityClasses }

diff --git a/src/blocks/gallery-carousel/test/__snapshots__/save.spec.js.snap b/src/blocks/gallery-carousel/test/__snapshots__/save.spec.js.snap
diff --git a/src/blocks/gallery-collage/deprecated.js b/src/blocks/gallery-collage/deprecated.js
@@ -147,12 +147,12 @@ const deprecated =
 								className={ classnames( 'wp-block-coblocks-gallery-collage__item', gutterClasses ) }
 							>
 								{ img &&
-									<figure className={ classes }>
-										{ href ? <a href={ href } target={ target } rel={ rel }>{ img }</a> : img }
-										{ captions && image.caption && (
-											<RichText.Content tagName="figcaption" className="wp-block-coblocks-gallery-collage__caption" value={ image.caption } />
-										) }
-									</figure>
+								<figure className={ classes }>
+									{ href ? <a href={ href } target={ target } rel={ rel }>{ img }</a> : img }
+									{ captions && image.caption && (
+										<RichText.Content tagName="figcaption" className="wp-block-coblocks-gallery-collage__caption" value={ image.caption } />
+									) }
+								</figure>
 								}
 							</li>
 						);
@@ -236,21 +236,125 @@ const deprecated =
 									className={ classnames( 'wp-block-coblocks-gallery-collage__item', `item-${ index + 1 }` ) }
 								>
 									{ img &&
+									<figure className={ classes }>
+										{ href ? <a href={ href } target={ target } rel={ rel }>{ img }</a> : img }
+										{ captions && image.caption.length !== 0 && (
+											<RichText.Content tagName="figcaption" className="wp-block-coblocks-gallery-collage__caption" value={ image.caption } />
+										) }
+									</figure>
+									}
+								</li>
+							);
+						} ) }
+					</ul>
+				</div>
+			</GutterWrapper>
+		);
+	},
+},
+{
+	attributes: {
+		...GalleryAttributes,
+		...metadata.attributes,
+		images: {
+			...metadata.attributes.images,
+			query: {
+				...metadata.attributes.images.query,
+				caption: {
+					...metadata.attributes.images.query.caption,
+					type: 'array',
+				},
+			},
+		},
+		gutter: {
+			type: 'string',
+			default: 'small',
+		},
+		gutterCustom: {
+			type: 'string',
+			default: '3',
+		},
+	},
+	save( { attributes } ) {
+		const {
+			animation,
+			captions,
+			captionStyle,
+			filter,
+			images,
+			lightbox,
+			linkTo,
+			rel,
+			shadow,
+			target,
+		} = attributes;
+
+		const classes = classnames( 'wp-block-coblocks-gallery-collage__figure', {
+			[ `shadow-${ shadow }` ]: shadow && shadow !== 'none',
+		} );
+
+		return (
+			<GutterWrapper { ...attributes }>
+				<div className={ classnames( {
+					[ `has-filter-${ filter }` ]: filter !== 'none',
+					[ `has-caption-style-${ captionStyle }` ]: captions && captionStyle !== undefined,
+					'has-lightbox': lightbox,
+				} ) }>
+					<ul>
+						{ images.sort( ( a, b ) => parseInt( a.index ) - parseInt( b.index ) )
+							// Limit images output based on he selector style.
+							.filter( ( image ) => parseInt( image.index ) < ( [ 'is-style-tiled', 'is-style-layered' ].includes( attributes.className ) ? 4 : 5 ) )
+							.map( ( image, index ) => {
+								let href;
+
+								switch ( linkTo ) {
+									case 'media':
+										href = image.url;
+										break;
+									case 'attachment':
+										href = image.link;
+										break;
+								}
+
+								// If an image has a custom link, override the linkTo selection.
+								if ( image.imgLink ) {
+									href = image.imgLink;
+								}
+
+								const itemClasses = classnames(
+									'wp-block-coblocks-gallery-collage__item',
+									`item-${ index + 1 }`,
+									{
+										[ `coblocks-animate` ]: animation,
+									}
+								);
+								const imgClasses = classnames( image.id && [ `wp-image-${ image.id }` ] );
+								const img = typeof image.url === 'undefined' ? null : ( <img src={ image.url } alt={ image.alt } data-index={ image.index } data-id={ image.id } data-imglink={ image.imgLink } data-link={ image.link } className={ imgClasses } /> );
+
+								return (
+									<li
+										key={ `image-${ index }` }
+										className={ itemClasses }
+										data-coblocks-animation={ animation }
+									>
+										{ img &&
 										<figure className={ classes }>
 											{ href ? <a href={ href } target={ target } rel={ rel }>{ img }</a> : img }
-											{ captions && image.caption.length !== 0 && (
+											{ captions && image.caption && (
 												<RichText.Content tagName="figcaption" className="wp-block-coblocks-gallery-collage__caption" value={ image.caption } />
 											) }
 										</figure>
-									}
-								</li>
-							);
-						} ) }
+										}
+									</li>
+								);
+							} )
+						}
 					</ul>
 				</div>
 			</GutterWrapper>
 		);
 	},
-} ];
+},
+];
 
 export default deprecated;
diff --git a/src/blocks/gallery-collage/save.js b/src/blocks/gallery-collage/save.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -33,11 +34,12 @@ const save = ( { attributes } ) => {
 
 	return (
 		<GutterWrapper { ...attributes }>
-			<div className={ classnames( {
-				[ `has-filter-${ filter }` ]: filter !== 'none',
-				[ `has-caption-style-${ captionStyle }` ]: captions && captionStyle !== undefined,
-				'has-lightbox': lightbox,
-			} ) }>
+			<div aria-label={ __( `Collage Gallery`, 'coblocks' ) }
+				className={ classnames( {
+					[ `has-filter-${ filter }` ]: filter !== 'none',
+					[ `has-caption-style-${ captionStyle }` ]: captions && captionStyle !== undefined,
+					'has-lightbox': lightbox,
+				} ) }>
 				<ul>
 					{ images.sort( ( a, b ) => parseInt( a.index ) - parseInt( b.index ) )
 						// Limit images output based on he selector style.