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

assets/css/amp-default.css

@@ -9,3 +9,7 @@
 	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
 	object-fit: contain;
 }
+
+#amp-image-lightbox-1 img {
+	object-fit: contain;
+}

assets/js/amp-editor-blocks.js

@@ -1,6 +1,8 @@
 /* exported ampEditorBlocks */
 /* eslint no-magic-numbers: [ "error", { "ignore": [ 1, -1, 0 ] } ] */
 
+var __ = wp.i18n.__;
+
 var ampEditorBlocks = ( function() {
 	var component = {
 
@@ -10,22 +12,23 @@ var ampEditorBlocks = ( function() {
 		data: {
 			dynamicBlocks: [],
 			ampLayoutOptions: [
-				{ value: 'nodisplay', label: 'No Display' },
-				{ value: 'fixed', label: 'Fixed' }, // Not supported by amp-audio and amp-pixel.
-				{ value: 'responsive', label: 'Responsive' }, // To ensure your AMP element displays, you must specify a width and height for the containing element.
-				{ value: 'fixed-height', label: 'Fixed height' },
-				{ value: 'fill', label: 'Fill' },
-				{ value: 'container', label: 'Container' }, // Not supported by img and video.
-				{ value: 'flex-item', label: 'Flex Item' },
-				{ value: 'intrinsic', label: 'Intrinsic' } // Not supported by video.
+				{ value: 'nodisplay', label: __( 'No Display' ) },
+				{ value: 'fixed', label: __( 'Fixed' ) }, // Not supported by amp-audio and amp-pixel.
+				{ value: 'responsive', label: __( 'Responsive' ) }, // To ensure your AMP element displays, you must specify a width and height for the containing element.
+				{ value: 'fixed-height', label: __( 'Fixed height' ) },
+				{ value: 'fill', label: __( 'Fill' ) },
+				{ value: 'container', label: __( 'Container' ) }, // Not supported by img and video.
+				{ value: 'flex-item', label: __( 'Flex Item' ) },
+				{ value: 'intrinsic', label: __( 'Intrinsic' ) } // Not supported by video.
 			],
 			defaultWidth: 608, // Max-width in the editor.
 			defaultHeight: 400,
 			mediaBlocks: [
 				'core/image',
 				'core/video',
 				'core/audio'
-			]
+			],
+			ampPanelLabel: __( 'AMP Settings' )
 		}
 	};
 
@@ -101,8 +104,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 = {};
 			}
@@ -111,6 +114,16 @@ var ampEditorBlocks = ( function() {
 			};
 		}
 
+		// Add AMP Lightbox settings.
+		if ( 'core/gallery' === name || 'core/image' === name ) {
+			if ( ! settings.attributes ) {
+				settings.attributes = {};
+			}
+			settings.attributes.ampLightbox = {
+				type: 'boolean'
+			};
+		}
+
 		// Layout settings for embeds and media blocks.
 		if ( 0 === name.indexOf( 'core-embed' ) || -1 !== component.data.mediaBlocks.indexOf( name ) ) {
 			if ( ! settings.attributes ) {
@@ -163,6 +176,10 @@ var ampEditorBlocks = ( function() {
 						}, props ) )
 					];
 				}
+			} else if ( 'core/gallery' === name ) {
+				inspectorControls = component.setUpGalleryInpsectorControls( props );
+			} else if ( 'core/image' === name ) {
+				inspectorControls = component.setUpImageInpsectorControls( props );
 			} else if ( -1 !== component.data.mediaBlocks.indexOf( name ) || 0 === name.indexOf( 'core-embed/' ) ) {
 				inspectorControls = component.setUpInspectorControls( props );
 			}
@@ -223,45 +240,162 @@ var ampEditorBlocks = ( function() {
 	};
 
 	/**
-	 * Default setup for inspector controls.
+	 * Get AMP Layout select control.
 	 *
 	 * @param {Object} props Props.
-	 * @return {Object|Element|*|{$$typeof, type, key, ref, props, _owner}} Inspector Controls.
+	 * @return {Object} Element.
 	 */
-	component.setUpInspectorControls = function setUpInspectorControls( props ) {
+	component.getAmpLayoutControl = function getAmpLayoutControl( props ) {
 		var ampLayout = props.attributes.ampLayout,
-			ampNoLoading = props.attributes.ampNoLoading,
-			isSelected = props.isSelected,
-			name = props.name,
 			el = wp.element.createElement,
-			InspectorControls = wp.blocks.InspectorControls,
 			SelectControl = wp.components.SelectControl,
-			ToggleControl = wp.components.ToggleControl,
-			PanelBody = wp.components.PanelBody,
-			label = 'AMP Layout';
+			name = props.name,
+			label = __( 'AMP Layout' );
 
 		if ( 'core/image' === name ) {
-			label = 'AMP Layout (modifies width/height)';
+			label = __( 'AMP Layout (modifies width/height)' );
 		}
 
+		return el( SelectControl, {
+			label: label,
+			value: ampLayout,
+			options: component.getLayoutOptions( name ),
+			onChange: function( value ) {
+				props.setAttributes( { ampLayout: value } );
+			}
+		} );
+	};
+
+	/**
+	 * Get AMP Noloading toggle control.
+	 *
+	 * @param {Object} props Props.
+	 * @return {Object} Element.
+	 */
+	component.getAmpNoloadingToggle = function getAmpNoloadingToggle( props ) {
+		var ampNoLoading = props.attributes.ampNoLoading,
+			el = wp.element.createElement,
+			ToggleControl = wp.components.ToggleControl,
+			label = __( 'AMP Noloading' );
+
+		return el( ToggleControl, {
+			label: label,
+			checked: ampNoLoading,
+			onChange: function() {
+				props.setAttributes( { ampNoLoading: ! ampNoLoading } );
+			}
+		} );
+	};
+
+	/**
+	 * Get AMP Lightbox toggle control.
+	 *
+	 * @param {Object} props Props.
+	 * @return {Object} Element.
+	 */
+	component.getAmpLightboxToggle = function getAmpLightboxToggle( props ) {
+		var ampLightbox = props.attributes.ampLightbox,
+			el = wp.element.createElement,
+			ToggleControl = wp.components.ToggleControl,
+			label = __( 'Add lightbox effect' );
+
+		return el( ToggleControl, {
+			label: label,
+			checked: ampLightbox,
+			onChange: function( nextValue ) {
+				props.setAttributes( { ampLightbox: ! ampLightbox } );
+				// In case of lightbox set linking images to 'none'.
+				if ( nextValue && props.attributes.linkTo && 'none' !== props.attributes.linkTo ) {
+					props.setAttributes( { linkTo: 'none' } );
+				}
+			}
+		} );
+	};
+
+	/**
+	 * Get AMP Carousel toggle control.
+	 *
+	 * @param {Object} props Props.
+	 * @return {Object} Element.
+	 */
+	component.getAmpCarouselToggle = function getAmpCarouselToggle( props ) {
+		var ampCarousel = props.attributes.ampCarousel,
+			el = wp.element.createElement,
+			ToggleControl = wp.components.ToggleControl,
+			label = __( 'Display as AMP carousel' );
+
+		return el( ToggleControl, {
+			label: label,
+			checked: ampCarousel,
+			onChange: function() {
+				props.setAttributes( { ampCarousel: ! ampCarousel } );
+			}
+		} );
+	};
+
+	/**
+	 * Default setup for inspector controls.
+	 *
+	 * @param {Object} props Props.
+	 * @return {Object|Element|*|{$$typeof, type, key, ref, props, _owner}} Inspector Controls.
+	 */
+	component.setUpInspectorControls = function setUpInspectorControls( props ) {
+		var isSelected = props.isSelected,
+			el = wp.element.createElement,
+			InspectorControls = wp.blocks.InspectorControls,
+			PanelBody = wp.components.PanelBody;
+
+		return isSelected && (
+			el( InspectorControls, { key: 'inspector' },
+				el( PanelBody, { title: component.data.ampPanelLabel },
+					component.getAmpLayoutControl( props ),
+					component.getAmpNoloadingToggle( props )
+				)
+			)
+		);
+	};
+
+	/**
+	 * Set up inspector controls for Image block.
+	 *
+	 * @param {Object} props Props.
+	 * @return {Object} Inspector Controls.
+	 */
+	component.setUpImageInpsectorControls = function setUpImageInpsectorControls( props ) {
+		var isSelected = props.isSelected,
+			el = wp.element.createElement,
+			InspectorControls = wp.blocks.InspectorControls,
+			PanelBody = wp.components.PanelBody;
+
+		return isSelected && (
+			el( InspectorControls, { key: 'inspector' },
+				el( PanelBody, { title: component.data.ampPanelLabel },
+					component.getAmpLayoutControl( props ),
+					component.getAmpNoloadingToggle( props ),
+					component.getAmpLightboxToggle( props )
+				)
+			)
+		);
+	};
+
+	/**
+	 * 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 isSelected = props.isSelected,
+			el = wp.element.createElement,
+			InspectorControls = wp.blocks.InspectorControls,
+			PanelBody = wp.components.PanelBody;
+
 		return isSelected && (
 			el( InspectorControls, { key: 'inspector' },
-				el( PanelBody, { title: 'AMP Settings' },
-					el( SelectControl, {
-						label: label,
-						value: ampLayout,
-						options: component.getLayoutOptions( name ),
-						onChange: function( value ) {
-							props.setAttributes( { ampLayout: value } );
-						}
-					} ),
-					el( ToggleControl, {
-						label: 'AMP Noloading',
-						checked: ampNoLoading,
-						onChange: function() {
-							props.setAttributes( { ampNoLoading: ! ampNoLoading } );
-						}
-					} )
+				el( PanelBody, { title: component.data.ampPanelLabel },
+					component.getAmpCarouselToggle( props ),
+					component.getAmpLightboxToggle( props )
 				)
 			)
 		);
@@ -275,26 +409,16 @@ var ampEditorBlocks = ( function() {
 	 * @return {*} Inspector controls.
 	 */
 	component.setUpShortcodeInspectorControls = function setUpShortcodeInspectorControls( props ) {
-		var ampCarousel = props.attributes.ampCarousel,
-			isSelected = props.isSelected,
+		var isSelected = props.isSelected,
 			el = wp.element.createElement,
 			InspectorControls = wp.blocks.InspectorControls,
-			ToggleControl = wp.components.ToggleControl,
-			PanelBody = wp.components.PanelBody,
-			toggleControl;
+			PanelBody = wp.components.PanelBody;
 
 		if ( component.isGalleryShortcode( props.attributes ) ) {
-			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
+					el( PanelBody, { title: component.data.ampPanelLabel },
+						component.getAmpCarouselToggle( props )
 					)
 				)
 			);
@@ -347,13 +471,19 @@ 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 ( component.hasAmpLightboxSet( attributes || '' ) ) {
+			ampClassName += ' amp-lightbox';
+		}
 
 		if ( '' !== ampClassName && attributes.className !== ampClassName ) {
 			props.className = ampClassName.trim();
@@ -365,6 +495,26 @@ var ampEditorBlocks = ( function() {
 		return element;
 	};
 
+	/**
+	 * Check if AMP Lightbox is set.
+	 *
+	 * @param {Object} attributes Attributes.
+	 * @return {boolean} If is set.
+	 */
+	component.hasAmpLightboxSet = function hasAmpLightboxSet( attributes ) {
+		return attributes.ampLightbox && false !== attributes.ampLightbox;
+	};
+
+	/**
+	 * 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.
 	 *