Merge pull request #3020 from ampproject/fix/3016-template_inserter

Fix Template Inserter

assets/src/stories-editor/components/template-inserter/edit.css

@@ -37,6 +37,7 @@
 }
 
 .amp-stories__editor-inserter__results .components-spinner {
+	margin-left: calc(50% - 9px);
 	margin-right: calc(50% - 9px);
 	margin-top: 128px;
 }
@@ -102,10 +103,12 @@
 	height: 268px;
 	margin: 10px;
 	padding: 0;
+	overflow: hidden;
 }
 
 .amp-stories__editor-inserter__results .block-editor-block-preview .block-editor-block-preview__content,
 .amo-stories__editor-inserter__results .components-placeholder {
+	position: initial;
 	padding: 0;
 	width: 100%;
 	height: 100%;
@@ -125,6 +128,10 @@
 	margin: 0 auto;
 }
 
+.amp-stories__blank-page-inserter span {
+	display: none;
+}
+
 .amp-stories__editor-inserter__results .block-editor-block-preview {
 	pointer-events: initial;
 }

includes/admin/class-amp-story-templates.php

@@ -16,7 +16,7 @@ class AMP_Story_Templates {
 	 *
 	 * @var string
 	 */
-	const STORY_TEMPLATES_VERSION = '0.3.5';
+	const STORY_TEMPLATES_VERSION = '0.3.6';
 
 	/**
 	 * Slug for templates' taxonomy.
@@ -133,7 +133,7 @@ public function import_story_templates() {
 				continue;
 			}
 
-			$post_content      = str_replace( 'AMP_STORY_TEMPLATES_URL', amp_get_asset_url( 'images/story-templates' ), $post_content );
+			$post_content      = str_replace( 'AMP_STORY_TEMPLATES_URL', amp_get_asset_url( 'images/stories-editor/story-templates' ), $post_content );
 			$existing_template = $this->template_exists( $template['name'] );
 			if ( $existing_template > 0 ) {
 				$this->maybe_update_template( $existing_template, $template, $post_content );

includes/templates/story-templates/quote.html

@@ -1,11 +1,11 @@
-<!-- wp:amp/amp-story-page {"mediaType":"image","autoAdvanceAfterDuration":0,"backgroundColors":"[{\u0022color\u0022:\u0022#8c58e3\u0022},{\u0022color\u0022:\u0022#fff9e5\u0022}]"} -->
-<amp-story-page style="background-color:#ffffff" id="5da957b0-ee47-4f6c-9eff-79dd82e13f26" class="wp-block-amp-amp-story-page"><amp-story-grid-layer template="fill"><amp-img layout="fill" src="AMP_STORY_TEMPLATES_URL/quote-bg.jpg" style="object-position:initial"></amp-img></amp-story-grid-layer><amp-story-grid-layer template="fill" style="background-image:linear-gradient(to bottom, #8c58e3, #fff9e5);opacity:1"></amp-story-grid-layer>
+<!-- wp:amp/amp-story-page {"mediaType":"image","autoAdvanceAfterDuration":0,"backgroundColors":"[{\u0022color\u0022:\u0022#8c58e3\u0022},{\u0022color\u0022:\u0022#fff9e5\u0022}]","overlayOpacity":50} -->
+<amp-story-page style="background-color:#ffffff" id="5da957b0-ee47-4f6c-9eff-79dd82e13f26" class="wp-block-amp-amp-story-page"><amp-story-grid-layer template="fill"><amp-img layout="fill" src="AMP_STORY_TEMPLATES_URL/quote-bg.jpg" style="object-position:initial"></amp-img></amp-story-grid-layer><amp-story-grid-layer template="fill" style="background-image:linear-gradient(to bottom, #8c58e3, #fff9e5);opacity:0.5"></amp-story-grid-layer>
 
     <!-- wp:image {"width":322,"height":200,"positionTop":63.29,"positionLeft":0.91} -->
     <figure class="wp-block-image is-resized"><img src="AMP_STORY_TEMPLATES_URL/quote-image.png" alt="" width="322" height="200"/></figure>
     <!-- /wp:image -->
 
     <!-- wp:quote {"width":328,"align":"center","className":"wp-block-quote is-style-white","positionTop":8,"positionLeft":0} -->
-    <blockquote style="text-align:center" class="wp-block-quote is-style-white"><p>Everyone soon or late comes round Rome</p><cite>Robert Browning</cite></blockquote>
+    <blockquote class="wp-block-quote has-text-align-center is-style-white"><p>Everyone soon or late comes round Rome</p><cite>Robert Browning</cite></blockquote>
     <!-- /wp:quote --></amp-story-page>
 <!-- /wp:amp/amp-story-page -->

includes/templates/story-templates/travel-cta.html

@@ -1,5 +1,5 @@
-<!-- wp:amp/amp-story-page {"mediaType":"image","autoAdvanceAfterDuration":0,"backgroundColors":"[{\u0022color\u0022:\u0022#8c58e3\u0022},{\u0022color\u0022:\u0022#fff9e5\u0022}]"} -->
-<amp-story-page style="background-color:#ffffff" id="4c4ad30d-0662-4860-a0d2-765843911c47" class="wp-block-amp-amp-story-page"><amp-story-grid-layer template="fill"><amp-img layout="fill" src="AMP_STORY_TEMPLATES_URL/cta-bg.jpg" style="object-position:initial"></amp-img></amp-story-grid-layer><amp-story-grid-layer template="fill" style="background-image:linear-gradient(to bottom, #8c58e3, #fff9e5);opacity:1"></amp-story-grid-layer>
+<!-- wp:amp/amp-story-page {"mediaType":"image","autoAdvanceAfterDuration":0,"backgroundColors":"[{\u0022color\u0022:\u0022#8c58e3\u0022},{\u0022color\u0022:\u0022#fff9e5\u0022}]","overlayOpacity":50} -->
+<amp-story-page style="background-color:#ffffff" id="4c4ad30d-0662-4860-a0d2-765843911c47" class="wp-block-amp-amp-story-page"><amp-story-grid-layer template="fill"><amp-img layout="fill" src="AMP_STORY_TEMPLATES_URL/cta-bg.jpg" style="object-position:initial"></amp-img></amp-story-grid-layer><amp-story-grid-layer template="fill" style="background-image:linear-gradient(to bottom, #8c58e3, #fff9e5);opacity:0.5"></amp-story-grid-layer>
     <!-- wp:image {"width":261,"height":195,"className":"wp-block-image is-resized is-style-rounded","positionTop":38,"positionLeft":12} -->
     <figure class="wp-block-image is-resized is-style-rounded"><img src="AMP_STORY_TEMPLATES_URL/cta-image.jpg" alt="" width="261" height="195"/></figure>
     <!-- /wp:image -->

tests/e2e/specs/stories-editor/story-templates.test.js

@@ -61,5 +61,75 @@ describe( 'Story Templates', () => {
 			const numberOfTemplates = await page.$$eval( '.block-editor-block-preview', ( templates ) => templates.length );
 			expect( numberOfTemplates ).toStrictEqual( 11 ); // 10 default templates plus the empty page.
 		} );
+
+		it( 'should insert the correct blocks and as skeletons when clicking on a template', async () => {
+			await createNewPost( { postType: 'amp_story' } );
+
+			await openTemplateInserter();
+
+			const nodes = await page.$x(
+				'//*[contains(@class,"block-editor-block-preview")]'
+			);
+
+			// Click on the template including quote and image.
+			await nodes[ 3 ].click();
+
+			const numberOfQuotes = await page.$$eval( '.amp-page-active .wp-block-quote', ( elements ) => elements.length );
+			expect( numberOfQuotes ).toStrictEqual( 1 );
+
+			const numberOfImages = await page.$$eval( '.amp-page-active .wp-block-image', ( elements ) => elements.length );
+			expect( numberOfImages ).toStrictEqual( 1 );
+
+			// Verify that only 2 child blocks were added.
+			const numberOfBlocks = await page.$$eval( '.amp-page-active .wp-block.editor-block-list__block', ( elements ) => elements.length );
+			expect( numberOfBlocks ).toStrictEqual( 2 );
+
+			// Verify that the image is added empty, as placeholder.
+			const placeholderImages = await page.$$eval( '.amp-page-active .wp-block-image.block-editor-media-placeholder', ( elements ) => elements.length );
+			expect( placeholderImages ).toStrictEqual( 1 );
+
+			// Verify that the block is not added with style.
+			const defaultStyledQuote = await page.$$eval( '.amp-page-active .wp-block-quote.is-style-white', ( elements ) => elements.length );
+			expect( defaultStyledQuote ).toStrictEqual( 0 );
+		} );
+
+		it( 'should contain expected content in the template preview', async () => {
+			await createNewPost( { postType: 'amp_story' } );
+
+			await openTemplateInserter();
+
+			// Wait until the templates are loaded and blocks accessible.
+			await page.waitForSelector( '.block-editor-block-preview .wp-block' );
+
+			const templateContents = await page.evaluate( () => {
+				const contents = [];
+				const previews = document.querySelectorAll( '.block-editor-block-preview .block-editor-inner-blocks.has-overlay' );
+				previews.forEach( function( preview, index ) {
+					contents[ index ] = preview.innerHTML;
+				} );
+				return contents;
+			} );
+
+			// Travel Tip template.
+			expect( templateContents[ 0 ] ).toContain( 'This template is great for sharing tips' );
+			// Quote template.
+			expect( templateContents[ 1 ] ).toContain( '<p>Everyone soon or late comes round Rome</p>' );
+			// Travel CTA template.
+			expect( templateContents[ 2 ] ).toContain( '<strong>Show packing tips</strong>' );
+			// Title Page.
+			expect( templateContents[ 3 ] ).toContain( 'wp-block-amp-amp-story-post-date has-text-color' );
+			// Vertical.
+			expect( templateContents[ 4 ] ).toContain( 'Journey into the past' );
+			// Fandom Title.
+			expect( templateContents[ 5 ] ).toContain( 'SPOILERS ALERT' );
+			// Fandom CTA.
+			expect( templateContents[ 6 ] ).toContain( '<strong>S</strong>tart Quiz' );
+			// Fandom Fact.
+			expect( templateContents[ 7 ] ).toContain( 'Robb Start made Jon his heir<br data-rich-text-line-break=\"true\">(in books)' );
+			// Fandom Fact Text.
+			expect( templateContents[ 8 ] ).toContain( 'One of the biggest things missing from the show is the fact that before his death, Robb Start legitimizes Jon Snow as a Stark and makes him his heir.' );
+			// Fandom Intro
+			expect( templateContents[ 9 ] ).toContain( 'got-logo.png' );
+		} );
 	} );
 } );