Gutenboarding: add new template designs #42354

ramonjd · 2020-05-18T23:55:49Z

Changes proposed in this Pull Request

⚠️ #42353 ~~must be merged first~~ merged

Questions

What is the relationship between theme and design/template? For example, how do we distinguish between Bowen and Coutoire?
I've been determining the fonts by looking at the heading and base fonts for the demo sites, e.g., https://coutoiredemo.wordpress.com/ Is this correct?

TODO

Add the rest of the new themes/designs from Gutenboarding: Update template files with new starter design exports #42353
Get some indication on how to properly test this
Add feature flag for testing? Gutenboarding: Update template files with new starter design exports #42353 (comment)
Ask if any of the new designs should be "premium". See: Gutenborading: premium design flow #42377
Generate preview images: https://github.com/Automattic/wp-calypso/blob/master/bin/generate-gutenboarding-design-thumbnails.js (Re-generate after Gutenboarding: improve preview quality #43104 lands)

Testing instructions

Head over to /new
Make sure the following designs feature in /new/design: [TO COME]
Ensure that the font selector and preview works for each design
Create a site using each design, checking that the resulting homepage matches the theme/design

Fixes #42208

matticbot · 2020-05-18T23:55:50Z

Test live: https://calypso.live/?branch=add/gutenboarding-new-template-designs

ramonjd · 2020-05-18T23:56:57Z

client/landing/gutenboarding/available-designs.ts

+			slug: 'barnsbury',
+			template: 'barnsbury',
+			theme: 'barnsbury',
+			src: 'https://public-api.wordpress.com/rest/v1/template/demo/barnsbury/barnsbury/',


What's the relationship between design and theme?

I can't find a corresponding "design" for barnsbury.

@simison I can't remember how you generated the static images, e.g., #40868

I just took a screenshot from the demo file in #42353

Update: just saw that you replied in slack 🙇

Thanks!!!

Instructions on top of https://github.com/Automattic/wp-calypso/blob/master/bin/generate-gutenboarding-design-thumbnails.js

client/landing/gutenboarding/available-designs.ts

ramonjd · 2020-05-19T00:00:40Z

static/page-templates/page-templates.json

+		},
+		{
+			"title": "barnsbury",
+			"demo": "https://barnsburydemo.wordpress.com/"


What the point of this array? Does the public-api.wordpress.com/rest/v1/template/demo API need it to generate the demo?

Apologies for the 28-days-late answer to this question, but that API endpoint doesn't use this file. I don't think the file is currently used anywhere at all, actually! I wonder if this file was a precursor to what we now have in available-designs-config.json? For consistency though, I don't see an issue with adding them here, and eventually we'll want to have an endpoint that can list info similar to this, I suppose...

I don't think the file is currently used anywhere at all, actually!

Thanks! That's what I was thinking! I just wanted to make sure I wasn't missing something again. 🥴

I don't think it is used anywhere neither.

@johnHackworth remember details?

I just came across it yesterday. It's used by the verticals MC tool only. :)

There might be scope to simplify/merge these config files. We're moving them over to the server for now, mainly to reduce the number of remote gets we're doing in our APIs, but also since devs are the only ones updating them anyway.

There might be scope to simplify/merge these config files.

Yep, see also #40587

matticbot · 2020-05-19T00:08:10Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~464 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding      +3346 B  (+0.2%)     +464 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

ianstewart · 2020-06-08T20:03:13Z

I've been determining the fonts by looking at the heading and base fonts for the demo sites, e.g., https://coutoiredemo.wordpress.com/ Is this correct?

@alaczek has prepared a set of source sites that use fonts available in the Gutenboarding flow for these "starter designs".

@alaczek can you work with Ramon's team to ensure these display as intended?

ramonjd · 2020-06-09T02:50:03Z

@alaczek has prepared a set of source sites that use fonts available in the Gutenboarding flow for these "starter designs".

There were a couple of source sites in @ianstewart's spreadsheet I wasn't sure about. Here's what I could glean from them.

Coutoir
https://gutenboardinghp20.wordpress.com/

headings: 'EB Garamond',
base: 'Work Sans',

Leven
https://gutenboardinghp21.wordpress.com/
headings: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;

base: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

They're using fonts we're not loading in Gutenboarding at the moment. Would you know which we should use (if any)?

Thanks

alaczek · 2020-06-11T05:12:46Z

There were two sets mentioned in #42120. I only did the first set .

Twenty Twenty, Coutoire, and Leven are not updated, so they should not be included in this PR. But I'll add this to my to-do list and try to tackle tomorrow or on Monday. So you could either:

wait for me to update the second set, then update this PR and deploy
remove them from this PR, deploy, and start a new PR when the second set is ready.

ramonjd · 2020-06-11T06:05:51Z

Twenty Twenty, Coutoire, and Leven are not updated, so they should not be included in this PR. But I'll add this to my to-do list and try to tackle tomorrow or on Monday.

This PR has been slow moving, so I dare say we'll give you plenty of time to work your magic on the other designs, unless you feel strongly either way.

Also happy to get the other designs out there for testing. They're behind a feature flag and won't go to production anyway.

Thank you @alaczek !!!

alaczek · 2020-06-12T03:29:03Z

I did the second set, awaiting feedback from @ianstewart, and then we can move forward.

alaczek · 2020-06-14T23:28:00Z

Alrighty, I updated Coutoire and Leven.

Coutoire: Playfair display + Fira Sans

Leven: Chivo + Open Sans, plus I removed a bunch of content from the homepage.

They are ready to go so you can update this PR and get it moving again. We're dropping Twenty Twenty from the lineup though. Let me know if you need me to test/review anything.

…e new, probably not-yet-working templates. Turned on for dev, stage, wpcalypso and horizon environments. That is, NOT PROD :) Removing explicit reference to `featured` property in designs object usage. We might one day want to use various collection in that object, but I did it mainly to satisfy the requirements of the feature flag :) regenerating the design screenshots Regenerating at 900w at 72% quality Removed twenty twenty

noahtallen · 2020-06-18T01:09:49Z

it'd be super nice to at least get the is_edge option merged! (that's the only part I'm blocked on at the moment.) Is there anything I can do to test or unblock that?

Thinking about the name, it could be confused with "gutenberg edge". just throwing some alternative ideas out:

is_alpha
is_beta
is_dev
is_staging
restrict_to_staging (or replace staging with alpha/beta/dev)

ramonjd · 2020-06-18T01:21:48Z

@alaczek I'm seeing something odd with Rivington.

The mid section text is no longer dark. I can't remember when it was, but I've never noticed the light text on white before in my testing.

It's the same on the demo site: https://rivingtondemo.wordpress.com/

ramonjd · 2020-06-18T02:41:38Z

it'd be super nice to at least get the is_edge option merged! (that's the only part I'm blocked on at the moment.) Is there anything I can do to test or unblock that?

I like is_alpha

I'll change it to that and then I can probably merge this PR.

It won't affect stage or production and so we can deal with design issues in another PR.

…nd to make sure we don't confuse labels with Gutenberg edge

noahtallen · 2020-06-18T03:03:24Z

so we can deal with design issues in another PR

Nice! I guess that's the point of having alpha designs anyways.

ramonjd · 2020-06-18T04:04:03Z

Following up this PR's open questions/tasks in another PR: #43420

ianstewart · 2020-06-18T19:45:22Z

@allancole this looks like it's from the Rivington colour scheme that just shipped, I think.

kjellr · 2020-06-19T11:55:12Z

this looks like it's from the Rivington colour scheme that just shipped, I think.

This should be fixed as of Automattic/themes#2153. 👍

ramonjd self-assigned this May 18, 2020

ramonjd added [Goal] New Onboarding previously called Gutenboarding [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. Design labels May 18, 2020

ramonjd requested review from johnHackworth, simison and a team and removed request for johnHackworth May 18, 2020 23:56

ramonjd commented May 19, 2020

View reviewed changes

ramonjd added the DO NOT MERGE label May 19, 2020

ramonjd mentioned this pull request May 19, 2020

Gutenboarding: Update template files with new starter design exports #42353

Merged

ramonjd force-pushed the add/gutenboarding-new-template-designs branch from f8d1738 to 712c783 Compare May 24, 2020 23:12

ramonjd mentioned this pull request May 25, 2020

Gutenboarding: update rivington template #42635

Merged

ramonjd force-pushed the add/gutenboarding-new-template-designs branch from 359f2ea to 13cbd72 Compare May 28, 2020 00:44

ramonjd mentioned this pull request May 31, 2020

Gutenboarding: Add Some Theme Demo Sites as Starter Designs #42120

Closed

ramonjd force-pushed the add/gutenboarding-new-template-designs branch from 7e7d2ca to 7adbea7 Compare June 5, 2020 00:11

ramonjd mentioned this pull request Jun 5, 2020

Gutenboarding: Add restaurant starter layout #42208

Closed

ramonjd force-pushed the add/gutenboarding-new-template-designs branch from 7adbea7 to 4296d74 Compare June 9, 2020 02:02

ramonjd added a commit that referenced this pull request Jun 9, 2020

Updated fonts to conform to source sites outlined in #42354 (comment)

5c9aee8

ramonjd removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 10, 2020

ramonjd force-pushed the add/gutenboarding-new-template-designs branch from 5c9aee8 to 735ebe5 Compare June 15, 2020 06:16

ramonjd and others added 9 commits June 18, 2020 10:50

Updating fonts based on what I'm seeing in the fonts network traffic

4740377

Adding a slot for Twenty Twenty

a60a5d8

rebase and adding 2 x new templaters

1c7cf55

Added the remaining templates/themes/designs ?

716cffb

Adding preview template images

463204a

Update stage.json

b3f29c8

update rockfield preview

538972c

Updated font name case

113835c

ramonjd force-pushed the add/gutenboarding-new-template-designs branch from 1abf3d8 to 113835c Compare June 18, 2020 00:52

ramonjd added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 18, 2020

Renaming is_edge to is_alpha to describe new Gutenboarding designs, a…

97d96ae

…nd to make sure we don't confuse labels with Gutenberg edge

ramonjd added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 18, 2020

ramonjd mentioned this pull request Jun 18, 2020

Launch new Gutenboarding designs #43420

Closed

4 tasks

ramonjd merged commit c3ec8e2 into master Jun 18, 2020

ramonjd deleted the add/gutenboarding-new-template-designs branch June 18, 2020 03:59

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 18, 2020

This was referenced Jun 24, 2020

Gutenboarding: upgraded design screenshots #43561

Merged

Gutenboarding: launch new designs #43604

Merged

ramonjd mentioned this pull request Aug 19, 2020

Gutenboarding: Remove page-templates.json #44718

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenboarding: add new template designs #42354

Gutenboarding: add new template designs #42354

ramonjd commented May 18, 2020 •

edited

Loading

matticbot commented May 18, 2020

ramonjd May 18, 2020

ramonjd May 19, 2020

ramonjd May 19, 2020

ramonjd May 19, 2020

andrewserong Jun 16, 2020

ramonjd Jun 16, 2020

simison Jun 17, 2020

ramonjd Jun 17, 2020

simison Jun 18, 2020 •

edited

Loading

matticbot commented May 19, 2020 •

edited

Loading

ianstewart commented Jun 8, 2020

ramonjd commented Jun 9, 2020

alaczek commented Jun 11, 2020

ramonjd commented Jun 11, 2020

alaczek commented Jun 12, 2020

alaczek commented Jun 14, 2020

noahtallen commented Jun 18, 2020

ramonjd commented Jun 18, 2020

ramonjd commented Jun 18, 2020

noahtallen commented Jun 18, 2020

ramonjd commented Jun 18, 2020

ianstewart commented Jun 18, 2020

kjellr commented Jun 19, 2020

Gutenboarding: add new template designs #42354

Gutenboarding: add new template designs #42354

Conversation

ramonjd commented May 18, 2020 • edited Loading

Changes proposed in this Pull Request

Questions

TODO

Testing instructions

matticbot commented May 18, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simison Jun 18, 2020 • edited Loading

Choose a reason for hiding this comment

matticbot commented May 19, 2020 • edited Loading

ianstewart commented Jun 8, 2020

ramonjd commented Jun 9, 2020

alaczek commented Jun 11, 2020

ramonjd commented Jun 11, 2020

alaczek commented Jun 12, 2020

alaczek commented Jun 14, 2020

noahtallen commented Jun 18, 2020

ramonjd commented Jun 18, 2020

ramonjd commented Jun 18, 2020

noahtallen commented Jun 18, 2020

ramonjd commented Jun 18, 2020

ianstewart commented Jun 18, 2020

kjellr commented Jun 19, 2020

ramonjd commented May 18, 2020 •

edited

Loading

simison Jun 18, 2020 •

edited

Loading

matticbot commented May 19, 2020 •

edited

Loading