[WIP] Introduce amp-story support via Gutenberg blocks

amp.php

@@ -147,6 +147,7 @@ function amp_init() {
 	AMP_Theme_Support::init();
 	AMP_Validation_Manager::init();
 	AMP_Post_Type_Support::add_post_type_support();
+	AMP_Story_Post_Type::register();
 
 	if ( defined( 'WP_CLI' ) ) {
 		WP_CLI::add_command( 'amp', new AMP_CLI() );
@@ -213,6 +214,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-cta-layer.js

@@ -0,0 +1,129 @@
+const { __ } = wp.i18n;
+const {
+	registerBlockType
+} = wp.blocks;
+const {
+	InnerBlocks
+} = wp.editor;
+const {
+	Notice
+} = wp.components;
+const { Component } = wp.element;
+
+const {
+	select,
+	dispatch
+} = wp.data;
+const {
+	moveBlockToPosition,
+	removeBlock
+} = dispatch( 'core/editor' );
+
+const {
+	getBlock,
+	getBlockRootClientId,
+	getBlockOrder
+} = select( 'core/editor' );
+
+const ALLOWED_BLOCKS = [
+	'core/button',
+	'core/code',
+	'core/embed',
+	'core/image',
+	'core/list',
+	'core/paragraph',
+	'core/preformatted',
+	'core/pullquote',
+	'core/quote',
+	'core/table',
+	'core/verse',
+	'core/video'
+];
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp/amp-story-cta-layer',
+	{
+		title: __( 'AMP Story CTA Layer' ),
+		category: 'layout',
+		icon: 'grid-view',
+		parent: [ 'amp/amp-story-page' ],
+
+		/*
+		 * <amp-story-cta-layer>:
+		 *   mandatory_ancestor: "AMP-STORY-PAGE"
+		 *   descendant_tag_list: "amp-story-cta-layer-allowed-descendants"
+		 *
+		 * https://github.com/ampproject/amphtml/blob/87fe1d02f902be97b596b36ec3421592c83d241e/extensions/amp-story/validator-amp-story.protoascii#L172-L188
+		 */
+
+		edit: class extends Component {
+			constructor( props ) {
+				super( ...arguments );
+				this.props = props;
+				this.props.attributes.hasMultipleCtaBlocks = this.hasMoreThanOneCtaBlock();
+			}
+
+			shouldComponentUpdate() {
+				if ( ! this.props.attributes.hasMultipleCtaBlocks ) {
+					this.ensureBeingLastBlock();
+				}
+				return true;
+			}
+
+			componentDidMount() {
+				if ( this.props.attributes.hasMultipleCtaBlocks ) {
+					removeBlock( this.props.clientId );
+					dispatch( 'core/editor' ).createWarningNotice( __( 'Multiple CTA Layers are not allowed, the block was removed.', 'amp' ) );
+				}
+			}
+
+			ensureBeingLastBlock() {
+				// @todo Display notice if the block gets moved.
+				const rootClientID = getBlockRootClientId( this.props.clientId );
+				const order = getBlockOrder( rootClientID );
+
+				// If the CTA is not the last block, move it there.
+				if ( _.last( order ) !== this.props.clientId ) {
+					moveBlockToPosition( this.props.clientId, rootClientID, rootClientID, this.props.attributes.layout, order.length - 1 );
+				}
+			}
+
+			render() {
+				// In case of successful block removal this won't be visible.
+				if ( this.props.attributes.hasMultipleCtaBlocks ) {
+					return (
+						<Notice status="error" isDismissible={ false }>{ __( 'Multiple CTA Layers are not allowed. Please remove all but one.', 'amp' ) }</Notice>
+					);
+				}
+				return (
+					<InnerBlocks key='contents' allowedBlocks={ ALLOWED_BLOCKS } />
+				);
+			}
+
+			hasMoreThanOneCtaBlock() {
+				const parentBlock = getBlock( getBlockRootClientId( this.props.clientId ) );
+				if ( ! parentBlock ) {
+					return false;
+				}
+				let ctaBlocks = 0;
+				_.each( parentBlock.innerBlocks, function( child ) {
+					if ( 'amp/amp-story-cta-layer' === child.name ) {
+						ctaBlocks++;
+					}
+				} );
+				return 1 < ctaBlocks;
+			}
+		},
+
+		save( { attributes } ) {
+			return (
+				<amp-story-cta-layer template={ attributes.template }>
+					<InnerBlocks.Content />
+				</amp-story-cta-layer>
+			);
+		}
+	}
+);

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

@@ -0,0 +1,114 @@
+const { __ } = wp.i18n;
+const {
+	registerBlockType
+} = wp.blocks;
+const {
+	InspectorControls,
+	InnerBlocks
+} = wp.editor;
+const {
+	SelectControl
+} = wp.components;
+
+const ALLOWED_BLOCKS = [
+	'core/code',
+	'core/embed',
+	'core/image',
+	'core/list',
+	'core/paragraph',
+	'core/preformatted',
+	'core/pullquote',
+	'core/quote',
+	'core/table',
+	'core/verse',
+	'core/video'
+];
+
+function setBlockParent( props ) {
+	if ( ALLOWED_BLOCKS.includes( props.name ) ) {
+		return Object.assign(
+			{},
+			props,
+			{ parent: [ 'amp/amp-story-grid-layer' ] }
+		);
+	}
+	return props;
+}
+
+wp.hooks.addFilter(
+	'blocks.registerBlockType',
+	'amp/set-block-parents',
+	setBlockParent
+);
+
+/**
+ * Register block.
+ */
+export default registerBlockType(
+	'amp/amp-story-grid-layer',
+	{
+		title: __( 'AMP Story Grid Layer' ),
+		category: 'layout',
+		icon: 'grid-view',
+
+		parent: [ 'amp/amp-story-page' ],
+		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 { setAttributes } = props;
+			return [
+				<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' allowedBlocks={ ALLOWED_BLOCKS } />
+			];
+		},
+
+		save( { attributes } ) {
+			return (
+				<amp-story-grid-layer template={ attributes.template }>
+					<InnerBlocks.Content />
+				</amp-story-grid-layer>
+			);
+		}
+	}
+);