From 7798351600882b0cee4c004d41beb26c38e5c856 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Mon, 8 Jul 2019 18:46:53 -0400
Subject: [PATCH 01/25] Slideshow block, AMP compatibility, initial commit.

---
 extensions/blocks/slideshow/slideshow.php | 49 ++++++++++++++++++++++-
 extensions/blocks/slideshow/style.scss    | 19 +++++++--
 2 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index be9ae6c0cd501..4207d29b3824c 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -23,6 +23,53 @@
  * @return string
  */
 function jetpack_slideshow_block_load_assets( $attr, $content ) {
-	Jetpack_Gutenberg::load_assets_as_required( 'slideshow' );
+	$type = 'slideshow';
+	Jetpack_Gutenberg::load_assets_as_required( $type );
+	if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) {
+		$ids      = empty( $attr['ids'] ) ? array() : $attr['ids'];
+		$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
+		$autoplay = false;
+		$delay    = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
+		$align    = isset( $attr['align'] ) ? $attr['align'] : 'center';
+		$classes  = array(
+			'wp-block-jetpack-' . $type,
+			'wp-amp-block',
+			'align' . $align,
+		);
+		$slides   = array_map(
+			function( $id ) {
+				$caption    = wp_get_attachment_caption( $id );
+				$src        = wp_get_attachment_image_src( $id, 'full' );
+				$figcaption = $caption ? sprintf(
+					'<figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">%s</figcaption>',
+					$caption
+				) : '';
+				$amp_img    = sprintf(
+					'<amp-img src="%s" width="%s" height="%s" alt="%s" class="wp-block-jetpack-slideshow_image" />',
+					$src[0],
+					$src[1],
+					$src[2],
+					$caption
+				);
+				return sprintf(
+					'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
+					$amp_img,
+					$figcaption
+				);
+			},
+			$ids
+		);
+		$carousel = sprintf(
+			'<amp-carousel height="300" width="400" layout="responsive" type="slides" controls loop %s>%s</amp-carousel>',
+			$autoplay ? 'autoplay delay=' . ( $delay * 1000 ) : '',
+			implode( '', $slides )
+		);
+
+		return sprintf(
+			'<div class="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s</div></div>',
+			implode( $classes, ' ' ),
+			$carousel
+		);
+	}
 	return $content;
 }
diff --git a/extensions/blocks/slideshow/style.scss b/extensions/blocks/slideshow/style.scss
index 15de2e2d8873a..f0352486c75ed 100644
--- a/extensions/blocks/slideshow/style.scss
+++ b/extensions/blocks/slideshow/style.scss
@@ -10,6 +10,10 @@
 		outline: 0;
 	}
 
+	&.wp-amp-block > .wp-block-jetpack-slideshow_container {
+		opacity: 1;
+	}
+
 	.wp-block-jetpack-slideshow_container {
 		width: 100%;
 		overflow: hidden;
@@ -55,11 +59,16 @@
 		max-width: 100%;
 		width: auto;
 		object-fit: contain;
+		/* For amp-img */
+		& > * {
+			object-fit: contain;
+		}
 	}
 
 	.wp-block-jetpack-slideshow_button-prev,
 	.wp-block-jetpack-slideshow_button-next,
-	.wp-block-jetpack-slideshow_button-pause {
+	.wp-block-jetpack-slideshow_button-pause,
+	.amp-carousel-button {
 		background-color: rgba( 0, 0, 0, 0.5 );
 		background-position: center;
 		background-repeat: no-repeat;
@@ -92,14 +101,16 @@
 	&.swiper-container-rtl .swiper-button-prev.swiper-button-white,
 	&.swiper-container-rtl .wp-block-jetpack-slideshow_button-prev,
 	.swiper-button-next.swiper-button-white,
-	.wp-block-jetpack-slideshow_button-next {
-		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z' fill='white'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
+	.wp-block-jetpack-slideshow_button-next,
+	.amp-carousel-button-next {
+		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z' fill='%23fff'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
 	}
 
 	&.swiper-container-rtl .swiper-button-next.swiper-button-white,
 	&.swiper-container-rtl .wp-block-jetpack-slideshow_button-next,
 	.swiper-button-prev.swiper-button-white,
-	.wp-block-jetpack-slideshow_button-prev {
+	.wp-block-jetpack-slideshow_button-prev,
+	.amp-carousel-button-prev {
 		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M18 4.12L10.12 12 18 19.88 15.88 22l-10-10 10-10z' fill='white'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
 	}
 

From 4d36cc0b16545d201b44c59432cd38f49a6fcab1 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 07:14:26 -0400
Subject: [PATCH 02/25] Background image data URIs don't seem to work in AMP
 unless spaces are encoded.

---
 extensions/blocks/slideshow/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/blocks/slideshow/style.scss b/extensions/blocks/slideshow/style.scss
index f0352486c75ed..cf3982920dfaa 100644
--- a/extensions/blocks/slideshow/style.scss
+++ b/extensions/blocks/slideshow/style.scss
@@ -103,7 +103,7 @@
 	.swiper-button-next.swiper-button-white,
 	.wp-block-jetpack-slideshow_button-next,
 	.amp-carousel-button-next {
-		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z' fill='%23fff'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
+		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5.88%204.12L13.76%2012l-7.88%207.88L8%2022l10-10L8%202z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
 	}
 
 	&.swiper-container-rtl .swiper-button-next.swiper-button-white,
@@ -111,7 +111,7 @@
 	.swiper-button-prev.swiper-button-white,
 	.wp-block-jetpack-slideshow_button-prev,
 	.amp-carousel-button-prev {
-		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M18 4.12L10.12 12 18 19.88 15.88 22l-10-10 10-10z' fill='white'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
+		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18%204.12L10.12%2012%2018%2019.88%2015.88%2022l-10-10%2010-10z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
 	}
 
 	.wp-block-jetpack-slideshow_button-pause {

From 399667bf2d658f6c7fd7d83245e68c95024c0120 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 07:20:12 -0400
Subject: [PATCH 03/25] Aria labels for next and previous buttons.

---
 extensions/blocks/slideshow/slideshow.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 4207d29b3824c..9134a90a7b6a9 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -60,7 +60,9 @@ function( $id ) {
 			$ids
 		);
 		$carousel = sprintf(
-			'<amp-carousel height="300" width="400" layout="responsive" type="slides" controls loop %s>%s</amp-carousel>',
+			'<amp-carousel height="300" width="400" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s>%s</amp-carousel>',
+			__( 'Next Slide', 'jetpack' ),
+			__( 'Previous Slide', 'jetpack' ),
 			$autoplay ? 'autoplay delay=' . ( $delay * 1000 ) : '',
 			implode( '', $slides )
 		);

From e9afb4394b1c3c6b3da454a185faf5cea42e7c8e Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 07:56:20 -0400
Subject: [PATCH 04/25] Slideshow pagination control in AMP.

---
 extensions/blocks/slideshow/slideshow.php | 43 +++++++++++++++++------
 extensions/blocks/slideshow/style.scss    | 11 ++++++
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 9134a90a7b6a9..01412781f4b10 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -26,17 +26,21 @@ function jetpack_slideshow_block_load_assets( $attr, $content ) {
 	$type = 'slideshow';
 	Jetpack_Gutenberg::load_assets_as_required( $type );
 	if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) {
-		$ids      = empty( $attr['ids'] ) ? array() : $attr['ids'];
-		$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
-		$autoplay = false;
-		$delay    = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
-		$align    = isset( $attr['align'] ) ? $attr['align'] : 'center';
-		$classes  = array(
+		global $slideshow_id;
+		$slideshow_id    = ( $slideshow_id || 0 ) + 1;
+		$amp_carousel_id = sprintf( 'wp-block-jetpack-slideshow__%s', $slideshow_id );
+
+		$ids        = empty( $attr['ids'] ) ? array() : $attr['ids'];
+		$autoplay   = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
+		$autoplay   = false;
+		$delay      = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
+		$align      = isset( $attr['align'] ) ? $attr['align'] : 'center';
+		$classes    = array(
 			'wp-block-jetpack-' . $type,
 			'wp-amp-block',
 			'align' . $align,
 		);
-		$slides   = array_map(
+		$slides     = array_map(
 			function( $id ) {
 				$caption    = wp_get_attachment_caption( $id );
 				$src        = wp_get_attachment_image_src( $id, 'full' );
@@ -59,18 +63,35 @@ function( $id ) {
 			},
 			$ids
 		);
-		$carousel = sprintf(
-			'<amp-carousel height="300" width="400" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s>%s</amp-carousel>',
+		$bullets    = array_map(
+			function( $index ) use ( $amp_carousel_id ) {
+				return sprintf(
+					'<button class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide %s" on="tap:%s.goToSlide(index=%s)"></button>',
+					( $index + 1 ),
+					$amp_carousel_id,
+					$index
+				);
+			},
+			array_keys( $ids )
+		);
+		$pagination = sprintf(
+			'<div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination">%s</div>',
+			implode( '', $bullets )
+		);
+		$carousel   = sprintf(
+			'<amp-carousel height="300" width="400" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="%s">%s</amp-carousel>',
 			__( 'Next Slide', 'jetpack' ),
 			__( 'Previous Slide', 'jetpack' ),
 			$autoplay ? 'autoplay delay=' . ( $delay * 1000 ) : '',
+			$amp_carousel_id,
 			implode( '', $slides )
 		);
 
 		return sprintf(
-			'<div class="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s</div></div>',
+			'<div class="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s</div></div>',
 			implode( $classes, ' ' ),
-			$carousel
+			$carousel,
+			$pagination
 		);
 	}
 	return $content;
diff --git a/extensions/blocks/slideshow/style.scss b/extensions/blocks/slideshow/style.scss
index cf3982920dfaa..97fd77b101b08 100644
--- a/extensions/blocks/slideshow/style.scss
+++ b/extensions/blocks/slideshow/style.scss
@@ -190,6 +190,17 @@
 	}
 }
 
+.wp-block-jetpack-slideshow_pagination.amp-pagination {
+	text-align: center;
+	.swiper-pagination-bullet {
+		margin: 0 4px;
+		border-radius: 100%;
+		display: inline-block;
+		padding: 0;
+		border: 0;
+	}
+}
+
 @media ( min-width: $break-small ) {
 	.wp-block-jetpack-slideshow {
 		.wp-block-jetpack-slideshow_button-prev,

From a166b78fca5550ac599ceae30a7e10e61fb1fb8d Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 08:03:53 -0400
Subject: [PATCH 05/25] Safer global for Slideshow ID.

---
 extensions/blocks/slideshow/slideshow.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 01412781f4b10..979c791f7068f 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -26,9 +26,9 @@ function jetpack_slideshow_block_load_assets( $attr, $content ) {
 	$type = 'slideshow';
 	Jetpack_Gutenberg::load_assets_as_required( $type );
 	if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) {
-		global $slideshow_id;
-		$slideshow_id    = ( $slideshow_id || 0 ) + 1;
-		$amp_carousel_id = sprintf( 'wp-block-jetpack-slideshow__%s', $slideshow_id );
+		global $wp_block_jetpack_slideshow_id;
+		$wp_block_jetpack_slideshow_id = ( $wp_block_jetpack_slideshow_id || 0 ) + 1;
+		$amp_carousel_id               = sprintf( 'wp-block-jetpack-slideshow__%s', $wp_block_jetpack_slideshow_id );
 
 		$ids        = empty( $attr['ids'] ) ? array() : $attr['ids'];
 		$autoplay   = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];

From 2fe9c5659d305620a028b4639b780b1a647e4e9b Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 08:21:06 -0400
Subject: [PATCH 06/25] Attribute and caption escaping.

---
 extensions/blocks/slideshow/slideshow.php | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 979c791f7068f..d4c8d0b878066 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -28,7 +28,10 @@ function jetpack_slideshow_block_load_assets( $attr, $content ) {
 	if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) {
 		global $wp_block_jetpack_slideshow_id;
 		$wp_block_jetpack_slideshow_id = ( $wp_block_jetpack_slideshow_id || 0 ) + 1;
-		$amp_carousel_id               = sprintf( 'wp-block-jetpack-slideshow__%s', $wp_block_jetpack_slideshow_id );
+		$amp_carousel_id               = sprintf(
+			'wp-block-jetpack-slideshow__%s',
+			intval( $wp_block_jetpack_slideshow_id )
+		);
 
 		$ids        = empty( $attr['ids'] ) ? array() : $attr['ids'];
 		$autoplay   = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
@@ -46,14 +49,14 @@ function( $id ) {
 				$src        = wp_get_attachment_image_src( $id, 'full' );
 				$figcaption = $caption ? sprintf(
 					'<figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">%s</figcaption>',
-					$caption
+					wp_kses_post( $caption )
 				) : '';
 				$amp_img    = sprintf(
 					'<amp-img src="%s" width="%s" height="%s" alt="%s" class="wp-block-jetpack-slideshow_image" />',
-					$src[0],
-					$src[1],
-					$src[2],
-					$caption
+					esc_url( $src[0] ),
+					esc_attr( $src[1] ),
+					esc_attr( $src[2] ),
+					esc_attr( $caption )
 				);
 				return sprintf(
 					'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
@@ -68,7 +71,7 @@ function( $index ) use ( $amp_carousel_id ) {
 				return sprintf(
 					'<button class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide %s" on="tap:%s.goToSlide(index=%s)"></button>',
 					( $index + 1 ),
-					$amp_carousel_id,
+					esc_attr( $amp_carousel_id ),
 					$index
 				);
 			},
@@ -83,7 +86,7 @@ function( $index ) use ( $amp_carousel_id ) {
 			__( 'Next Slide', 'jetpack' ),
 			__( 'Previous Slide', 'jetpack' ),
 			$autoplay ? 'autoplay delay=' . ( $delay * 1000 ) : '',
-			$amp_carousel_id,
+			esc_attr( $amp_carousel_id ),
 			implode( '', $slides )
 		);
 

From 3b3eb3ce8945660c5ac5bb92aa3cf60aaf67c36d Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 08:25:15 -0400
Subject: [PATCH 07/25] Extract Slideshow AMP rendering to a separate function.

---
 extensions/blocks/slideshow/slideshow.php | 154 ++++++++++++----------
 1 file changed, 82 insertions(+), 72 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index d4c8d0b878066..b6c73000ef6ef 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -23,79 +23,89 @@
  * @return string
  */
 function jetpack_slideshow_block_load_assets( $attr, $content ) {
-	$type = 'slideshow';
-	Jetpack_Gutenberg::load_assets_as_required( $type );
+	Jetpack_Gutenberg::load_assets_as_required( 'slideshow' );
 	if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) {
-		global $wp_block_jetpack_slideshow_id;
-		$wp_block_jetpack_slideshow_id = ( $wp_block_jetpack_slideshow_id || 0 ) + 1;
-		$amp_carousel_id               = sprintf(
-			'wp-block-jetpack-slideshow__%s',
-			intval( $wp_block_jetpack_slideshow_id )
-		);
-
-		$ids        = empty( $attr['ids'] ) ? array() : $attr['ids'];
-		$autoplay   = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
-		$autoplay   = false;
-		$delay      = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
-		$align      = isset( $attr['align'] ) ? $attr['align'] : 'center';
-		$classes    = array(
-			'wp-block-jetpack-' . $type,
-			'wp-amp-block',
-			'align' . $align,
-		);
-		$slides     = array_map(
-			function( $id ) {
-				$caption    = wp_get_attachment_caption( $id );
-				$src        = wp_get_attachment_image_src( $id, 'full' );
-				$figcaption = $caption ? sprintf(
-					'<figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">%s</figcaption>',
-					wp_kses_post( $caption )
-				) : '';
-				$amp_img    = sprintf(
-					'<amp-img src="%s" width="%s" height="%s" alt="%s" class="wp-block-jetpack-slideshow_image" />',
-					esc_url( $src[0] ),
-					esc_attr( $src[1] ),
-					esc_attr( $src[2] ),
-					esc_attr( $caption )
-				);
-				return sprintf(
-					'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
-					$amp_img,
-					$figcaption
-				);
-			},
-			$ids
-		);
-		$bullets    = array_map(
-			function( $index ) use ( $amp_carousel_id ) {
-				return sprintf(
-					'<button class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide %s" on="tap:%s.goToSlide(index=%s)"></button>',
-					( $index + 1 ),
-					esc_attr( $amp_carousel_id ),
-					$index
-				);
-			},
-			array_keys( $ids )
-		);
-		$pagination = sprintf(
-			'<div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination">%s</div>',
-			implode( '', $bullets )
-		);
-		$carousel   = sprintf(
-			'<amp-carousel height="300" width="400" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="%s">%s</amp-carousel>',
-			__( 'Next Slide', 'jetpack' ),
-			__( 'Previous Slide', 'jetpack' ),
-			$autoplay ? 'autoplay delay=' . ( $delay * 1000 ) : '',
-			esc_attr( $amp_carousel_id ),
-			implode( '', $slides )
-		);
-
-		return sprintf(
-			'<div class="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s</div></div>',
-			implode( $classes, ' ' ),
-			$carousel,
-			$pagination
-		);
+		return jetpack_slideshow_block_render_amp( $attr );
 	}
 	return $content;
 }
+
+/**
+ * Render slideshow block for AMP
+ *
+ * @param array $attr Array containing the slideshow block attributes.
+ *
+ * @return string
+ */
+function jetpack_slideshow_block_render_amp( $attr ) {
+	global $wp_block_jetpack_slideshow_id;
+	$wp_block_jetpack_slideshow_id = ( $wp_block_jetpack_slideshow_id || 0 ) + 1;
+	$amp_carousel_id               = sprintf(
+		'wp-block-jetpack-slideshow__%s',
+		intval( $wp_block_jetpack_slideshow_id )
+	);
+
+	$ids        = empty( $attr['ids'] ) ? array() : $attr['ids'];
+	$autoplay   = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
+	$autoplay   = false;
+	$delay      = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
+	$align      = isset( $attr['align'] ) ? $attr['align'] : 'center';
+	$classes    = array(
+		'wp-block-jetpack-slideshow',
+		'wp-amp-block',
+		'align' . $align,
+	);
+	$slides     = array_map(
+		function( $id ) {
+			$caption    = wp_get_attachment_caption( $id );
+			$src        = wp_get_attachment_image_src( $id, 'full' );
+			$figcaption = $caption ? sprintf(
+				'<figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">%s</figcaption>',
+				wp_kses_post( $caption )
+			) : '';
+			$amp_img    = sprintf(
+				'<amp-img src="%s" width="%s" height="%s" alt="%s" class="wp-block-jetpack-slideshow_image" />',
+				esc_url( $src[0] ),
+				esc_attr( $src[1] ),
+				esc_attr( $src[2] ),
+				esc_attr( $caption )
+			);
+			return sprintf(
+				'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
+				$amp_img,
+				$figcaption
+			);
+		},
+		$ids
+	);
+	$bullets    = array_map(
+		function( $index ) use ( $amp_carousel_id ) {
+			return sprintf(
+				'<button class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide %s" on="tap:%s.goToSlide(index=%s)"></button>',
+				( $index + 1 ),
+				esc_attr( $amp_carousel_id ),
+				$index
+			);
+		},
+		array_keys( $ids )
+	);
+	$pagination = sprintf(
+		'<div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination">%s</div>',
+		implode( '', $bullets )
+	);
+	$carousel   = sprintf(
+		'<amp-carousel height="300" width="400" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="%s">%s</amp-carousel>',
+		__( 'Next Slide', 'jetpack' ),
+		__( 'Previous Slide', 'jetpack' ),
+		$autoplay ? 'autoplay delay=' . ( $delay * 1000 ) : '',
+		esc_attr( $amp_carousel_id ),
+		implode( '', $slides )
+	);
+
+	return sprintf(
+		'<div class="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s</div></div>',
+		implode( $classes, ' ' ),
+		$carousel,
+		$pagination
+	);
+}

From 5d52ab44124d171832a9d67ab4a86389ba330b88 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 18:08:08 -0400
Subject: [PATCH 08/25] Use wp_get_attachment_image() and let image sanitizer
 manage. Use 'large' size rather than 'full.'

---
 extensions/blocks/slideshow/slideshow.php | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index b6c73000ef6ef..a7124edb98848 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -58,21 +58,14 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 	$slides     = array_map(
 		function( $id ) {
 			$caption    = wp_get_attachment_caption( $id );
-			$src        = wp_get_attachment_image_src( $id, 'full' );
 			$figcaption = $caption ? sprintf(
 				'<figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">%s</figcaption>',
 				wp_kses_post( $caption )
 			) : '';
-			$amp_img    = sprintf(
-				'<amp-img src="%s" width="%s" height="%s" alt="%s" class="wp-block-jetpack-slideshow_image" />',
-				esc_url( $src[0] ),
-				esc_attr( $src[1] ),
-				esc_attr( $src[2] ),
-				esc_attr( $caption )
-			);
+			$image      = wp_get_attachment_image( $id, 'large', false, array( 'class' => 'wp-block-jetpack-slideshow_image' ) );
 			return sprintf(
 				'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
-				$amp_img,
+				$image,
 				$figcaption
 			);
 		},

From ba5e9234c146eeca60aee923638c66bbe70996a7 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 18:14:38 -0400
Subject: [PATCH 09/25] Additional attribute escaping.

---
 extensions/blocks/slideshow/slideshow.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index a7124edb98848..172bd36af285a 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -88,16 +88,16 @@ function( $index ) use ( $amp_carousel_id ) {
 	);
 	$carousel   = sprintf(
 		'<amp-carousel height="300" width="400" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="%s">%s</amp-carousel>',
-		__( 'Next Slide', 'jetpack' ),
-		__( 'Previous Slide', 'jetpack' ),
-		$autoplay ? 'autoplay delay=' . ( $delay * 1000 ) : '',
+		esc_attr__( 'Next Slide', 'jetpack' ),
+		esc_attr__( 'Previous Slide', 'jetpack' ),
+		$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',
 		esc_attr( $amp_carousel_id ),
 		implode( '', $slides )
 	);
 
 	return sprintf(
 		'<div class="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s</div></div>',
-		implode( $classes, ' ' ),
+		esc_attr( implode( $classes, ' ' ) ),
 		$carousel,
 		$pagination
 	);

From 9d0209558557da1c600e2495eee89e382194bd7c Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 9 Jul 2019 18:16:21 -0400
Subject: [PATCH 10/25] Bug fix: remove autoplay override used for testing.

---
 extensions/blocks/slideshow/slideshow.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 172bd36af285a..c4914f26e478e 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -47,7 +47,6 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 
 	$ids        = empty( $attr['ids'] ) ? array() : $attr['ids'];
 	$autoplay   = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
-	$autoplay   = false;
 	$delay      = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
 	$align      = isset( $attr['align'] ) ? $attr['align'] : 'center';
 	$classes    = array(

From 188f089028e59020d83cf62145b7f115f12511d0 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Wed, 10 Jul 2019 08:02:44 -0400
Subject: [PATCH 11/25] Unnecessary style removal.

---
 extensions/blocks/slideshow/style.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/extensions/blocks/slideshow/style.scss b/extensions/blocks/slideshow/style.scss
index 97fd77b101b08..0ca3fd7e6c64f 100644
--- a/extensions/blocks/slideshow/style.scss
+++ b/extensions/blocks/slideshow/style.scss
@@ -59,10 +59,6 @@
 		max-width: 100%;
 		width: auto;
 		object-fit: contain;
-		/* For amp-img */
-		& > * {
-			object-fit: contain;
-		}
 	}
 
 	.wp-block-jetpack-slideshow_button-prev,

From cabea0d9a74b9f3d6003d7df3224a78b966b6f10 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Sun, 29 Sep 2019 11:07:34 -0400
Subject: [PATCH 12/25] Autoplay pause/play button implementation for AMP.

---
 extensions/blocks/slideshow/slideshow.php | 39 +++++++++++++++++++----
 extensions/blocks/slideshow/style.scss    | 22 ++++++++++---
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index c4914f26e478e..902ab78008196 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -40,20 +40,30 @@ function jetpack_slideshow_block_load_assets( $attr, $content ) {
 function jetpack_slideshow_block_render_amp( $attr ) {
 	global $wp_block_jetpack_slideshow_id;
 	$wp_block_jetpack_slideshow_id = ( $wp_block_jetpack_slideshow_id || 0 ) + 1;
-	$amp_carousel_id               = sprintf(
+
+	$block_id = sprintf(
 		'wp-block-jetpack-slideshow__%s',
 		intval( $wp_block_jetpack_slideshow_id )
 	);
 
-	$ids        = empty( $attr['ids'] ) ? array() : $attr['ids'];
-	$autoplay   = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
-	$delay      = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
-	$align      = isset( $attr['align'] ) ? $attr['align'] : 'center';
-	$classes    = array(
+	$amp_carousel_id = sprintf(
+		'wp-block-jetpack-slideshow__amp_carousel_%s',
+		intval( $wp_block_jetpack_slideshow_id )
+	);
+
+	$ids      = empty( $attr['ids'] ) ? array() : $attr['ids'];
+	$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
+	$delay    = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
+	$align    = isset( $attr['align'] ) ? $attr['align'] : 'center';
+	$classes  = array(
 		'wp-block-jetpack-slideshow',
 		'wp-amp-block',
 		'align' . $align,
 	);
+	if ( $autoplay ) {
+		$classes[] = 'wp-block-jetpack-slideshow__autoplay';
+		$classes[] = 'wp-block-jetpack-slideshow__autoplay-playing';
+	}
 	$slides     = array_map(
 		function( $id ) {
 			$caption    = wp_get_attachment_caption( $id );
@@ -94,10 +104,25 @@ function( $index ) use ( $amp_carousel_id ) {
 		implode( '', $slides )
 	);
 
+	$autoplay_pause = sprintf(
+		'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-pause" role="button" on="tap:%s.toggleAutoplay(toggleOn=false),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=false)"></a>',
+		esc_attr__( 'Pause Slideshow', 'jetpack' ),
+		esc_attr( $amp_carousel_id ),
+		esc_attr( $block_id )
+	);
+	$autoplay_play  = sprintf(
+		'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-play" role="button" on="tap:%s.toggleAutoplay(toggleOn=true),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=true)"></a>',
+		esc_attr__( 'Play Slideshow', 'jetpack' ),
+		esc_attr( $amp_carousel_id ),
+		esc_attr( $block_id )
+	);
+
 	return sprintf(
-		'<div class="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s</div></div>',
+		'<div class="%s" id="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s%s</div></div>',
 		esc_attr( implode( $classes, ' ' ) ),
+		esc_attr( $block_id ),
 		$carousel,
+		$autoplay ? $autoplay_pause . $autoplay_play : '',
 		$pagination
 	);
 }
diff --git a/extensions/blocks/slideshow/style.scss b/extensions/blocks/slideshow/style.scss
index 0ca3fd7e6c64f..ea457cf931875 100644
--- a/extensions/blocks/slideshow/style.scss
+++ b/extensions/blocks/slideshow/style.scss
@@ -10,8 +10,19 @@
 		outline: 0;
 	}
 
-	&.wp-amp-block > .wp-block-jetpack-slideshow_container {
-		opacity: 1;
+	&.wp-amp-block {
+		& > .wp-block-jetpack-slideshow_container {
+			opacity: 1;
+		}
+	}
+	&.wp-amp-block.wp-block-jetpack-slideshow__autoplay {
+		&.wp-block-jetpack-slideshow__autoplay-playing .wp-block-jetpack-slideshow_button-pause,
+		.wp-block-jetpack-slideshow_button-play {
+			display: block;
+		}
+		&.wp-block-jetpack-slideshow__autoplay-playing .wp-block-jetpack-slideshow_button-play {
+			display: none;
+		}
 	}
 
 	.wp-block-jetpack-slideshow_container {
@@ -64,6 +75,7 @@
 	.wp-block-jetpack-slideshow_button-prev,
 	.wp-block-jetpack-slideshow_button-next,
 	.wp-block-jetpack-slideshow_button-pause,
+	.wp-block-jetpack-slideshow_button-play,
 	.amp-carousel-button {
 		background-color: rgba( 0, 0, 0, 0.5 );
 		background-position: center;
@@ -110,8 +122,9 @@
 		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18%204.12L10.12%2012%2018%2019.88%2015.88%2022l-10-10%2010-10z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
 	}
 
+	.wp-block-jetpack-slideshow_button-play,
 	.wp-block-jetpack-slideshow_button-pause {
-		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z' fill='white'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E" );
+		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2019h4V5H6v14zm8-14v14h4V5h-4z'%20fill='white'/%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3C/svg%3E" );
 		display: none;
 		margin-top: 0;
 		position: absolute;
@@ -120,8 +133,9 @@
 		z-index: 1;
 	}
 
+	.wp-block-jetpack-slideshow_button-play,
 	.wp-block-jetpack-slideshow_autoplay-paused .wp-block-jetpack-slideshow_button-pause {
-		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E" );
+		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%205v14l11-7z'%20fill='white'/%3E%3Cpath%20d='M0 0h24v24H0z'%20fill='none'/%3E%3C/svg%3E" );
 	}
 
 	&[data-autoplay='true'] .wp-block-jetpack-slideshow_button-pause {

From 3cfa9017b5e166a7c2db9a94426079e76f291fb6 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Sun, 29 Sep 2019 15:20:58 -0400
Subject: [PATCH 13/25] Set AMP Carousel dimensions based on the aspect ratio
 of the first image.

---
 extensions/blocks/slideshow/slideshow.php | 24 +++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 902ab78008196..58efbe5d65a64 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -64,16 +64,30 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 		$classes[] = 'wp-block-jetpack-slideshow__autoplay';
 		$classes[] = 'wp-block-jetpack-slideshow__autoplay-playing';
 	}
+	$first_image = wp_get_attachment_metadata( $ids[0] );
+	$width       = $first_image['width'];
+	$height      = $first_image['height'];
+
 	$slides     = array_map(
-		function( $id ) {
+		function( $id ) use ( $width, $height ) {
 			$caption    = wp_get_attachment_caption( $id );
 			$figcaption = $caption ? sprintf(
 				'<figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">%s</figcaption>',
 				wp_kses_post( $caption )
 			) : '';
-			$image      = wp_get_attachment_image( $id, 'large', false, array( 'class' => 'wp-block-jetpack-slideshow_image' ) );
+			$image      = wp_get_attachment_image(
+				$id,
+				[ $width, $height ],
+				false,
+				[
+					'class'      => 'wp-block-jetpack-slideshow_image',
+					'object-fit' => 'contain',
+				]
+			);
 			return sprintf(
-				'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
+				'<div class="wp-block-jetpack-slideshow_slide" width="%s" height="%s"><figure>%s%s</figure></div>',
+				esc_attr( $width ),
+				esc_attr( $height ),
 				$image,
 				$figcaption
 			);
@@ -96,7 +110,9 @@ function( $index ) use ( $amp_carousel_id ) {
 		implode( '', $bullets )
 	);
 	$carousel   = sprintf(
-		'<amp-carousel height="300" width="400" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="%s">%s</amp-carousel>',
+		'<amp-carousel height="%s" width="%s" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="%s">%s</amp-carousel>',
+		esc_attr( $height ),
+		esc_attr( $width ),
 		esc_attr__( 'Next Slide', 'jetpack' ),
 		esc_attr__( 'Previous Slide', 'jetpack' ),
 		$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',

From 6e225a71be4ab0ea0d2513151862e243ea4896c6 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Sun, 29 Sep 2019 15:28:25 -0400
Subject: [PATCH 14/25] Use static variable instead of Global for Slideshow
 block unique ID.

---
 extensions/blocks/slideshow/slideshow.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 58efbe5d65a64..2427dad3c18a7 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -38,8 +38,8 @@ function jetpack_slideshow_block_load_assets( $attr, $content ) {
  * @return string
  */
 function jetpack_slideshow_block_render_amp( $attr ) {
-	global $wp_block_jetpack_slideshow_id;
-	$wp_block_jetpack_slideshow_id = ( $wp_block_jetpack_slideshow_id || 0 ) + 1;
+	static $wp_block_jetpack_slideshow_id = 0;
+	$wp_block_jetpack_slideshow_id++;
 
 	$block_id = sprintf(
 		'wp-block-jetpack-slideshow__%s',

From 63815f20a954a2568c7f3d746a9e5f5a2250eda6 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Sun, 29 Sep 2019 16:09:02 -0400
Subject: [PATCH 15/25] Some refactoring to reduce size of individual
 functions.

---
 extensions/blocks/slideshow/slideshow.php | 116 +++++++++++++---------
 1 file changed, 71 insertions(+), 45 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 2427dad3c18a7..801c347e479a1 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -41,16 +41,6 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 	static $wp_block_jetpack_slideshow_id = 0;
 	$wp_block_jetpack_slideshow_id++;
 
-	$block_id = sprintf(
-		'wp-block-jetpack-slideshow__%s',
-		intval( $wp_block_jetpack_slideshow_id )
-	);
-
-	$amp_carousel_id = sprintf(
-		'wp-block-jetpack-slideshow__amp_carousel_%s',
-		intval( $wp_block_jetpack_slideshow_id )
-	);
-
 	$ids      = empty( $attr['ids'] ) ? array() : $attr['ids'];
 	$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
 	$delay    = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
@@ -59,16 +49,44 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 		'wp-block-jetpack-slideshow',
 		'wp-amp-block',
 		'align' . $align,
+		$autoplay ? 'wp-block-jetpack-slideshow__autoplay' : null,
+		$autoplay ? 'wp-block-jetpack-slideshow__autoplay-playing' : null,
 	);
-	if ( $autoplay ) {
-		$classes[] = 'wp-block-jetpack-slideshow__autoplay';
-		$classes[] = 'wp-block-jetpack-slideshow__autoplay-playing';
-	}
+
 	$first_image = wp_get_attachment_metadata( $ids[0] );
-	$width       = $first_image['width'];
-	$height      = $first_image['height'];
 
-	$slides     = array_map(
+	$amp_carousel = sprintf(
+		'<amp-carousel width="%s" height="%s" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="wp-block-jetpack-slideshow__amp_carousel_%s">%s</amp-carousel>',
+		esc_attr( $first_image['width'] ),
+		esc_attr( $first_image['height'] ),
+		esc_attr__( 'Next Slide', 'jetpack' ),
+		esc_attr__( 'Previous Slide', 'jetpack' ),
+		$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',
+		esc_attr( $wp_block_jetpack_slideshow_id ),
+		implode( '', jetpack_slideshow_block_slides( $ids, $first_image['width'], $first_image['height'] ) )
+	);
+
+	return sprintf(
+		'<div class="%s" id="wp-block-jetpack-slideshow__%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s<div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination">%s</div></div></div>',
+		esc_attr( implode( $classes, ' ' ) ),
+		esc_attr( $wp_block_jetpack_slideshow_id ),
+		$amp_carousel,
+		$autoplay ? jetpack_slideshow_block_autoplay_ui( $wp_block_jetpack_slideshow_id ) : '',
+		implode( '', jetpack_slideshow_block_bullets( $ids, $wp_block_jetpack_slideshow_id ) )
+	);
+}
+
+/**
+ * Generate array of slides markup
+ *
+ * @param array $ids Array of image ids.
+ * @param int   $width Width of the container.
+ * @param int   $height Height of the container.
+ *
+ * @return array Array of slides markup.
+ */
+function jetpack_slideshow_block_slides( $ids = [], $width = 400, $height = 300 ) {
+	return array_map(
 		function( $id ) use ( $width, $height ) {
 			$caption    = wp_get_attachment_caption( $id );
 			$figcaption = $caption ? sprintf(
@@ -85,16 +103,29 @@ function( $id ) use ( $width, $height ) {
 				]
 			);
 			return sprintf(
-				'<div class="wp-block-jetpack-slideshow_slide" width="%s" height="%s"><figure>%s%s</figure></div>',
-				esc_attr( $width ),
-				esc_attr( $height ),
+				'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
 				$image,
 				$figcaption
 			);
 		},
 		$ids
 	);
-	$bullets    = array_map(
+}
+
+/**
+ * Generate array of bullets markup
+ *
+ * @param array $ids Array of image ids.
+ * @param int   $block_ordinal The ordinal number of the block, used in unique ID.
+ *
+ * @return array Array of bullets markup.
+ */
+function jetpack_slideshow_block_bullets( $ids = [], $block_ordinal = 0 ) {
+	$amp_carousel_id = sprintf(
+		'wp-block-jetpack-slideshow__amp_carousel_%s',
+		intval( $block_ordinal )
+	);
+	return array_map(
 		function( $index ) use ( $amp_carousel_id ) {
 			return sprintf(
 				'<button class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide %s" on="tap:%s.goToSlide(index=%s)"></button>',
@@ -105,40 +136,35 @@ function( $index ) use ( $amp_carousel_id ) {
 		},
 		array_keys( $ids )
 	);
-	$pagination = sprintf(
-		'<div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination">%s</div>',
-		implode( '', $bullets )
+}
+
+/**
+ * Generate autoplay play/pause UI.
+ *
+ * @param int $block_ordinal The ordinal number of the block, used in unique ID.
+ *
+ * @return string Autoplay UI markup.
+ */
+function jetpack_slideshow_block_autoplay_ui( $block_ordinal = 0 ) {
+	$block_id        = sprintf(
+		'wp-block-jetpack-slideshow__%s',
+		intval( $block_ordinal )
 	);
-	$carousel   = sprintf(
-		'<amp-carousel height="%s" width="%s" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="%s">%s</amp-carousel>',
-		esc_attr( $height ),
-		esc_attr( $width ),
-		esc_attr__( 'Next Slide', 'jetpack' ),
-		esc_attr__( 'Previous Slide', 'jetpack' ),
-		$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',
-		esc_attr( $amp_carousel_id ),
-		implode( '', $slides )
+	$amp_carousel_id = sprintf(
+		'wp-block-jetpack-slideshow__amp_carousel_%s',
+		intval( $block_ordinal )
 	);
-
-	$autoplay_pause = sprintf(
+	$autoplay_pause  = sprintf(
 		'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-pause" role="button" on="tap:%s.toggleAutoplay(toggleOn=false),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=false)"></a>',
 		esc_attr__( 'Pause Slideshow', 'jetpack' ),
 		esc_attr( $amp_carousel_id ),
 		esc_attr( $block_id )
 	);
-	$autoplay_play  = sprintf(
+	$autoplay_play   = sprintf(
 		'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-play" role="button" on="tap:%s.toggleAutoplay(toggleOn=true),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=true)"></a>',
 		esc_attr__( 'Play Slideshow', 'jetpack' ),
 		esc_attr( $amp_carousel_id ),
 		esc_attr( $block_id )
 	);
-
-	return sprintf(
-		'<div class="%s" id="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s%s</div></div>',
-		esc_attr( implode( $classes, ' ' ) ),
-		esc_attr( $block_id ),
-		$carousel,
-		$autoplay ? $autoplay_pause . $autoplay_play : '',
-		$pagination
-	);
+	return $autoplay_pause . $autoplay_play;
 }

From 3e8b9919fced8f9be8e7726785653d18a8445628 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Sun, 29 Sep 2019 16:29:30 -0400
Subject: [PATCH 16/25] Further refactoring to reduce function length.

---
 extensions/blocks/slideshow/slideshow.php | 40 ++++++++++++++---------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 801c347e479a1..61b9c2e094607 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -43,37 +43,47 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 
 	$ids      = empty( $attr['ids'] ) ? array() : $attr['ids'];
 	$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
-	$delay    = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
-	$align    = isset( $attr['align'] ) ? $attr['align'] : 'center';
 	$classes  = array(
 		'wp-block-jetpack-slideshow',
 		'wp-amp-block',
-		'align' . $align,
+		'align' . isset( $attr['align'] ) ? $attr['align'] : 'center',
 		$autoplay ? 'wp-block-jetpack-slideshow__autoplay' : null,
 		$autoplay ? 'wp-block-jetpack-slideshow__autoplay-playing' : null,
 	);
 
-	$first_image = wp_get_attachment_metadata( $ids[0] );
+	return sprintf(
+		'<div class="%s" id="wp-block-jetpack-slideshow__%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s<div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination">%s</div></div></div>',
+		esc_attr( implode( $classes, ' ' ) ),
+		esc_attr( $wp_block_jetpack_slideshow_id ),
+		jetpack_slideshow_block_amp_carousel( $attr, $wp_block_jetpack_slideshow_id ),
+		$autoplay ? jetpack_slideshow_block_autoplay_ui( $wp_block_jetpack_slideshow_id ) : '',
+		implode( '', jetpack_slideshow_block_bullets( $ids, $wp_block_jetpack_slideshow_id ) )
+	);
+}
 
-	$amp_carousel = sprintf(
+/**
+ * Generate amp-carousel markup
+ *
+ * @param array $attr Array of block attributes.
+ * @param int   $block_ordinal The ordinal number of the block, used in unique ID.
+ *
+ * @return string amp-carousel markup.
+ */
+function jetpack_slideshow_block_amp_carousel( $attr, $block_ordinal ) {
+	$ids         = empty( $attr['ids'] ) ? array() : $attr['ids'];
+	$first_image = wp_get_attachment_metadata( $ids[0] );
+	$delay       = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
+	$autoplay    = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
+	return sprintf(
 		'<amp-carousel width="%s" height="%s" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="wp-block-jetpack-slideshow__amp_carousel_%s">%s</amp-carousel>',
 		esc_attr( $first_image['width'] ),
 		esc_attr( $first_image['height'] ),
 		esc_attr__( 'Next Slide', 'jetpack' ),
 		esc_attr__( 'Previous Slide', 'jetpack' ),
 		$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',
-		esc_attr( $wp_block_jetpack_slideshow_id ),
+		esc_attr( $block_ordinal ),
 		implode( '', jetpack_slideshow_block_slides( $ids, $first_image['width'], $first_image['height'] ) )
 	);
-
-	return sprintf(
-		'<div class="%s" id="wp-block-jetpack-slideshow__%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s<div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination">%s</div></div></div>',
-		esc_attr( implode( $classes, ' ' ) ),
-		esc_attr( $wp_block_jetpack_slideshow_id ),
-		$amp_carousel,
-		$autoplay ? jetpack_slideshow_block_autoplay_ui( $wp_block_jetpack_slideshow_id ) : '',
-		implode( '', jetpack_slideshow_block_bullets( $ids, $wp_block_jetpack_slideshow_id ) )
-	);
 }
 
 /**

From c7964a8b184aef5c70221f27bebc5979822e0fa8 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Sun, 29 Sep 2019 16:31:19 -0400
Subject: [PATCH 17/25] Remove negative top margin for next/prev buttons in AMP
 requests.

---
 extensions/blocks/slideshow/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/extensions/blocks/slideshow/style.scss b/extensions/blocks/slideshow/style.scss
index ea457cf931875..b068411659533 100644
--- a/extensions/blocks/slideshow/style.scss
+++ b/extensions/blocks/slideshow/style.scss
@@ -101,6 +101,10 @@
 		}
 	}
 
+	.amp-carousel-button {
+		margin: 0;
+	}
+
 	.wp-block-jetpack-slideshow_button-prev,
 	.wp-block-jetpack-slideshow_button-next {
 		display: none;

From 64107c74dab5653099f48d952d7671d2590a2d88 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Sun, 29 Sep 2019 23:22:00 -0400
Subject: [PATCH 18/25] Selected state for Slideshow block bullets in AMP
 requests.

---
 extensions/blocks/slideshow/slideshow.php | 28 +++++++++++++----------
 extensions/blocks/slideshow/style.scss    |  1 +
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 61b9c2e094607..1c84376028db9 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -52,12 +52,12 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 	);
 
 	return sprintf(
-		'<div class="%s" id="wp-block-jetpack-slideshow__%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s<div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination">%s</div></div></div>',
+		'<div class="%s" id="wp-block-jetpack-slideshow__%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s%s</div></div>',
 		esc_attr( implode( $classes, ' ' ) ),
 		esc_attr( $wp_block_jetpack_slideshow_id ),
 		jetpack_slideshow_block_amp_carousel( $attr, $wp_block_jetpack_slideshow_id ),
 		$autoplay ? jetpack_slideshow_block_autoplay_ui( $wp_block_jetpack_slideshow_id ) : '',
-		implode( '', jetpack_slideshow_block_bullets( $ids, $wp_block_jetpack_slideshow_id ) )
+		jetpack_slideshow_block_bullets( $ids, $wp_block_jetpack_slideshow_id )
 	);
 }
 
@@ -75,13 +75,14 @@ function jetpack_slideshow_block_amp_carousel( $attr, $block_ordinal ) {
 	$delay       = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
 	$autoplay    = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
 	return sprintf(
-		'<amp-carousel width="%s" height="%s" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="wp-block-jetpack-slideshow__amp_carousel_%s">%s</amp-carousel>',
+		'<amp-carousel width="%s" height="%s" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="wp-block-jetpack-slideshow__amp-carousel__%s" on="slideChange:wp-block-jetpack-slideshow__amp-pagination__%s.toggle(index=event.index, value=true)">%s</amp-carousel>',
 		esc_attr( $first_image['width'] ),
 		esc_attr( $first_image['height'] ),
 		esc_attr__( 'Next Slide', 'jetpack' ),
 		esc_attr__( 'Previous Slide', 'jetpack' ),
 		$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',
 		esc_attr( $block_ordinal ),
+		esc_attr( $block_ordinal ),
 		implode( '', jetpack_slideshow_block_slides( $ids, $first_image['width'], $first_image['height'] ) )
 	);
 }
@@ -131,21 +132,24 @@ function( $id ) use ( $width, $height ) {
  * @return array Array of bullets markup.
  */
 function jetpack_slideshow_block_bullets( $ids = [], $block_ordinal = 0 ) {
-	$amp_carousel_id = sprintf(
-		'wp-block-jetpack-slideshow__amp_carousel_%s',
-		intval( $block_ordinal )
-	);
-	return array_map(
-		function( $index ) use ( $amp_carousel_id ) {
+	$buttons = array_map(
+		function( $index ) {
 			return sprintf(
-				'<button class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide %s" on="tap:%s.goToSlide(index=%s)"></button>',
+				'<button option="%s" class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide %s" %s></button>',
+				esc_attr( $index ),
 				( $index + 1 ),
-				esc_attr( $amp_carousel_id ),
-				$index
+				0 === $index ? 'selected' : ''
 			);
 		},
 		array_keys( $ids )
 	);
+
+	return sprintf(
+		'<amp-selector id="wp-block-jetpack-slideshow__amp-pagination__%s" class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination" on="select:wp-block-jetpack-slideshow__amp-carousel__%s.goToSlide(index=event.targetOption)" layout="container">%s</amp-selector>',
+		esc_attr( $block_ordinal ),
+		esc_attr( $block_ordinal ),
+		implode( '', $buttons )
+	);
 }
 
 /**
diff --git a/extensions/blocks/slideshow/style.scss b/extensions/blocks/slideshow/style.scss
index b068411659533..ac520a7849af2 100644
--- a/extensions/blocks/slideshow/style.scss
+++ b/extensions/blocks/slideshow/style.scss
@@ -196,6 +196,7 @@
 			}
 		}
 
+		.swiper-pagination-bullet[selected],
 		.swiper-pagination-bullet-active {
 			background-color: currentColor;
 			opacity: 1;

From adeb84e6368d65311c339b6c121695c1527ccd5a Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Mon, 30 Sep 2019 07:56:53 -0400
Subject: [PATCH 19/25] Remove short array syntax.

---
 extensions/blocks/slideshow/slideshow.php | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 1c84376028db9..643f1a3f1475c 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -96,7 +96,7 @@ function jetpack_slideshow_block_amp_carousel( $attr, $block_ordinal ) {
  *
  * @return array Array of slides markup.
  */
-function jetpack_slideshow_block_slides( $ids = [], $width = 400, $height = 300 ) {
+function jetpack_slideshow_block_slides( $ids = array(), $width = 400, $height = 300 ) {
 	return array_map(
 		function( $id ) use ( $width, $height ) {
 			$caption    = wp_get_attachment_caption( $id );
@@ -106,12 +106,12 @@ function( $id ) use ( $width, $height ) {
 			) : '';
 			$image      = wp_get_attachment_image(
 				$id,
-				[ $width, $height ],
+				array( $width, $height ),
 				false,
-				[
+				array(
 					'class'      => 'wp-block-jetpack-slideshow_image',
 					'object-fit' => 'contain',
-				]
+				)
 			);
 			return sprintf(
 				'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>',
@@ -131,7 +131,7 @@ function( $id ) use ( $width, $height ) {
  *
  * @return array Array of bullets markup.
  */
-function jetpack_slideshow_block_bullets( $ids = [], $block_ordinal = 0 ) {
+function jetpack_slideshow_block_bullets( $ids = array(), $block_ordinal = 0 ) {
 	$buttons = array_map(
 		function( $index ) {
 			return sprintf(

From 9f5952fe5e556fc8ad120d11a8495544d0f7699a Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Mon, 30 Sep 2019 07:58:17 -0400
Subject: [PATCH 20/25] Bug fix: incorrect element ID used in autoplay
 pause/play buttons.

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

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 643f1a3f1475c..14e7b1e983454 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -165,7 +165,7 @@ function jetpack_slideshow_block_autoplay_ui( $block_ordinal = 0 ) {
 		intval( $block_ordinal )
 	);
 	$amp_carousel_id = sprintf(
-		'wp-block-jetpack-slideshow__amp_carousel_%s',
+		'wp-block-jetpack-slideshow__amp-carousel__%s',
 		intval( $block_ordinal )
 	);
 	$autoplay_pause  = sprintf(

From e4c02deb60601a388ec2f70786a39e451ce4390c Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Mon, 30 Sep 2019 08:19:52 -0400
Subject: [PATCH 21/25] Improvements to formatted string statements.

---
 extensions/blocks/slideshow/slideshow.php | 24 +++++++++++------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 14e7b1e983454..6fc90eef8431a 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -52,9 +52,9 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 	);
 
 	return sprintf(
-		'<div class="%s" id="wp-block-jetpack-slideshow__%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s%s</div></div>',
+		'<div class="%1$s" id="wp-block-jetpack-slideshow__%2$d"><div class="wp-block-jetpack-slideshow_container swiper-container">%3$s%4$s%5$s</div></div>',
 		esc_attr( implode( $classes, ' ' ) ),
-		esc_attr( $wp_block_jetpack_slideshow_id ),
+		absint( $wp_block_jetpack_slideshow_id ),
 		jetpack_slideshow_block_amp_carousel( $attr, $wp_block_jetpack_slideshow_id ),
 		$autoplay ? jetpack_slideshow_block_autoplay_ui( $wp_block_jetpack_slideshow_id ) : '',
 		jetpack_slideshow_block_bullets( $ids, $wp_block_jetpack_slideshow_id )
@@ -72,17 +72,16 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 function jetpack_slideshow_block_amp_carousel( $attr, $block_ordinal ) {
 	$ids         = empty( $attr['ids'] ) ? array() : $attr['ids'];
 	$first_image = wp_get_attachment_metadata( $ids[0] );
-	$delay       = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
+	$delay       = empty( $attr['delay'] ) ? 3 : absint( $attr['delay'] );
 	$autoplay    = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
 	return sprintf(
-		'<amp-carousel width="%s" height="%s" layout="responsive" type="slides" data-next-button-aria-label="%s" data-prev-button-aria-label="%s" controls loop %s id="wp-block-jetpack-slideshow__amp-carousel__%s" on="slideChange:wp-block-jetpack-slideshow__amp-pagination__%s.toggle(index=event.index, value=true)">%s</amp-carousel>',
+		'<amp-carousel width="%1$d" height="%2$d" layout="responsive" type="slides" data-next-button-aria-label="%3$s" data-prev-button-aria-label="%4$s" controls loop %5$s id="wp-block-jetpack-slideshow__amp-carousel__%6$s" on="slideChange:wp-block-jetpack-slideshow__amp-pagination__%6$s.toggle(index=event.index, value=true)">%7$s</amp-carousel>',
 		esc_attr( $first_image['width'] ),
 		esc_attr( $first_image['height'] ),
 		esc_attr__( 'Next Slide', 'jetpack' ),
 		esc_attr__( 'Previous Slide', 'jetpack' ),
 		$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',
-		esc_attr( $block_ordinal ),
-		esc_attr( $block_ordinal ),
+		absint( $block_ordinal ),
 		implode( '', jetpack_slideshow_block_slides( $ids, $first_image['width'], $first_image['height'] ) )
 	);
 }
@@ -145,9 +144,8 @@ function( $index ) {
 	);
 
 	return sprintf(
-		'<amp-selector id="wp-block-jetpack-slideshow__amp-pagination__%s" class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination" on="select:wp-block-jetpack-slideshow__amp-carousel__%s.goToSlide(index=event.targetOption)" layout="container">%s</amp-selector>',
-		esc_attr( $block_ordinal ),
-		esc_attr( $block_ordinal ),
+		'<amp-selector id="wp-block-jetpack-slideshow__amp-pagination__%1$d" class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination" on="select:wp-block-jetpack-slideshow__amp-carousel__%1$d.goToSlide(index=event.targetOption)" layout="container">%2$s</amp-selector>',
+		absint( $block_ordinal ),
 		implode( '', $buttons )
 	);
 }
@@ -161,12 +159,12 @@ function( $index ) {
  */
 function jetpack_slideshow_block_autoplay_ui( $block_ordinal = 0 ) {
 	$block_id        = sprintf(
-		'wp-block-jetpack-slideshow__%s',
-		intval( $block_ordinal )
+		'wp-block-jetpack-slideshow__%d',
+		absint( $block_ordinal )
 	);
 	$amp_carousel_id = sprintf(
-		'wp-block-jetpack-slideshow__amp-carousel__%s',
-		intval( $block_ordinal )
+		'wp-block-jetpack-slideshow__amp-carousel__%d',
+		absint( $block_ordinal )
 	);
 	$autoplay_pause  = sprintf(
 		'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-pause" role="button" on="tap:%s.toggleAutoplay(toggleOn=false),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=false)"></a>',

From 80e89e1f869c71e5e995be4fa839a40641a75557 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Mon, 30 Sep 2019 08:32:32 -0400
Subject: [PATCH 22/25] Escaping improvements for Slideshow block bullets.

---
 extensions/blocks/slideshow/slideshow.php | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 6fc90eef8431a..c48bfd9d2c604 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -134,9 +134,10 @@ function jetpack_slideshow_block_bullets( $ids = array(), $block_ordinal = 0 ) {
 	$buttons = array_map(
 		function( $index ) {
 			return sprintf(
-				'<button option="%s" class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide %s" %s></button>',
-				esc_attr( $index ),
-				( $index + 1 ),
+				'<button option="%d" class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="%s %d" %s></button>',
+				absint( $index ),
+				esc_attr__( 'Go to slide', 'jetpack' ),
+				absint( $index + 1 ),
 				0 === $index ? 'selected' : ''
 			);
 		},

From 4cd61904a7c6139a02662a3b7d2df0eb98af6553 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Mon, 30 Sep 2019 08:37:21 -0400
Subject: [PATCH 23/25] Check for existence of image dimensions, use 800x600 as
 fallback.

---
 extensions/blocks/slideshow/slideshow.php | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index c48bfd9d2c604..b739e7744dac7 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -74,15 +74,17 @@ function jetpack_slideshow_block_amp_carousel( $attr, $block_ordinal ) {
 	$first_image = wp_get_attachment_metadata( $ids[0] );
 	$delay       = empty( $attr['delay'] ) ? 3 : absint( $attr['delay'] );
 	$autoplay    = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
+	$width       = empty( $first_image['width'] ) ? 800 : $first_image['width'];
+	$height      = empty( $first_image['height'] ) ? 600 : $first_image['height'];
 	return sprintf(
 		'<amp-carousel width="%1$d" height="%2$d" layout="responsive" type="slides" data-next-button-aria-label="%3$s" data-prev-button-aria-label="%4$s" controls loop %5$s id="wp-block-jetpack-slideshow__amp-carousel__%6$s" on="slideChange:wp-block-jetpack-slideshow__amp-pagination__%6$s.toggle(index=event.index, value=true)">%7$s</amp-carousel>',
-		esc_attr( $first_image['width'] ),
-		esc_attr( $first_image['height'] ),
+		esc_attr( $width ),
+		esc_attr( $height ),
 		esc_attr__( 'Next Slide', 'jetpack' ),
 		esc_attr__( 'Previous Slide', 'jetpack' ),
 		$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '',
 		absint( $block_ordinal ),
-		implode( '', jetpack_slideshow_block_slides( $ids, $first_image['width'], $first_image['height'] ) )
+		implode( '', jetpack_slideshow_block_slides( $ids, $width, $height ) )
 	);
 }
 

From 15ab41803d51ec0d3f2f186ee956c3deccfd6dd6 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Mon, 30 Sep 2019 08:43:33 -0400
Subject: [PATCH 24/25] Use Jetpack_Gutenberg's block_classes to generate block
 class list.

---
 extensions/blocks/slideshow/slideshow.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index b739e7744dac7..7270ac3463e8d 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -43,17 +43,17 @@ function jetpack_slideshow_block_render_amp( $attr ) {
 
 	$ids      = empty( $attr['ids'] ) ? array() : $attr['ids'];
 	$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
-	$classes  = array(
-		'wp-block-jetpack-slideshow',
+
+	$extras  = array(
 		'wp-amp-block',
-		'align' . isset( $attr['align'] ) ? $attr['align'] : 'center',
 		$autoplay ? 'wp-block-jetpack-slideshow__autoplay' : null,
 		$autoplay ? 'wp-block-jetpack-slideshow__autoplay-playing' : null,
 	);
+	$classes = Jetpack_Gutenberg::block_classes( 'slideshow', $attr, $extras );
 
 	return sprintf(
 		'<div class="%1$s" id="wp-block-jetpack-slideshow__%2$d"><div class="wp-block-jetpack-slideshow_container swiper-container">%3$s%4$s%5$s</div></div>',
-		esc_attr( implode( $classes, ' ' ) ),
+		esc_attr( $classes ),
 		absint( $wp_block_jetpack_slideshow_id ),
 		jetpack_slideshow_block_amp_carousel( $attr, $wp_block_jetpack_slideshow_id ),
 		$autoplay ? jetpack_slideshow_block_autoplay_ui( $wp_block_jetpack_slideshow_id ) : '',

From 9fcd5eb0c3b212f2fd6ca0e230d67fb11c098599 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 1 Oct 2019 07:29:35 -0400
Subject: [PATCH 25/25] Improved approach to translating bullet ARIA labels.

---
 extensions/blocks/slideshow/slideshow.php | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/extensions/blocks/slideshow/slideshow.php b/extensions/blocks/slideshow/slideshow.php
index 7270ac3463e8d..ba18661c881c5 100644
--- a/extensions/blocks/slideshow/slideshow.php
+++ b/extensions/blocks/slideshow/slideshow.php
@@ -135,11 +135,15 @@ function( $id ) use ( $width, $height ) {
 function jetpack_slideshow_block_bullets( $ids = array(), $block_ordinal = 0 ) {
 	$buttons = array_map(
 		function( $index ) {
+			$aria_label = sprintf(
+				/* translators: %d: Slide number. */
+				__( 'Go to slide %d', 'jetpack' ),
+				absint( $index + 1 )
+			);
 			return sprintf(
-				'<button option="%d" class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="%s %d" %s></button>',
+				'<button option="%d" class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="%s" %s></button>',
 				absint( $index ),
-				esc_attr__( 'Go to slide', 'jetpack' ),
-				absint( $index + 1 ),
+				esc_attr( $aria_label ),
 				0 === $index ? 'selected' : ''
 			);
 		},