[AMP Stories] Add template Inserter

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/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,6 +1,7 @@
 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';

assets/src/components/template-inserter/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown, IconButton } from '@wordpress/components';
+import { Dropdown, IconButton, Button } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { createBlock, cloneBlock } from '@wordpress/blocks';
@@ -11,7 +11,7 @@ import { compose } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import BlockPreview from './block-preview';
+import { BlockPreview } from '../';
 import pageIcon from '../../../images/add-page-inserter.svg';
 import { ICONS } from './../../constants';
 
@@ -102,16 +102,20 @@ class TemplateInserter extends Component {
 											className="amp-stories__blank-page-inserter editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper"
 										/>
 									</div>
-									{ storyTemplates && storyTemplates.map( ( item ) =>
-										<BlockPreview
+									{ storyTemplates && storyTemplates.map( ( item ) => (
+										<Button
 											key={ `template-preview-${ item.id }` }
-											name="core/block"
-											attributes={ { ref: item.id } }
 											onClick={ () => {
 												onSelect( item );
 											} }
-										/>
-									) }
+											className="components-button block-editor-block-preview"
+										>
+											<BlockPreview
+												name="core/block"
+												attributes={ { ref: item.id } }
+											/>
+										</Button>
+									) ) }
 								</div>
 							</div>
 						</div>