Try introducing nested blocks for amp-story support

amp.php

@@ -148,6 +148,7 @@ function amp_init() {
 
 	AMP_Theme_Support::init();
 	AMP_Post_Type_Support::add_post_type_support();
+	AMP_Story_Post_Type::register();
 	add_filter( 'request', 'amp_force_query_var_value' );
 	add_action( 'admin_init', 'AMP_Options_Manager::register_settings' );
 	add_action( 'wp_loaded', 'amp_editor_core_blocks' );
@@ -208,6 +209,10 @@ function amp_maybe_add_actions() {
 		return;
 	}
 
+	if ( is_singular( AMP_Story_Post_Type::POST_TYPE_SLUG ) ) {
+		return;
+	}
+
 	$is_amp_endpoint = is_amp_endpoint();
 
 	/**

assets/css/amp-editor-story-blocks.css

@@ -0,0 +1,14 @@
+
+.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;
+}
+

assets/js/amp-editor-blocks.js

@@ -100,7 +100,8 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 			},
 			ampPanelLabel: __( 'AMP Settings' )
 		},
-		hasThemeSupport: true
+		hasThemeSupport: true,
+		isCanonical: false
 	};
 
 	/**

blocks/amp-story/amp-story-grid-layer.js

@@ -0,0 +1,84 @@
+const { __ } = wp.i18n;
+const {
+	registerBlockType
+} = wp.blocks;
+const {
+	InspectorControls,
+	InnerBlocks
+} = wp.editor;
+const {
+	SelectControl
+} = wp.components;
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp/amp-story-grid-layer',
+	{
+		title: __( 'AMP Story Grid Layer' ),
+		category: 'layout',
+		icon: 'grid-view',
+
+		attributes: {
+			template: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'amp-story-grid-layer',
+				attribute: 'template',
+				default: 'fill'
+			}
+		},
+
+		/*
+		 * <amp-story-grid-layer>:
+		 *   mandatory_ancestor: "AMP-STORY-PAGE"
+		 *   descendant_tag_list: "amp-story-grid-layer-allowed-descendants"
+		 *
+		 * https://github.com/ampproject/amphtml/blob/87fe1d02f902be97b596b36ec3421592c83d241e/extensions/amp-story/validator-amp-story.protoascii#L172-L188
+		 */
+
+		edit( props ) {
+			const { isSelected, setAttributes } = props;
+			return [
+				isSelected && (
+					<InspectorControls key='inspector'>
+						<SelectControl
+							key="template"
+							label={ __( 'Template', 'amp' ) }
+							value={ props.attributes.template }
+							options={ [
+								{
+									value: 'fill',
+									label: __( 'Fill', 'amp' )
+								},
+								{
+									value: 'horizontal',
+									label: __( 'Horizontal', 'amp' )
+								},
+								{
+									value: 'thirds',
+									label: __( 'Thirds', 'amp' )
+								},
+								{
+									value: 'vertical',
+									label: __( 'Vertical', 'amp' )
+								}
+							] }
+							onChange={ value => ( setAttributes( { template: value } ) ) }
+						/>
+					</InspectorControls>
+				),
+				<InnerBlocks key='contents' />
+			];
+		},
+
+		save( { attributes } ) {
+			return (
+				<amp-story-grid-layer template={ attributes.template }>
+					<InnerBlocks.Content />
+				</amp-story-grid-layer>
+			);
+		}
+	}
+);

blocks/amp-story/amp-story-page.js

@@ -0,0 +1,76 @@
+const { __ } = wp.i18n;
+const {
+	registerBlockType
+} = wp.blocks;
+const {
+	InspectorControls,
+	InnerBlocks
+} = wp.editor;
+const {
+	TextControl,
+	Notice
+} = wp.components;
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp/amp-story-page',
+	{
+		title: __( 'AMP Story Page', 'amp' ),
+		category: 'layout',
+		icon: 'admin-page',
+
+		attributes: {
+			id: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'amp-story-page',
+				attribute: 'id'
+			}
+		},
+
+		/*
+		 * <amp-story-page>:
+		 *   mandatory_parent: "AMP-STORY"
+		 *   mandatory_min_num_child_tags: 1
+		 *   child_tag_name_oneof: "AMP-ANALYTICS"
+		 *   child_tag_name_oneof: "AMP-PIXEL"
+		 *   child_tag_name_oneof: "AMP-STORY-CTA-LAYER"
+		 *   child_tag_name_oneof: "AMP-STORY-GRID-LAYER"
+		 *
+		 * https://github.com/ampproject/amphtml/blob/87fe1d02f902be97b596b36ec3421592c83d241e/extensions/amp-story/validator-amp-story.protoascii#L146-L171
+		 * */
+
+		// @todo Show error if no ID is supplied.
+		edit( props ) {
+			const { isSelected, setAttributes } = props;
+			return [
+				isSelected && (
+					<InspectorControls key='inspector'>
+						<TextControl
+							type="text"
+							className="blocks-amp-story-page__id"
+							required={ true }
+							label={ __( 'ID', 'amp' ) }
+							value={ props.attributes.id }
+							onChange={ value => ( setAttributes( { id: value } ) ) }
+						/>
+					</InspectorControls>
+				),
+				! props.attributes.id && (
+					<Notice status="error" isDismissible={ false }>{ __( 'You must supply an ID for the page.', 'amp' ) }</Notice>
+				),
+				<InnerBlocks key='contents' />
+			];
+		},
+
+		save( { attributes } ) {
+			return (
+				<amp-story-page id={ attributes.id }>
+					<InnerBlocks.Content />
+				</amp-story-page>
+			);
+		}
+	}
+);

blocks/amp-story/index.js

@@ -0,0 +1,44 @@
+import './amp-story-page';
+import './amp-story-grid-layer';
+
+const blockParents = {
+	'amp/amp-story-grid-layer': 'amp-story-page',
+	'core/button': 'amp/amp-story-grid-layer',
+	'core/code': 'amp/amp-story-grid-layer',
+	'core/embed': 'amp/amp-story-grid-layer',
+	'core/image': 'amp/amp-story-grid-layer',
+	'core/list': 'amp/amp-story-grid-layer',
+	'core/paragraph': 'amp/amp-story-grid-layer',
+	'core/preformatted': 'amp/amp-story-grid-layer',
+	'core/pullquote': 'amp/amp-story-grid-layer',
+	'core/quote': 'amp/amp-story-grid-layer',
+	'core/table': 'amp/amp-story-grid-layer',
+	'core/verse': 'amp/amp-story-grid-layer',
+	'core/video': 'amp/amp-story-grid-layer'
+};
+
+function setBlockParent( props ) {
+	if ( blockParents[ props.name ] ) {
+		return Object.assign(
+			{},
+			props,
+			{ parent: [ blockParents[ props.name ] ] }
+		);
+	}
+	return props;
+}
+
+wp.hooks.addFilter(
+	'blocks.registerBlockType',
+	'amp/set-block-parents',
+	setBlockParent
+);
+
+// Remove all blocks that are not known to be allowed in AMP Stories (ref. amp-story-cta-layer-allowed-descendants).
+window.addEventListener( 'load', () => { // @todo Should be better event.
+	wp.blocks.getBlockTypes().forEach( function( blockType ) {
+		if ( 'amp/amp-story-page' !== blockType.name && ! blockParents[ blockType.name ] ) {
+			wp.blocks.unregisterBlockType( blockType.name );
+		}
+	} );
+} );

blocks/stories.js

@@ -0,0 +1,4 @@
+/**
+ * Import blocks.
+ */
+import './amp-story';

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

@@ -108,7 +108,7 @@ public function whitelist_block_atts_in_wp_kses_allowed_html( $tags, $context )
 	public function enqueue_block_editor_assets() {
 
 		// Enqueue script and style for AMP-specific blocks.
-		if ( amp_is_canonical() ) {
+		if ( amp_is_canonical() && AMP_Story_Post_Type::POST_TYPE_SLUG !== get_current_screen()->post_type ) {
 			wp_enqueue_style(
 				'amp-editor-blocks-style',
 				amp_get_asset_url( 'css/amp-editor-blocks.css' ),

includes/amp-helper-functions.php

@@ -312,6 +312,10 @@ function is_amp_endpoint() {
 		return true;
 	}
 
+	if ( is_singular( AMP_Story_Post_Type::POST_TYPE_SLUG ) ) {
+		return true;
+	}
+
 	return false;
 }
 

includes/class-amp-autoloader.php

@@ -31,6 +31,7 @@ class AMP_Autoloader {
 	private static $_classmap = array(
 		'AMP_Editor_Blocks'                           => 'includes/admin/class-amp-editor-blocks',
 		'AMP_Theme_Support'                           => 'includes/class-amp-theme-support',
+		'AMP_Story_Post_Type'                         => 'includes/class-amp-story-post-type',
 		'AMP_Response_Headers'                        => 'includes/class-amp-response-headers',
 		'AMP_Comment_Walker'                          => 'includes/class-amp-comment-walker',
 		'AMP_Template_Customizer'                     => 'includes/admin/class-amp-customizer',

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

@@ -17,7 +17,7 @@ class AMP_Post_Type_Support {
 	 * @return string[] Post types.
 	 */
 	public static function get_builtin_supported_post_types() {
-		return array_filter( array( 'post' ), 'post_type_exists' );
+		return array_filter( array( 'post', AMP_Story_Post_Type::POST_TYPE_SLUG ), 'post_type_exists' );
 	}
 
 	/**
@@ -27,7 +27,7 @@ public static function get_builtin_supported_post_types() {
 	 * @return string[] Post types eligible for AMP.
 	 */
 	public static function get_eligible_post_types() {
-		return array_merge(
+		return array_unique( array_merge(
 			self::get_builtin_supported_post_types(),
 			array( 'page' ),
 			array_values( get_post_types(
@@ -37,7 +37,7 @@ public static function get_eligible_post_types() {
 				),
 				'names'
 			) )
-		);
+		) );
 	}
 
 	/**