Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Template Inserter #3020

Merged
merged 7 commits into from
Aug 13, 2019
Merged

Fix Template Inserter #3020

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cdbd07e
Update template style.
miina Aug 13, 2019
aafaa08
Fix template background image display.
miina Aug 13, 2019
09e0964
Fix spinner style, too.
miina Aug 13, 2019
d27f877
Add some basic template functionality test.
miina Aug 13, 2019
23eb566
Add tests for ensuring that templates have expected content within pr…
miina Aug 13, 2019
36a8be1
Updates after eslint change.
miina Aug 13, 2019
0c72454
Merge develop.
miina Aug 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions assets/src/stories-editor/components/template-inserter/edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
}

.amp-stories__editor-inserter__results .components-spinner {
margin-left: calc(50% - 9px);
margin-right: calc(50% - 9px);
margin-top: 128px;
}
Expand Down Expand Up @@ -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%;
Expand All @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions includes/admin/class-amp-story-templates.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 );
Expand Down
6 changes: 3 additions & 3 deletions includes/templates/story-templates/quote.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
4 changes: 2 additions & 2 deletions includes/templates/story-templates/travel-cta.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
Expand Down
70 changes: 70 additions & 0 deletions tests/e2e/specs/stories-editor/story-templates.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds like an ideal use case for Array.prototype.reduce :-)

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' );
} );
} );
} );