Enable captions on Gallery shortcodes

composer.json

@@ -33,6 +33,7 @@
     "ext-zip": "Enables the use of ZipArchive to export AMP Stories."
   },
   "config": {
+    "optimize-autoloader": true,
     "platform": {
       "php": "5.4"
     },
@@ -44,5 +45,10 @@
         "PHP-CSS-Parser: Fix parsing CSS selectors which contain commas <https://github.com/sabberworm/PHP-CSS-Parser/pull/138>": "https://github.com/sabberworm/PHP-CSS-Parser/commit/fa139f65c5b098ae652c970b25e6eb03fc495eb4.diff"
       }
     }
+  },
+  "autoload": {
+    "psr-4": {
+      "AMP\\": "includes/amp/"
+    }
   }
 }

includes/amp/class-captioned-image.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Class Captioned_Image
+ *
+ * @package AMP
+ */
+
+namespace AMP;
+
+/**
+ * Class Captioned_Image
+ *
+ * @since 1.5.0
+ * @internal
+ */
+final class Captioned_Image extends Image implements Has_Caption {
+
+	/**
+	 * The caption text.
+	 *
+	 * @var string
+	 */
+	private $caption;
+
+	/**
+	 * Constructs the class.
+	 *
+	 * @param \DOMElement $image_node The image node.
+	 * @param string      $caption    The caption text.
+	 */
+	public function __construct( \DOMElement $image_node, $caption ) {
+		parent::__construct( $image_node );
+		$this->caption = $caption;
+	}
+
+	/**
+	 * Gets the caption text.
+	 *
+	 * @return string The caption text.
+	 */
+	public function get_caption() {
+		return $this->caption;
+	}
+}

includes/amp/class-has-caption.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Interface Has_Caption
+ *
+ * @package AMP
+ */
+
+namespace AMP;
+
+/**
+ * Interface Has_Caption
+ *
+ * @since 1.5.0
+ * @internal
+ */
+interface Has_Caption {
+	/**
+	 * Gets the caption.
+	 *
+	 * @return string The caption text.
+	 */
+	public function get_caption();
+}

includes/amp/class-image-list.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Class Image_List
+ *
+ * @package AMP
+ */
+
+namespace AMP;
+
+/**
+ * Class Image_List
+ *
+ * @since 1.5.0
+ * @internal
+ */
+final class Image_List implements \IteratorAggregate, \Countable {
+
+	/**
+	 * The captioned images.
+	 *
+	 * @var Captioned_Image[]
+	 */
+	private $elements = [];
+
+	/**
+	 * Adds an image to the list.
+	 *
+	 * @param \DOMElement $image_node The image to add.
+	 * @param string      $caption    The caption to add.
+	 * @return self
+	 */
+	public function add( \DOMElement $image_node, $caption = '' ) {
+		$this->elements[] = empty( $caption ) ? new Image( $image_node ) : new Captioned_Image( $image_node, $caption );
+		return $this;
+	}
+
+	/**
+	 * Gets an iterator with the elements.
+	 *
+	 * This together with the IteratorAggregate turns the object into a "Traversable",
+	 * so you can just foreach over it and receive its elements in the correct type.
+	 *
+	 * @return \ArrayIterator An iterator with the elements.
+	 */
+	public function getIterator() {
+		return new \ArrayIterator( $this->elements );
+	}
+
+	/**
+	 * Gets the count of the images.
+	 *
+	 * @return int The number of images.
+	 */
+	public function count() {
+		return count( $this->elements );
+	}
+}

includes/amp/class-image.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Class Image
+ *
+ * @package AMP
+ */
+
+namespace AMP;
+
+/**
+ * Class Image
+ *
+ * @since 1.5.0
+ * @internal
+ */
+class Image {
+
+	/**
+	 * The image node.
+	 *
+	 * @var \DOMElement
+	 */
+	protected $image_node;
+
+	/**
+	 * Constructs the class.
+	 *
+	 * @param \DOMElement $image_node The image node.
+	 */
+	public function __construct( \DOMElement $image_node ) {
+		$this->image_node = $image_node;
+	}
+
+	/**
+	 * Gets the image.
+	 *
+	 * @return \DOMElement
+	 */
+	public function get_image_node() {
+		return $this->image_node;
+	}
+}

includes/class-amp-autoloader.php

@@ -96,6 +96,7 @@ class AMP_Autoloader {
 		'AMP_Content'                        => 'includes/templates/class-amp-content',
 		'AMP_Content_Sanitizer'              => 'includes/templates/class-amp-content-sanitizer',
 		'AMP_Post_Template'                  => 'includes/templates/class-amp-post-template',
+		'AMP_Carousel'                       => 'includes/utils/class-amp-carousel',
 		'AMP_DOM_Utils'                      => 'includes/utils/class-amp-dom-utils',
 		'AMP_HTML_Utils'                     => 'includes/utils/class-amp-html-utils',
 		'AMP_Image_Dimension_Extractor'      => 'includes/utils/class-amp-image-dimension-extractor',

includes/embeds/class-amp-gallery-embed.php

@@ -5,6 +5,8 @@
  * @package AMP
  */
 
+use AMP\Image_List;
+
 /**
  * Class AMP_Gallery_Embed_Handler
  *
@@ -129,25 +131,14 @@ public function shortcode( $attr ) {
 				'width'  => $width,
 				'height' => $height,
 				'alt'    => trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ), // Logic from wp_get_attachment_image().
+				'id'     => $attachment_id,
 			];
 		}
 
 		$args = [
-			'images' => $urls,
+			'images'   => $urls,
+			'lightbox' => ! empty( $atts['lightbox'] ),
 		];
-		if ( ! empty( $atts['lightbox'] ) ) {
-			$args['lightbox'] = true;
-			$lightbox_tag     = AMP_HTML_Utils::build_tag(
-				'amp-image-lightbox',
-				[
-					'id'                           => AMP_Base_Sanitizer::AMP_IMAGE_LIGHTBOX_ID,
-					'layout'                       => 'nodisplay',
-					'data-close-button-aria-label' => __( 'Close', 'amp' ),
-				]
-			);
-			/* We need to add lightbox tag, too. @todo Could there be a better alternative for this? */
-			return $this->render( $args ) . $lightbox_tag;
-		}
 
 		return $this->render( $args );
 	}
@@ -211,6 +202,7 @@ public function maybe_override_gallery( $html, $attributes ) {
 	 * @return string Rendered.
 	 */
 	public function render( $args ) {
+		$dom                        = new DOMDocument();
 		$this->did_convert_elements = true;
 
 		$args = wp_parse_args(
@@ -224,11 +216,7 @@ public function render( $args ) {
 			return '';
 		}
 
-		$max_aspect_ratio = 0;
-		$carousel_width   = 0;
-		$carousel_height  = 0;
-
-		$images = [];
+		$images = new Image_List();
 		foreach ( $args['images'] as $props ) {
 			$image_atts = [
 				'src'    => $props['url'],
@@ -241,47 +229,38 @@ public function render( $args ) {
 				$image_atts['srcset'] = $props['srcset'];
 			}
 
-			$this_aspect_ratio = $props['width'] / $props['height'];
-			if ( $this_aspect_ratio > $max_aspect_ratio ) {
-				$max_aspect_ratio = $this_aspect_ratio;
-				$carousel_width   = $props['width'];
-				$carousel_height  = $props['height'];
-			}
-
 			if ( ! empty( $args['lightbox'] ) ) {
 				$image_atts['lightbox'] = '';
-				$image_atts['on']       = 'tap:' . AMP_Img_Sanitizer::AMP_IMAGE_LIGHTBOX_ID;
-				$image_atts['role']     = 'button';
-				$image_atts['tabindex'] = 0;
 			}
-			$image = AMP_HTML_Utils::build_tag(
+			$image = AMP_DOM_Utils::create_node(
+				$dom,
 				'amp-img',
 				$image_atts
 			);
 
 			if ( ! empty( $props['href'] ) ) {
-				$image = AMP_HTML_Utils::build_tag(
+				$previous_image = $image;
+				$image          = AMP_DOM_Utils::create_node(
+					$dom,
 					'a',
 					[
 						'href' => $props['href'],
-					],
-					$image
+					]
 				);
+				$image->appendChild( $previous_image );
 			}
 
-			$images[] = $image;
+			$caption = isset( $props['id'] ) ? wp_get_attachment_caption( $props['id'] ) : '';
+			$images->add( $image, $caption );
 		}
 
-		return AMP_HTML_Utils::build_tag(
-			'amp-carousel',
-			[
-				'width'  => $carousel_width,
-				'height' => $carousel_height,
-				'type'   => 'slides',
-				'layout' => 'responsive',
-			],
-			implode( PHP_EOL, $images )
-		);
+		$amp_carousel  = new AMP_Carousel( $dom );
+		$carousel_node = $amp_carousel->create_and_get( $images );
+
+		// Prevent an error in get_content_from_dom_node() when it calls $node->parentNode->insertBefore().
+		$dom->appendChild( $carousel_node );
+
+		return AMP_DOM_Utils::get_content_from_dom_node( $dom, $carousel_node );
 	}
 
 	/**