[AMP Stories] Add overlay settings to Page

assets/src/blocks/amp-story/edit.js

@@ -6,7 +6,7 @@ import uuid from 'uuid/v4';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	InnerBlocks,
 	PanelColorSettings,
@@ -28,7 +28,7 @@ import { withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { getTotalAnimationDuration } from '../../helpers';
+import { getTotalAnimationDuration, addBackgroundColorToOverlay } from '../../helpers';
 import {
 	ALLOWED_CHILD_BLOCKS,
 	ALLOWED_MEDIA_TYPES,
@@ -91,15 +91,64 @@ class EditPage extends Component {
 		}
 	}
 
+	removeBackgroundColor( index ) {
+		const { attributes, setAttributes } = this.props;
+		const backgroundColors = JSON.parse( attributes.backgroundColors );
+		backgroundColors.splice( index, 1 );
+		setAttributes( { backgroundColors: JSON.stringify( backgroundColors ) } );
+	}
+
+	setBackgroundColors( value, index ) {
+		const { attributes, setAttributes } = this.props;
+		const backgroundColors = JSON.parse( attributes.backgroundColors );
+		backgroundColors[ index ] = {
+			color: value,
+		};
+		setAttributes( { backgroundColors: JSON.stringify( backgroundColors ) } );
+	}
+
+	getOverlayColorSettings() {
+		const { attributes } = this.props;
+		const backgroundColors = JSON.parse( attributes.backgroundColors );
+
+		if ( ! backgroundColors.length ) {
+			return [
+				{
+					value: undefined,
+					onChange: ( value ) => {
+						this.setBackgroundColors( value, 0 );
+					},
+					label: __( 'Color', 'amp' ),
+				},
+			];
+		}
+
+		const backgroundColorSettings = [];
+		const useNumberedLabels = backgroundColors.length > 1;
+
+		backgroundColors.forEach( ( color, index ) => {
+			backgroundColorSettings[ index ] = {
+				value: color ? color.color : undefined,
+				onChange: ( value ) => {
+					this.setBackgroundColors( value, index );
+				},
+				/* translators: %s: color number */
+				label: useNumberedLabels ? sprintf( __( 'Color %s', 'amp' ), index + 1 ) : __( 'Color', 'amp' ),
+			};
+		} );
+
+		return backgroundColorSettings;
+	}
+
 	render() {
 		const { attributes, media, setAttributes, totalAnimationDuration } = this.props;
 
 		const {
-			backgroundColor,
 			mediaId,
 			mediaType,
 			mediaUrl,
 			focalPoint,
+			overlayOpacity,
 			poster,
 			autoAdvanceAfter,
 			autoAdvanceAfterDuration,
@@ -108,7 +157,6 @@ class EditPage extends Component {
 		const instructions = <p>{ __( 'To edit the background image or video, you need permission to upload media.', 'amp' ) }</p>;
 
 		const style = {
-			backgroundColor,
 			backgroundImage: IMAGE_BACKGROUND_TYPE === mediaType && mediaUrl ? `url(${ mediaUrl })` : undefined,
 			backgroundPosition: IMAGE_BACKGROUND_TYPE === mediaType && focalPoint ? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%` : 'cover',
 			backgroundRepeat: 'no-repeat',
@@ -134,20 +182,54 @@ class EditPage extends Component {
 			autoAdvanceAfterHelp = __( 'Based on the duration of all animated blocks on the page', 'amp' );
 		}
 
+		let overlayStyle = {
+			width: '100%',
+			height: '100%',
+			position: 'absolute',
+		};
+
+		const backgroundColors = JSON.parse( attributes.backgroundColors );
+
+		overlayStyle = addBackgroundColorToOverlay( overlayStyle, backgroundColors );
+		overlayStyle.opacity = overlayOpacity / 100;
+
+		const colorSettings = this.getOverlayColorSettings();
+
 		return (
 			<Fragment>
 				<InspectorControls key="controls">
 					<PanelColorSettings
-						title={ __( 'Color Settings', 'amp' ) }
+						title={ __( 'Background Color', 'amp' ) }
 						initialOpen={ false }
-						colorSettings={ [
-							{
-								value: backgroundColor,
-								onChange: ( value ) => setAttributes( { backgroundColor: value } ),
-								label: __( 'Background Color', 'amp' ),
-							},
-						] }
-					/>
+						colorSettings={ colorSettings }
+					>
+						<p>
+							{ backgroundColors.length < 2 &&
+							<Button
+								onClick={ () => this.setBackgroundColors( null, 1 ) }
+								isSmall>
+								{ __( 'Add Gradient', 'amp' ) }
+							</Button>
+							}
+							{ backgroundColors.length > 1 &&
+							<Button
+								onClick={ () => this.removeBackgroundColor( backgroundColors.length - 1 ) }
+								isLink
+								isDestructive>
+								{ __( 'Remove Gradient', 'amp' ) }
+							</Button>
+							}
+						</p>
+						<RangeControl
+							label={ __( 'Opacity', 'amp' ) }
+							value={ overlayOpacity }
+							onChange={ ( value ) => setAttributes( { overlayOpacity: value } ) }
+							min={ 0 }
+							max={ 100 }
+							step={ 5 }
+							required
+						/>
+					</PanelColorSettings>
 					<PanelBody title={ __( 'Background Media', 'amp' ) }>
 						<Fragment>
 							<BaseControl>
@@ -250,6 +332,9 @@ class EditPage extends Component {
 							</video>
 						</div>
 					) }
+					{ backgroundColors.length > 0 && (
+						<div style={ overlayStyle }></div>
+					) }
 					<InnerBlocks template={ TEMPLATE } allowedBlocks={ ALLOWED_CHILD_BLOCKS } />
 				</div>
 			</Fragment>

assets/src/blocks/amp-story/index.js

@@ -7,6 +7,7 @@ import { InnerBlocks } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
+import { addBackgroundColorToOverlay } from '../../helpers';
 import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from '../../constants';
 import EditPage from './edit';
 import blockIcon from '../../../images/amp-story-page-icon.svg';
@@ -19,9 +20,6 @@ const schema = {
 		selector: 'amp-story-page',
 		attribute: 'id',
 	},
-	backgroundColor: {
-		default: '#ffffff',
-	},
 	mediaId: {
 		type: 'number',
 	},
@@ -49,6 +47,12 @@ const schema = {
 	autoAdvanceAfterMedia: {
 		type: 'string',
 	},
+	backgroundColors: {
+		default: '[]',
+	},
+	overlayOpacity: {
+		default: 50,
+	},
 };
 
 export const settings = {
@@ -78,7 +82,7 @@ export const settings = {
 	save( { attributes } ) {
 		const {
 			anchor,
-			backgroundColor,
+			overlayOpacity,
 			mediaUrl,
 			mediaType,
 			poster,
@@ -87,6 +91,8 @@ export const settings = {
 			autoAdvanceAfterMedia,
 		} = attributes;
 
+		const backgroundColors = JSON.parse( attributes.backgroundColors );
+
 		let advanceAfter;
 
 		if ( [ 'auto', 'time' ].includes( autoAdvanceAfter ) && autoAdvanceAfterDuration ) {
@@ -95,8 +101,14 @@ export const settings = {
 			advanceAfter = autoAdvanceAfterMedia;
 		}
 
+		let overlayStyle = {};
+		if ( 0 < backgroundColors.length ) {
+			overlayStyle = addBackgroundColorToOverlay( overlayStyle, backgroundColors );
+			overlayStyle.opacity = overlayOpacity / 100;
+		}
+
 		return (
-			<amp-story-page style={ { backgroundColor } } id={ anchor } auto-advance-after={ advanceAfter }>
+			<amp-story-page style={ { backgroundColor: '#ffffff' } } id={ anchor } auto-advance-after={ advanceAfter }>
 				{
 					mediaUrl && (
 						<amp-story-grid-layer template="fill">
@@ -109,6 +121,8 @@ export const settings = {
 						</amp-story-grid-layer>
 					)
 				}
+				<amp-story-grid-layer template="fill" style={ overlayStyle }>
+				</amp-story-grid-layer>
 				<amp-story-grid-layer template="vertical">
 					<InnerBlocks.Content />
 				</amp-story-grid-layer>

assets/src/helpers.js

@@ -472,3 +472,29 @@ export const hasMinimumStoryPosterDimensions = ( media ) => {
 		( media.width >= minWidth && media.height >= minHeight )
 	);
 };
+
+/**
+ * Adds either background color or gradient to style depending on the settings.
+ *
+ * @param {Object} overlayStyle Original style.
+ * @param {Array} backgroundColors Array of color settings.
+ * @return {Object} Adjusted style.
+ */
+export const addBackgroundColorToOverlay = ( overlayStyle, backgroundColors ) => {
+	const validBackgroundColors = backgroundColors.filter( Boolean );
+
+	if ( ! validBackgroundColors ) {
+		return overlayStyle;
+	}
+
+	if ( 1 === validBackgroundColors.length ) {
+		overlayStyle.backgroundColor = validBackgroundColors[ 0 ].color;
+	} else {
+		const gradientList = validBackgroundColors.map( ( { color } ) => {
+			return color || 'transparent';
+		} ).join( ', ' );
+
+		overlayStyle.backgroundImage = `linear-gradient(to bottom, ${ gradientList })`;
+	}
+	return overlayStyle;
+};