[Gutenberg] Add AMP Carousel for Gallery and AMP Lightbox features for Gallery and Image

assets/js/amp-editor-blocks.js

@@ -101,8 +101,8 @@ var ampEditorBlocks = ( function() {
 	 * @return {*} Settings.
 	 */
 	component.addAMPAttributes = function addAMPAttributes( settings, name ) {
-		// Gallery settings for shortcode.
-		if ( 'core/shortcode' === name ) {
+		// AMP Carousel settings.
+		if ( 'core/shortcode' === name || 'core/gallery' === name ) {
 			if ( ! settings.attributes ) {
 				settings.attributes = {};
 			}
@@ -163,6 +163,8 @@ var ampEditorBlocks = ( function() {
 						}, props ) )
 					];
 				}
+			} else if ( 'core/gallery' === name ) {
+				inspectorControls = component.setUpGalleryInpsectorControls( props );
 			} else if ( -1 !== component.data.mediaBlocks.indexOf( name ) || 0 === name.indexOf( 'core-embed/' ) ) {
 				inspectorControls = component.setUpInspectorControls( props );
 			}
@@ -267,6 +269,38 @@ var ampEditorBlocks = ( function() {
 		);
 	};
 
+	/**
+	 * Set up inspector controls for Gallery block.
+	 * Adds ampCarousel attribute for displaying the output as amp-carousel.
+	 *
+	 * @param {Object} props Props.
+	 * @return {*} Inspector controls.
+	 */
+	component.setUpGalleryInpsectorControls = function setUpGalleryInpsectorControls( props ) {
+		var ampCarousel = props.attributes.ampCarousel,
+			isSelected = props.isSelected,
+			el = wp.element.createElement,
+			InspectorControls = wp.blocks.InspectorControls,
+			ToggleControl = wp.components.ToggleControl,
+			PanelBody = wp.components.PanelBody,
+			toggleControl;
+
+		toggleControl = el( ToggleControl, {
+			label: 'Display as AMP carousel',
+			checked: ampCarousel,
+			onChange: function() {
+				props.setAttributes( { ampCarousel: ! ampCarousel } );
+			}
+		} );
+		return isSelected && (
+			el( InspectorControls, { key: 'inspector' },
+				el( PanelBody, { title: 'AMP Settings' },
+					toggleControl
+				)
+			)
+		);
+	};
+
 	/**
 	 * Set up inspector controls for shortcode block.
 	 * Adds ampCarousel attribute in case of gallery shortcode.
@@ -347,13 +381,16 @@ var ampEditorBlocks = ( function() {
 			);
 		}
 
-		// In case AMP Layout, add layout to classname.
+		// In case AMP attributes, add info to classname.
 		if ( component.hasAmpLayoutSet( attributes || '' ) ) {
 			ampClassName += ' amp-layout-' + attributes.ampLayout;
 		}
 		if ( component.hasAmpNoLoadingSet( attributes || '' ) ) {
 			ampClassName += ' amp-noloading';
 		}
+		if ( component.hasAmpCarouselSet( attributes || '' ) ) {
+			ampClassName += ' amp-carousel';
+		}
 
 		if ( '' !== ampClassName && attributes.className !== ampClassName ) {
 			props.className = ampClassName.trim();
@@ -365,6 +402,16 @@ var ampEditorBlocks = ( function() {
 		return element;
 	};
 
+	/**
+	 * Check if AMP Carousel is set.
+	 *
+	 * @param {Object} attributes Attributes.
+	 * @return {boolean} If is set.
+	 */
+	component.hasAmpCarouselSet = function hasAmpCarouselSet( attributes ) {
+		return attributes.ampCarousel && false !== attributes.ampCarousel;
+	};
+
 	/**
 	 * Check if AMP NoLoading is set.
 	 *

includes/admin/class-amp-editor-blocks.php

@@ -49,7 +49,13 @@ public static function filter_rest_pre_insert_post( $prepared_post ) {
 
 				// Get the class of the figure.
 				preg_match( "'<figure class=\"(.*?)\"'si", $block['innerHTML'], $match );
-				if ( ! $match ) {
+
+				// Lets check for gallery block class.
+				if ( empty( $match ) ) {
+					preg_match( "'<ul class=\"(.*?)\"'si", $block['innerHTML'], $match );
+				}
+
+				if ( ! empty( $match ) ) {
 					continue;
 				}
 				$class_names = explode( ' ', $match[1] );
@@ -58,7 +64,7 @@ public static function filter_rest_pre_insert_post( $prepared_post ) {
 					$class_attr[] = $block['attrs']['className'];
 				}
 
-				// Take everything except for the wp-block-{block_type} class.
+				// Take everything with amp-*.
 				foreach ( $class_names as $class_name ) {
 					if ( false !== strpos( $class_name, 'amp-' ) ) {
 						$class_attr[] = $class_name;

includes/amp-helper-functions.php

@@ -484,11 +484,12 @@ function amp_get_content_sanitizers( $post = null ) {
 			'AMP_Comments_Sanitizer'          => array(),
 			'AMP_Video_Sanitizer'             => array(),
 			'AMP_Audio_Sanitizer'             => array(),
-			'AMP_Block_Sanitizer'             => array(),
 			'AMP_Playbuzz_Sanitizer'          => array(),
 			'AMP_Iframe_Sanitizer'            => array(
 				'add_placeholder' => true,
 			),
+			'AMP_Gallery_Block_Sanitizer'     => array(),
+			'AMP_Block_Sanitizer'             => array(), // Note: Block sanitizer must come after embed / media sanitizers since it's logic is using the already sanitized content.
 			'AMP_Style_Sanitizer'             => array(),
 			'AMP_Tag_And_Attribute_Sanitizer' => array(), // Note: This whitelist sanitizer must come at the end to clean up any remaining issues the other sanitizers didn't catch.
 		),

includes/class-amp-autoloader.php

@@ -72,6 +72,7 @@ class AMP_Autoloader {
 		'AMP_Base_Sanitizer'                          => 'includes/sanitizers/class-amp-base-sanitizer',
 		'AMP_Blacklist_Sanitizer'                     => 'includes/sanitizers/class-amp-blacklist-sanitizer',
 		'AMP_Block_Sanitizer'                         => 'includes/sanitizers/class-amp-block-sanitizer',
+		'AMP_Gallery_Block_Sanitizer'                 => 'includes/sanitizers/class-amp-gallery-block-sanitizer',
 		'AMP_Iframe_Sanitizer'                        => 'includes/sanitizers/class-amp-iframe-sanitizer',
 		'AMP_Img_Sanitizer'                           => 'includes/sanitizers/class-amp-img-sanitizer',
 		'AMP_Comments_Sanitizer'                      => 'includes/sanitizers/class-amp-comments-sanitizer',

includes/sanitizers/class-amp-block-sanitizer.php

@@ -47,7 +47,7 @@ public function sanitize() {
 				continue;
 			}
 
-			// We are looking for <figure> elements with layout attribute only.
+			// We are looking for <figure> elements with AMP classes only.
 			if ( false === strpos( $attributes['class'], 'amp-layout-' ) && false === strpos( $attributes['class'], 'amp-noloading' ) ) {
 				continue;
 			}

includes/sanitizers/class-amp-gallery-block-sanitizer.php

@@ -0,0 +1,91 @@
+<?php
+/**
+ * Class AMP_Gallery_Block_Sanitizer.
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Gallery_Block_Sanitizer
+ *
+ * Modifies gallery block to match the block's AMP-specific configuration.
+ */
+class AMP_Gallery_Block_Sanitizer extends AMP_Base_Sanitizer {
+
+	/**
+	 * Value used for width of amp-carousel.
+	 *
+	 * @since 1.0
+	 *
+	 * @const int
+	 */
+	const FALLBACK_WIDTH = 600;
+
+	/**
+	 * Value used for height of amp-carousel.
+	 *
+	 * @since 1.0
+	 *
+	 * @const int
+	 */
+	const FALLBACK_HEIGHT = 480;
+
+	/**
+	 * Tag.
+	 *
+	 * @var string Ul tag to identify wrapper around gallery block.
+	 * @since 1.0
+	 */
+	public static $tag = 'ul';
+
+	/**
+	 * Sanitize the gallery block contained by <ul> element where necessary.
+	 *
+	 * @since 0.2
+	 */
+	public function sanitize() {
+		$nodes     = $this->dom->getElementsByTagName( self::$tag );
+		$num_nodes = $nodes->length;
+		if ( 0 === $num_nodes ) {
+			return;
+		}
+
+		for ( $i = $num_nodes - 1; $i >= 0; $i-- ) {
+			$node = $nodes->item( $i );
+
+			// We're looking for <ul> elements that at least one child.
+			if ( 0 === count( $node->childNodes ) ) {
+				continue;
+			}
+
+			$attributes = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $node );
+
+			// We are only looking for <ul> elements which have amp-carousel as class.
+			if ( ! isset( $attributes['class'] ) || false === strpos( $attributes['class'], 'amp-carousel' ) ) {
+				continue;
+			}
+
+			$images     = $node->getElementsByTagName( 'a' );
+			$num_images = $images->length;
+
+			if ( 0 === $num_images ) {
+				continue;
+			}
+
+			$attributes   = array(
+				'width'  => self::FALLBACK_WIDTH,
+				'height' => self::FALLBACK_HEIGHT,
+				'type'   => 'slides',
+				'layout' => 'responsive',
+			);
+			$amp_carousel = AMP_DOM_Utils::create_node( $this->dom, 'amp-carousel', $attributes );
+
+			for ( $j = $num_images - 1; $j >= 0; $j-- ) {
+				$amp_carousel->appendChild( $images->item( $j ) );
+			}
+
+			$node->parentNode->replaceChild( $amp_carousel, $node );
+			$this->did_convert_elements = true;
+		}
+	}
+}

tests/test-class-amp-gallery-block-sanitizer.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Class AMP_Gallery_Block_Sanitizer_Test.
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Gallery_Block_Sanitizer_Test
+ */
+class AMP_Gallery_Block_Sanitizer_Test extends WP_UnitTestCase {
+
+	/**
+	 * Get data.
+	 *
+	 * @return array
+	 */
+	public function get_data() {
+		return array(
+			'no_ul'                 => array(
+				'<p>Lorem Ipsum Demet Delorit.</p>',
+				'<p>Lorem Ipsum Demet Delorit.</p>',
+			),
+
+			'no_a'                  => array(
+				'<ul class="amp-carousel"><amp-img></amp-img></ul>',
+				'<ul class="amp-carousel"><amp-img></amp-img></ul>',
+			),
+
+			'no_amp_carousel'       => array(
+				'<ul><a><amp-img></amp-img></a></ul>',
+				'<ul><a><amp-img></amp-img></a></ul>',
+			),
+
+			'data_amp_with_gallery' => array(
+				'<ul class="amp-carousel"><li class="blocks-gallery-item"><figure><a href="http://example.com"><amp-img src="http://example.com/img.png" width="600" height="400"></amp-img></a></figure></li></ul>',
+				'<amp-carousel width="600" height="480" type="slides" layout="responsive"><a href="http://example.com"><amp-img src="http://example.com/img.png" width="600" height="400"></amp-img></a></amp-carousel>',
+			),
+		);
+	}
+
+	/**
+	 * Test sanitizer.
+	 *
+	 * @dataProvider get_data
+	 * @param string $source Source.
+	 * @param string $expected Expected.
+	 */
+	public function test_sanitizer( $source, $expected ) {
+		$dom       = AMP_DOM_Utils::get_dom_from_content( $source );
+		$sanitizer = new AMP_Gallery_Block_Sanitizer( $dom );
+		$sanitizer->sanitize();
+		$content = AMP_DOM_Utils::get_content_from_dom( $dom );
+		$content = preg_replace( '/(?<=>)\s+(?=<)/', '', $content );
+		$this->assertEquals( $expected, $content );
+	}
+}