[WIP] Add placeholder for story pages

assets/src/stories-editor/blocks/amp-story-page/edit.css

@@ -94,6 +94,47 @@
 	height: 553px;
 }
 
+.editor-block-list__layout div[data-type="amp/amp-story-page"] .amp-story-page-number + div .components-placeholder {
+	height: 553px;
+}
+
+.editor-amp-story-page-placeholder .editor-amp-story-page-placeholder-options {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	width: 100%;
+	margin: 16px 0;
+	list-style: none;
+}
+
+.editor-amp-story-page-placeholder .editor-amp-story-page-placeholder-options > li {
+	list-style: none;
+	flex-basis: 100%;
+	flex-shrink: 1;
+	margin: 0 8px;
+	max-width: 100px;
+}
+
+.editor-amp-story-page-placeholder .editor-amp-story-page-placeholder-option {
+	width: 100%;
+	justify-content: center;
+	height: auto;
+	padding: 0;
+}
+
+.editor-amp-story-page-placeholder .editor-amp-story-page-placeholder-option::before {
+	content: "";
+	padding-bottom: 100%;
+}
+
+.editor-amp-story-page-placeholder .editor-amp-story-page-placeholder-option:first-child {
+	margin-left: 0;
+}
+
+.editor-amp-story-page-placeholder .editor-amp-story-page-placeholder-option:last-child {
+	margin-right: 0;
+}
+
 .editor-styles-wrapper [data-block] {
 	margin-top: 0;
 	margin-bottom: 0;

assets/src/stories-editor/blocks/amp-story-page/edit.js

@@ -9,13 +9,17 @@ import PropTypes from 'prop-types';
 import {
 	InnerBlocks,
 	InspectorControls,
+	BlockIcon,
 } from '@wordpress/block-editor';
+import { getBlockType } from '@wordpress/blocks';
 import { Component, createRef } from '@wordpress/element';
 import {
 	withSelect,
 	withDispatch,
 } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { Placeholder, IconButton, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -33,12 +37,13 @@ import {
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
 } from '../../constants';
-import CopyPasteHandler from './copy-paste-handler';
+import blockIcon from '../../../../images/stories-editor/amp-story-page-icon.svg';
 import './edit.css';
 import BackgroundColorSettings from './background-color-settings';
 import PageSettings from './page-settings';
 import BackgroundMediaSettings from './background-media-settings';
 import AnimationSettings from './animation-settings';
+import CopyPasteHandler from './copy-paste-handler';
 
 class PageEdit extends Component {
 	shouldComponentUpdate() {
@@ -61,8 +66,12 @@ class PageEdit extends Component {
 			} );
 		}
 
+		const backgroundColors = JSON.parse( props.attributes.backgroundColors );
+		const showPlaceholder = props.showPlaceholder && ! backgroundColors.length;
+
 		this.state = {
 			extractingPoster: false,
+			showPlaceholder,
 		};
 
 		this.videoPlayer = createRef();
@@ -121,6 +130,7 @@ class PageEdit extends Component {
 			allowedBlocks,
 			allowedBackgroundMediaTypes,
 			videoFeaturedImage,
+			showPlaceholder,
 		} = this.props;
 
 		const {
@@ -157,6 +167,11 @@ class PageEdit extends Component {
 		overlayStyle = addBackgroundColorToOverlay( overlayStyle, backgroundColors );
 		overlayStyle.opacity = overlayOpacity / 100;
 
+		const shouldShowPlaceholder = this.state.showPlaceholder && showPlaceholder && ! backgroundColors.length;
+		const placeholderInstructions = __( 'Choose a background, or start writing some content.', 'amp' );
+
+		const textBlock = getBlockType( 'amp/amp-story-text' );
+
 		return (
 			<>
 				<InspectorControls>
@@ -187,21 +202,75 @@ class PageEdit extends Component {
 					<AnimationSettings clientId={ clientId } />
 				</InspectorControls>
 				<CopyPasteHandler clientId={ clientId } isSelected={ isSelected }>
-					<div
-						style={ style }
-					>
-						{ VIDEO_BACKGROUND_TYPE === mediaType && media && (
-							<div className="editor-amp-story-page-video-wrap">
-								<video autoPlay muted loop className="editor-amp-story-page-video" poster={ poster } ref={ this.videoPlayer }>
-									<source src={ mediaUrl } type={ media.mime_type } />
-								</video>
-							</div>
-						) }
-						{ backgroundColors.length > 0 && (
-							<div style={ overlayStyle } />
-						) }
-						<InnerBlocks allowedBlocks={ allowedBlocks } />
-					</div>
+					{ shouldShowPlaceholder ? (
+						<div style={ style }>
+							<Placeholder
+								icon={ blockIcon( { width: 24, height: 24 } ) }
+								label={ __( 'Get Started', 'amp' ) }
+								instructions={ placeholderInstructions }
+								className="editor-amp-story-page-placeholder"
+							>
+								{
+									/*
+									* Disable reason: The `list` ARIA role is redundant but
+									* Safari+VoiceOver won't announce the list otherwise.
+									*/
+									/* eslint-disable jsx-a11y/no-redundant-roles */
+								}
+								<ul className="editor-amp-story-page-placeholder-options" role="list">
+									<li key="background-image" >
+										<IconButton
+											isLarge
+											icon="format-image"
+											className="editor-amp-story-page-placeholder-option"
+											label={ __( 'Insert Background Image', 'amp' ) }
+										/>
+									</li>
+									<li key="background-video" >
+										<IconButton
+											isLarge
+											icon="media-video"
+											className="editor-amp-story-page-placeholder-option"
+											label={ __( 'Insert Background Video', 'amp' ) }
+										/>
+									</li>
+									<li key="text-block" >
+										<IconButton
+											isLarge
+											icon={ <BlockIcon icon={ textBlock.icon } /> }
+											className="editor-amp-story-page-placeholder-option"
+											label={ __( 'Insert Text', 'amp' ) }
+										/>
+									</li>
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+								<div className="editor-amp-story-page-placeholder-skip">
+									<Button
+										isLink
+										onClick={ () => this.setState( { showPlaceholder: false } ) }
+									>
+										{ __( 'Skip', 'amp' ) }
+									</Button>
+								</div>
+							</Placeholder>
+						</div>
+					) : (
+						<div
+							style={ style }
+						>
+							{ VIDEO_BACKGROUND_TYPE === mediaType && media && (
+								<div className="editor-amp-story-page-video-wrap">
+									<video autoPlay muted loop className="editor-amp-story-page-video" poster={ poster } ref={ this.videoPlayer }>
+										<source src={ mediaUrl } type={ media.mime_type } />
+									</video>
+								</div>
+							) }
+							{ backgroundColors.length > 0 && (
+								<div style={ overlayStyle } />
+							) }
+							<InnerBlocks allowedBlocks={ allowedBlocks } />
+						</div>
+					) }
 				</CopyPasteHandler>
 			</>
 		);
@@ -241,6 +310,7 @@ PageEdit.propTypes = {
 	} ),
 	autoAdvanceAfterOptions: PropTypes.array,
 	allowedBackgroundMediaTypes: PropTypes.arrayOf( PropTypes.string ).isRequired,
+	showPlaceholder: PropTypes.bool.isRequired,
 };
 
 export default compose(
@@ -252,7 +322,7 @@ export default compose(
 	} ),
 	withSelect( ( select, { clientId, attributes } ) => {
 		const { getMedia } = select( 'core' );
-		const { getBlockOrder } = select( 'core/block-editor' );
+		const { getBlockOrder, getBlock } = select( 'core/block-editor' );
 		const { getSettings } = select( 'amp/story' );
 
 		const isFirstPage = getBlockOrder().indexOf( clientId ) === 0;
@@ -284,19 +354,24 @@ export default compose(
 			];
 		}
 
+		const block = getBlock( clientId );
 		const { getEditedPostAttribute } = select( 'core/editor' );
 		const postMeta = getEditedPostAttribute( 'meta' ) || {};
 		const storySettingsAttributes = metaToAttributeNames( postMeta );
 		const { allowedVideoMimeTypes, storySettings } = getSettings();
 		const { autoAdvanceAfterOptions } = storySettings || {};
 
+		const hasInnerBlocks = Boolean( block && block.innerBlocks.length );
+		const showPlaceholder = isFirstPage && ! hasInnerBlocks && ! media;
+
 		return {
 			media,
 			videoFeaturedImage,
 			allowedBlocks,
 			getBlockOrder,
 			storySettingsAttributes,
 			autoAdvanceAfterOptions,
+			showPlaceholder,
 			allowedBackgroundMediaTypes: [ IMAGE_BACKGROUND_TYPE, ...allowedVideoMimeTypes ],
 		};
 	} ),

assets/src/stories-editor/helpers/addAMPAttributes.js

@@ -3,8 +3,8 @@
  */
 import { ALLOWED_CHILD_BLOCKS, BLOCKS_WITH_RESIZING, BLOCKS_WITH_TEXT_SETTINGS } from '../constants';
 import { addAMPAttributesDeprecations } from '../deprecations/filters';
-import { isMovableBlock } from './';
 import getDefaultMinimumBlockHeight from './getDefaultMinimumBlockHeight';
+import { isMovableBlock } from './';
 
 /**
  * Adds AMP attributes to every allowed AMP Story block.

assets/src/stories-editor/helpers/ensureAllowedBlocksOnPaste.js

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import getPageBlockByName from './getPageBlockByName';
 import { ALLOWED_CHILD_BLOCKS } from '../constants';
+import getPageBlockByName from './getPageBlockByName';
 
 /**
  * Ensure that only allowed blocks are pasted.

assets/src/stories-editor/helpers/maybeUpdateFontSize.js

@@ -6,9 +6,9 @@ import { dispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { MAX_FONT_SIZE, MIN_FONT_SIZE } from '../../common/constants';
 import calculateFontSize from './calculateFontSize';
 import getBlockInnerTextElement from './getBlockInnerTextElement';
-import { MAX_FONT_SIZE, MIN_FONT_SIZE } from '../../common/constants';
 
 const { updateBlockAttributes } = dispatch( 'core/block-editor' );
 

includes/class-amp-story-post-type.php

@@ -179,14 +179,7 @@ public static function register() {
 					[
 						'amp/amp-story-page',
 						[],
-						[
-							[
-								'amp/amp-story-text',
-								[
-									'placeholder' => __( 'Write text…', 'amp' ),
-								],
-							],
-						],
+						[],
 					],
 				],
 			]