[amp-stories sub-task] Grid layers layout

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

@@ -1,3 +1,162 @@
 div[data-type="amp/amp-story-page"] {
-	background-color: #ddffdd;
-}
+	border: 1px solid #ffdddd;
+}
+
+.editor-block-list__layout div[data-type="amp/amp-story-page"] {
+	padding: 0;
+	margin: 60px auto 0;
+}
+
+@media (min-width: 600px) {
+	div[data-type="amp/amp-story-page"] .editor-block-list__block {
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.components-popover.editor-inserter__amp .components-popover__content {
+	height: 200px;
+}
+
+div[data-type="amp/amp-story-page"] * {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+div[data-type="amp/amp-story-page"],
+div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout:first-of-type {
+	margin: auto;
+	max-height: 75vh !important;
+	max-width: 45vh !important;
+	min-width: 320px !important;
+	min-height: 533px;
+}
+
+.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] .editor-inner-blocks .editor-block-list__layout {
+	min-height: initial !important;
+}
+
+/* Make layer be exactly on top of each other */
+.editor-block-list__layout div[data-type="amp/amp-story-page"].editor-block-list__block:first-child .editor-block-list__block-edit {
+	margin: 0;
+}
+
+.editor-block-list__layout div[data-type="amp/amp-story-page"].editor-block-list__block .editor-block-list__block-edit, .editor-block-list__layout .editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit {
+	margin: 0;
+}
+
+div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout .editor-block-list__layout {
+	background-color: initial;
+}
+
+.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"] {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+}
+
+.amp-grid-template .editor-block-list__layout:first-of-type {
+	display: grid;
+	overflow: hidden;
+	padding: 68px 32px 32px;
+}
+
+.amp-grid-template .editor-block-list__layout:first-of-type * {
+	margin: 0;
+	box-sizing: border-box;
+}
+
+.amp-grid-template-horizontal .editor-block-list__layout:first-of-type {
+	grid-auto-flow: column !important;
+	grid-template-rows: 100% !important;
+	-ms-flex-line-pack: stretch;
+	align-content: stretch;
+	-webkit-box-align: start;
+	-ms-flex-align: start;
+	align-items: start;
+	grid-gap: 16px;
+	-webkit-box-pack: start;
+	-ms-flex-pack: start;
+	justify-content: start;
+}
+
+.amp-grid-template-vertical .editor-block-list__layout:first-of-type {
+	grid-auto-flow: row;
+	grid-template-columns: 100%;
+	align-content: start;
+	grid-gap: 16px;
+	-webkit-box-pack: stretch;
+	-ms-flex-pack: stretch;
+	justify-content: stretch;
+	justify-items: start;
+}
+
+.amp-grid-template-thirds .editor-block-list__layout:first-of-type {
+	grid-template-rows: 1fr 1fr 1fr;
+	grid-template-areas: "upper-third" "middle-third" "lower-third";
+}
+
+div[data-amp-position="upper-third"] {
+	grid-area: upper-third / lower-third / lower-third / lower-third;
+}
+
+div[data-amp-position="middle-third"] {
+	grid-area: middle-third / lower-third / lower-third / lower-third;
+}
+
+div[data-amp-position="lower-third"] {
+	grid-area: lower-third / lower-third / lower-third / lower-third;
+}
+
+
+.amp-grid-template-fill .editor-block-list__layout > :first-child {
+	bottom: 0;
+	display: block;
+	height: auto;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: auto;
+}
+
+.amp-grid-template-fill > :not(:first-child) {
+	display: none;
+}
+
+.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] {
+	position: absolute;
+	height: 20%;
+	width: 100%;
+	bottom: 0;
+}
+
+.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected,
+.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected .editor-block-list__block {
+	border: 1px dotted #99c2e0;
+}
+
+.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected ~ div[data-type="amp/amp-story-grid-layer"],
+.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected-parent ~ div[data-type="amp/amp-story-grid-layer"]{
+	display: none;
+}
+
+.editor-selectors {
+	position: absolute;
+	right: -150px;
+	bottom: 0;
+	width: 100px;
+	z-index: 80;
+}
+
+.editor-selectors .component-editor__selector {
+	margin-bottom: 2px;
+}
+
+.editor-selectors .component-editor__selector button {
+	cursor: pointer;
+}
+
+.editor-selectors .is-selected.component-editor__selector button {
+	text-decoration: underline;
+}

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

@@ -0,0 +1,217 @@
+/* exported ampStoryEditorBlocks */
+/* global lodash */
+/* eslint no-magic-numbers: [ "error", { "ignore": [ -1 ] } ] */
+
+var ampStoryEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
+	var component, __;
+
+	__ = wp.i18n.__;
+
+	component = {
+
+		/**
+		 * Holds data.
+		 */
+		data: {
+			allowedBlocks: [
+				'core/code',
+				'core/embed',
+				'core/image',
+				'core/list',
+				'core/paragraph',
+				'core/preformatted',
+				'core/pullquote',
+				'core/quote',
+				'core/table',
+				'core/verse',
+				'core/video'
+			],
+			ampStoryPositionOptions: [
+				{
+					value: 'upper-third',
+					label: __( 'Upper Third', 'amp' )
+				},
+				{
+					value: 'middle-third',
+					label: __( 'Middle Third', 'amp' )
+				},
+				{
+					value: 'lower-third',
+					label: __( 'Lower Third', 'amp' )
+				}
+			]
+		}
+	};
+
+	/**
+	 * Add filters.
+	 */
+	component.boot = function boot() {
+		wp.hooks.addFilter( 'blocks.registerBlockType', 'ampStoryEditorBlocks/addAttributes', component.addAMPAttributes );
+		wp.hooks.addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/filterEdit', component.filterBlocksEdit );
+		wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-data-align', component.addWrapperProps );
+		wp.hooks.addFilter( 'blocks.getSaveContent.extraProps', 'ampStoryEditorBlocks/addExtraAttributes', component.addAMPExtraProps );
+	};
+
+	/**
+	 * Add wrapper props to the blocks within AMP Story layers.
+	 *
+	 * @param {Object} BlockListBlock BlockListBlock element.
+	 * @return {Function} Handler.
+	 */
+	component.addWrapperProps = function( BlockListBlock ) {
+		var el = wp.element.createElement,
+			select = wp.data.select( 'core/editor' );
+		return function( props ) {
+			var parentClientId,
+				parentBlock,
+				ampStoryPosition;
+			if ( -1 === component.data.allowedBlocks.indexOf( props.block.name ) || ! props.block.attributes.ampStoryPosition ) {
+				return [
+					el( BlockListBlock, _.extend( {
+						key: 'original'
+					}, props ) )
+				];
+			}
+
+			parentClientId = select.getBlockRootClientId( props.block.clientId );
+			parentBlock = select.getBlock( parentClientId );
+			ampStoryPosition = props.block.attributes.ampStoryPosition;
+
+			if ( 'thirds' !== parentBlock.attributes.template ) {
+				ampStoryPosition = null;
+			}
+
+			var newProps = lodash.assign(
+				{},
+				props,
+				{
+					wrapperProps: lodash.assign(
+						{},
+						props.wrapperProps,
+						{
+							'data-amp-position': ampStoryPosition
+						}
+					)
+				}
+			);
+
+			return el(
+				BlockListBlock,
+				newProps
+			);
+		};
+	};
+	/**
+	 * Add extra attributes to save to DB.
+	 *
+	 * @param {Object} props Properties.
+	 * @param {Object} blockType Block type.
+	 * @param {Object} attributes Attributes.
+	 * @return {Object} Props.
+	 */
+	component.addAMPExtraProps = function addAMPExtraProps( props, blockType, attributes ) {
+		var ampAttributes = {};
+		if ( -1 === component.data.allowedBlocks.indexOf( blockType.name ) ) {
+			return props;
+		}
+
+		if ( attributes.ampStoryPosition ) {
+			ampAttributes[ 'grid-area' ] = attributes.ampStoryPosition;
+		}
+
+		return _.extend( ampAttributes, props );
+	};
+
+	/**
+	 * Add AMP attributes to every allowed AMP Story block.
+	 *
+	 * @param {Object} settings Settings.
+	 * @param {string} name Block name.
+	 * @return {Object} Settings.
+	 */
+	component.addAMPAttributes = function addAMPAttributes( settings, name ) {
+		// Add the "thirds" template position option.
+		if ( -1 !== component.data.allowedBlocks.indexOf( name ) ) {
+			if ( ! settings.attributes ) {
+				settings.attributes = {};
+			}
+			settings.attributes.ampStoryPosition = {
+				type: 'string'
+			};
+		}
+		return settings;
+	};
+
+	/**
+	 * Filters blocks edit function of all blocks.
+	 *
+	 * @param {Function} BlockEdit Edit function.
+	 * @return {Function} Edit function.
+	 */
+	component.filterBlocksEdit = function filterBlocksEdit( BlockEdit ) {
+		var el = wp.element.createElement,
+			select = wp.data.select( 'core/editor' );
+
+		return function( props ) {
+			var attributes = props.attributes,
+				name = props.name,
+				inspectorControls,
+				InspectorControls = wp.editor.InspectorControls,
+				PanelBody = wp.components.PanelBody,
+				SelectControl = wp.components.SelectControl,
+				parentClientId = select.getBlockRootClientId( props.clientId ),
+				parentBlock;
+
+			if ( -1 === component.data.allowedBlocks.indexOf( name ) ) {
+				// Return original.
+				return [
+					el( BlockEdit, _.extend( {
+						key: 'original'
+					}, props ) )
+				];
+			}
+
+			parentBlock = select.getBlock( parentClientId );
+			if ( 'amp/amp-story-grid-layer' !== parentBlock.name ) {
+				// Return original.
+				return [
+					el( BlockEdit, _.extend( {
+						key: 'original'
+					}, props ) )
+				];
+			}
+
+			if ( 'thirds' !== parentBlock.attributes.template ) {
+				// Return original.
+				return [
+					el( BlockEdit, _.extend( {
+						key: 'original'
+					}, props ) )
+				];
+			}
+
+			inspectorControls = el( InspectorControls, { key: 'inspector' },
+				el( PanelBody, { title: __( 'AMP Story Settings', 'amp' ) },
+					el( SelectControl, {
+						label: __( 'Placement', 'amp' ),
+						value: attributes.ampStoryPosition,
+						options: component.data.ampStoryPositionOptions,
+						onChange: function( value ) {
+							props.setAttributes( { ampStoryPosition: value } );
+						}
+					} )
+				)
+			);
+
+			return [
+				inspectorControls,
+				el( BlockEdit, _.extend( {
+					key: 'original'
+				}, props ) )
+			];
+		};
+	};
+
+	return component;
+}() );

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

@@ -50,6 +50,7 @@ export default registerBlockType(
 		category: 'layout',
 		icon: 'grid-view',
 		parent: [ 'amp/amp-story-page' ],
+		inserter: false,
 
 		/*
 		 * <amp-story-cta-layer>: