From ea4c7765710c07a3e8bbc25e7626ea119393a087 Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Wed, 29 Aug 2018 17:59:28 +0300
Subject: [PATCH 1/3] Add background color for amp-story-page block.

---
 assets/css/amp-editor-story-blocks.css | 13 +--------
 blocks/amp-story/amp-story-page.js     | 38 +++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css
index ae7ce4c7c78..9b10a367a8b 100644
--- a/assets/css/amp-editor-story-blocks.css
+++ b/assets/css/amp-editor-story-blocks.css
@@ -1,14 +1,3 @@
-
-.editor-block-list__layout {
-	background-color: #ffdddd;
-}
-.editor-block-list__layout .editor-block-list__layout {
-	background-color: white;
-}
 div[data-type="amp/amp-story-page"] {
 	background-color: #ddffdd;
-}
-div[data-type="amp/amp-story-grid-layer"] {
-	background-color: #ddddff;
-}
-
+}
\ No newline at end of file
diff --git a/blocks/amp-story/amp-story-page.js b/blocks/amp-story/amp-story-page.js
index 41c9403f5fe..9840575eb3c 100644
--- a/blocks/amp-story/amp-story-page.js
+++ b/blocks/amp-story/amp-story-page.js
@@ -6,7 +6,9 @@ const {
 	registerBlockType
 } = wp.blocks;
 const {
-	InnerBlocks
+	InnerBlocks,
+	PanelColorSettings,
+	InspectorControls
 } = wp.editor;
 const { select } = wp.data;
 const { getBlock } = select( 'core/editor' );
@@ -62,6 +64,10 @@ export default registerBlockType(
 				source: 'attribute',
 				selector: 'amp-story-page',
 				attribute: 'id'
+			},
+			backgroundColor: {
+				type: 'string',
+				default: '#ffffff'
 			}
 		},
 
@@ -78,10 +84,13 @@ export default registerBlockType(
 		 * */
 
 		edit( props ) {
-			const { setAttributes } = props;
+			const { setAttributes, attributes } = props;
+			const onChangeBackgroundColor = newBackgroundColor => {
+				setAttributes( { backgroundColor: newBackgroundColor } );
+			};
 
 			// If the page ID is not set, add one.
-			if ( ! props.attributes.id ) {
+			if ( ! attributes.id ) {
 				setAttributes( { id: uuid() } );
 			}
 			const block = getBlock( props.clientId );
@@ -101,15 +110,30 @@ export default registerBlockType(
 				grids = 1;
 			}
 
-			return (
+			return [
+				<InspectorControls key='controls'>
+					<PanelColorSettings
+						title={ __( 'Background Color Settings' ) }
+						initialOpen={ false }
+						colorSettings={ [
+							{
+								value: attributes.backgroundColor,
+								onChange: onChangeBackgroundColor,
+								label: __( 'AMP Page Background Color', 'amp' )
+							}
+						] }
+					/>
+				</InspectorControls>,
 				// Get the template dynamically.
-				<InnerBlocks key='contents' template={ getStoryPageTemplate( grids, hasCTALayer ) } allowedBlocks={ ALLOWED_BLOCKS } />
-			);
+				<div key="contents" style={{ backgroundColor: attributes.backgroundColor }}>
+					<InnerBlocks template={ getStoryPageTemplate( grids, hasCTALayer ) } allowedBlocks={ ALLOWED_BLOCKS } />
+				</div>
+			];
 		},
 
 		save( { attributes } ) {
 			return (
-				<amp-story-page id={ attributes.id }>
+				<amp-story-page style={{ backgroundColor: attributes.backgroundColor }} id={ attributes.id }>
 					<InnerBlocks.Content />
 				</amp-story-page>
 			);

From 0929292c87ddc0c901b031742849d31bbef7fc3d Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Wed, 29 Aug 2018 18:04:46 +0300
Subject: [PATCH 2/3] Adjust texts.

---
 blocks/amp-story/amp-story-page.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/blocks/amp-story/amp-story-page.js b/blocks/amp-story/amp-story-page.js
index 9840575eb3c..9ace053ea22 100644
--- a/blocks/amp-story/amp-story-page.js
+++ b/blocks/amp-story/amp-story-page.js
@@ -113,13 +113,13 @@ export default registerBlockType(
 			return [
 				<InspectorControls key='controls'>
 					<PanelColorSettings
-						title={ __( 'Background Color Settings' ) }
+						title={ __( 'Page Background Color Settings', 'amp' ) }
 						initialOpen={ false }
 						colorSettings={ [
 							{
 								value: attributes.backgroundColor,
 								onChange: onChangeBackgroundColor,
-								label: __( 'AMP Page Background Color', 'amp' )
+								label: __( 'Background Color', 'amp' )
 							}
 						] }
 					/>

From d6d3f69b3f883d62149dcbc12f4082ef5aa40016 Mon Sep 17 00:00:00 2001
From: Miina Sikk <miina.sikk@gmail.com>
Date: Wed, 29 Aug 2018 18:05:31 +0300
Subject: [PATCH 3/3] Adjust texts.

---
 blocks/amp-story/amp-story-page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/amp-story/amp-story-page.js b/blocks/amp-story/amp-story-page.js
index 9ace053ea22..343b3668174 100644
--- a/blocks/amp-story/amp-story-page.js
+++ b/blocks/amp-story/amp-story-page.js
@@ -113,7 +113,7 @@ export default registerBlockType(
 			return [
 				<InspectorControls key='controls'>
 					<PanelColorSettings
-						title={ __( 'Page Background Color Settings', 'amp' ) }
+						title={ __( 'Background Color Settings', 'amp' ) }
 						initialOpen={ false }
 						colorSettings={ [
 							{