[AMP Stories] Add template Inserter

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

@@ -371,6 +371,7 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay
 
 	#amp-story-controls {
 		text-align: right;
+		padding-right: 20px;
 	}
 
 	#amp-story-controls .amp-story-controls-reorder {
@@ -385,8 +386,8 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay
 	}
 
 	.amp-story-controls-reorder-cancel {
-		padding-top: 2px;
-		padding-bottom: 2px;
+		padding-top: 5px;
+		padding-bottom: 5px;
 		margin-right: 20px;
 		display: inline-flex;
 	}
@@ -723,6 +724,155 @@ div[data-type="amp/amp-story-page"] .wp-block-image {
  * 10. Custom Components
  */
 
+/*
+ * Template Inserter Component.
+ */
+
+#amp-story-controls .editor-inserter__amp-inserter {
+	height: 48px;
+	width: 48px;
+	background-color: #0085BA;
+	border-radius: 50%;
+	margin-right: 10px;
+}
+
+#amp-story-controls .editor-inserter__amp-inserter span:first-of-type,
+.amp-story-controls-reorder span:first-of-type {
+	display: none;
+}
+
+#amp-story-controls .editor-inserter__amp-inserter svg {
+	margin: 0 auto;
+}
+
+.amp-story-controls-reorder {
+	box-sizing: border-box;
+	height: 49px;
+	width: 49px;
+	border: 1px solid #AAAEB3;
+	border-radius: 50%;
+}
+
+.amp-stories__template-inserter__popover.components-popover .components-popover__content:not(.is-mobile) {
+	width: 386px;
+	height: 400px;
+	padding: 2px;
+	transform: translateX(-90%);
+}
+.components-popover:not(.is-without-arrow):not(.is-mobile).is-top::before {
+	border: 8px solid #e2e4e7;
+}
+.components-popover:not(.is-without-arrow):not(.is-mobile).is-top::after {
+	border: 8px solid #fff;
+}
+.components-popover:not(.is-without-arrow):not(.is-mobile).is-top::before,
+.components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::before,
+.components-popover:not(.is-without-arrow):not(.is-mobile).is-top::after,
+.components-popover:not(.is-without-arrow):not(.is-mobile).is-bottom::after {
+	border-bottom-style: solid;
+	border-left-color: transparent;
+	border-right-color: transparent;
+	border-top: none;
+	margin-left: -15px;
+}
+
+@media (min-width: 782px) {
+	.amp-stories__template-inserter__popover.block-editor-inserter__popover:not(.is-mobile) > .components-popover__content {
+		overflow-y: scroll;
+	}
+}
+
+@media (min-width: 600px) {
+	.amp-stories__template-inserter__popover .block-editor-block-list__block .block-editor-block-list__block-edit {
+		margin: 0;
+	}
+}
+
+.edit-post-layout:not(.is-sidebar-opened) .amp-stories__template-inserter__popover.components-popover .components-popover__content:not(.is-mobile) {
+	left: initial;
+	transform: none;
+}
+
+.amp-stories__template-inserter__popover.block-editor-inserter__popover .block-editor-block-types-list {
+	margin: 0;
+	padding: 5px;
+}
+
+.amp-stories__template-inserter__popover.components-popover.is-top .components-popover__content {
+	bottom: initial;
+}
+.amp-stories__template-inserter__popover.components-popover:not(.is-without-arrow):not(.is-mobile).is-top {
+	margin-top: 55px;
+}
+
+.amp-stories__editor-inserter__results li {
+	display: block;
+	list-style-type: none;
+	width: 160px;
+	height: 268px;
+	float: left;
+	margin: 15px;
+}
+
+.amp-stories__editor-inserter__results li amp-story-page,
+.amp-stories__editor-inserter__results li amp-story-grid-layer {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.amp-stories__editor-inserter__results .block-editor-block-preview {
+	width: 160px;
+	height: 268px;
+	margin: 10px;
+	padding: 0;
+}
+
+.amp-stories__editor-inserter__results .block-editor-block-preview .block-editor-block-preview__content,
+.amo-stories__editor-inserter__results .components-placeholder {
+	padding: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.amp-stories__blank-page-inserter {
+	height: 100%;
+	width: 100%;
+}
+
+.amp-stories__blank-page-inserter svg {
+	margin: 0 auto;
+}
+
+.amp-stories__editor-inserter__results .block-editor-block-preview {
+	pointer-events: initial;
+}
+
+.amp-stories__editor-inserter__results .block-list-appender,
+.amo-stories__editor-inserter__results .editor-block-list__insertion-point {
+	display: none;
+}
+
+.amp-stories__editor-inserter__results .block-editor-block-preview .block-editor-block-preview__content .components-disabled {
+	transform: initial;
+	text-align: initial;
+}
+.amp-stories__editor-inserter__results .components-disabled,
+.amp-stories__editor-inserter__results .components-disabled div:first-of-type,
+.amp-stories__editor-inserter__results .components-disabled .editor-inner-blocks {
+	padding: 0;
+	height: 100%;
+	width: 100%;
+}
+
+.amp-stories__editor-inserter__results .block-editor-block-preview .wp-block {
+	transform: scale(0.48) translateX(-40%) translateY(-40%);
+}
+
+.amp-stories__editor-inserter__results .block-editor-block-types-list {
+	padding: 10px;
+}
+
 /*
  * Preview Picker component
  *

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

@@ -47,6 +47,10 @@ import { ALLOWED_BLOCKS, ALLOWED_TOP_LEVEL_BLOCKS, ALLOWED_CHILD_BLOCKS, MEDIA_I
 import store from './stores/amp-story';
 import { registerPlugin } from '@wordpress/plugins';
 
+// Register plugin.
+// @todo Consider importing automatically, especially in case of more plugins.
+import './plugins/template-menu-item';
+
 const {
 	getSelectedBlockClientId,
 	getBlocksByClientId,

assets/src/blocks/amp-story-text/index.js

@@ -26,6 +26,7 @@ export const name = 'amp/amp-story-text';
 const supports = {
 	className: false,
 	anchor: true,
+	reusable: true,
 };
 
 const schema = {

assets/src/blocks/amp-story/index.js

@@ -7,8 +7,9 @@ import { InnerBlocks } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { BLOCK_ICONS, IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from '../../constants';
+import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from '../../constants';
 import EditPage from './edit';
+import blockIcon from '../../../images/amp-story-page-icon.svg';
 
 export const name = 'amp/amp-story-page';
 
@@ -53,9 +54,13 @@ const schema = {
 export const settings = {
 	title: __( 'Page', 'amp' ),
 	category: 'layout',
-	icon: BLOCK_ICONS[ 'amp/amp-story-page' ],
+	icon: blockIcon( { width: 24, height: 24 } ),
 	attributes: schema,
 
+	supports: {
+		reusable: true,
+	},
+
 	/*
      * <amp-story-page>:
      *   mandatory_parent: "AMP-STORY"

assets/src/components/editor-carousel/block-preview.js → assets/src/components/block-preview.js

@@ -6,14 +6,16 @@ import { Disabled } from '@wordpress/components';
 import { BlockEdit } from '@wordpress/block-editor';
 
 /**
- * BlockPreview component that is used within the reordering UI.
+ * Block Preview Component: It renders a preview given a block name and attributes.
  *
- * @return {Object} Block preview.
+ * @param {Object} props Component props.
+ *
+ * @return {WPElement} Rendered element.
  */
-const BlockPreview = ( { clientId, name, attributes, innerBlocks } ) => {
+const BlockPreview = ( { clientId, name, attributes, innerBlocks = [] } ) => {
 	const block = createBlock( name, attributes, innerBlocks );
 	return (
-		<Disabled className="editor-block-preview__content editor-styles-wrapper" aria-hidden>
+		<Disabled className="block-editor-block-preview__content editor-styles-wrapper" aria-hidden>
 			<BlockEdit
 				name={ name }
 				focus={ false }

assets/src/components/editor-carousel/reorderer-item.js

@@ -9,7 +9,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import BlockPreview from './block-preview';
+import { BlockPreview } from '../';
 
 /**
  * Parses drag & drop events to ensure the event contains valid transfer data.

assets/src/components/index.js

@@ -1,11 +1,13 @@
 export { default as AnimationControls } from './animation-controls';
 export { default as AnimationOrderPicker } from './animation-order-picker';
 export { default as BlockNavigation } from './block-navigation';
+export { default as BlockPreview } from './block-preview';
 export { default as EditorCarousel } from './editor-carousel';
 export { default as StoryControls } from './story-controls';
 export { default as Shortcuts } from './shortcuts';
 export { default as StoryBlockDropZone } from './story-block-drop-zone';
 export { default as StoryBlockMover } from './block-mover';
+export { default as TemplateInserter } from './template-inserter';
 export { default as FontFamilyPicker } from './font-family-picker';
 export { default as PreviewPicker } from './preview-picker';
 export { default as getFeaturedImageNotice } from './get-featured-image-notice';

assets/src/components/story-controls.js

@@ -9,10 +9,15 @@
 import { __ } from '@wordpress/i18n';
 import { IconButton, Button } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
-import { Inserter } from '@wordpress/block-editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import { TemplateInserter } from './';
+import reorderIcon from '../../images/reorder.svg';
+
 function StoryControls( { isReordering, startReordering, saveOrder, resetOrder } ) {
 	if ( isReordering ) {
 		return (
@@ -38,29 +43,10 @@ function StoryControls( { isReordering, startReordering, saveOrder, resetOrder }
 
 	return (
 		<Fragment>
-			<Inserter
-				rootClientId=""
-				clientId=""
-				isAppender={ false }
-				position="bottom left"
-				title={ __( 'Add New Page', 'amp' ) }
-				style={ { position: 'relative' } }
-				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
-					<IconButton
-						icon="insert"
-						label={ __( 'Add New Page', 'amp' ) }
-						labelPosition="bottom left"
-						onClick={ onToggle }
-						className="editor-inserter__toggle"
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-						disabled={ disabled }
-					/>
-				) }
-			/>
+			<TemplateInserter />
 			<IconButton
 				className="amp-story-controls-reorder"
-				icon="sort"
+				icon={ reorderIcon( { width: 24, height: 19 } ) }
 				label={ __( 'Reorder Pages', 'amp' ) }
 				onClick={ startReordering }
 			/>