My Home: Try Home Layout i1. #41000

kwight · 2020-04-09T22:12:14Z

This PR explores what changes we need to make for something like My Home Layout i1.

See: pbAPfg-g0-p2

Testing instructions

Apply D41677-code and sandbox the API.
Go to /home/:site with an prelaunch, launched and established site and observe the layout.

matticbot · 2020-04-09T22:12:16Z

Test live: https://calypso.live/?branch=try/home-layout-i1

a8ci18n · 2020-04-09T22:18:24Z

client/my-sites/customer-home/locations/primary/index.jsx

+			{ React.createElement( cardComponents[ stats ], {
+				checklistMode: stats === 'home-primary-checklist-site-setup' ? checklistMode : null,
+			} ) }
+			<h2>{ translate( 'Learn and grow' ) }</h2>


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 19 times:
translate( 'Learn and grow with My Home' ) ES Score: 6

matticbot · 2020-04-09T22:21:13Z

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

Webpack Runtime (~16 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest       -180 B  (-0.1%)      +16 B  (+0.0%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

name        parsed_size           gzip_size
entry-main        -77 B  (-0.0%)       +2 B  (+0.0%)

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

Sections (~16957 bytes removed 📉 [gzipped])

name                parsed_size            gzip_size
home                   -70213 B  (-27.4%)   -17053 B  (-25.2%)
google-my-business      -1264 B   (-0.5%)     -918 B   (-1.2%)
email                   -1176 B   (-0.4%)     -161 B   (-0.2%)
checkout                 -212 B   (-0.0%)      -56 B   (-0.0%)
plans                     +71 B   (+0.0%)    +1118 B   (+1.0%)
marketing                 -39 B   (-0.0%)     +118 B   (+0.1%)
stats                     -34 B   (-0.0%)       -5 B   (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~4744 bytes added 📈 [gzipped])

name                                                                              parsed_size            gzip_size
async-load-my-sites-customer-home-cards-primary-checklist-site-setup-wpcom-ch...     +16749 B  (+88.4%)    +4764 B  (+87.4%)
async-load-my-sites-sidebar                                                            -257 B   (-0.4%)      -18 B   (-0.1%)
async-load-design                                                                      +184 B   (+0.0%)       -2 B   (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

kwight · 2020-04-09T22:30:09Z

One of the first questions that comes up is, where do we get the section headings from (eg. "Learn and grow")? If we handle them in the client (as is done here), the translations are handled in Calypso, but we're kinda breaking our guiding idea that the client is just mindlessly rendering whatever the API passes to it (well, at least we're making assumptions in the client of what content we'll be rendering). The headings could be translated on the server and sent by API based on a key to the section, but... that also feels weird and fragile. That would need more nested view arrays, I think:

I can't decide if I like the idea of keeping the API responses just one level deep as they are now, and having the client would cut them up, like this PR does. It would depend on how much we anticipate the location sections changing; if we always have a stats card, it seems a premature optimization to make sure that can all be handled server-side.

gwwar · 2020-04-09T22:35:48Z

I can't decide if I like the idea of keeping the API responses just one level deep as they are now, and having the client would cut them up, like this PR does.

My intuition is that keeping the client pretty simple would be ideal. We may need to break up the abstractions further. For example instead of just locations, do we specify the pages/tasks to render for a component. Let's play around a bit to see what feels best.

I'm also running into a similar problem for if we pick some sort of pager for educational cards. It could be that these turn into another "location/container"

mmtr · 2020-04-10T12:28:54Z

It could be that these turn into another "location/container"

I like that. I think the API should treat each section with a header as a location.

{
  'alerts': [ ... ], // Congratulatory banners or site-wide notices.
  'up-next': [ ... ], // What to do up next (site setup checklist, current post-launch task).
  'stats': [ ... ], // Stats at a glance.
  'features': [ ... ], // Learn and grow.
  'management': [ ... ], // Manage your site.
}

Note that I deliberately not used current locations names so we can add the new layout to the endpoint without breaking existing behavior.

Calypso would decide then how to render each section:

Column mode. It's the default style, all cards displayed one below the other.
Page mode. It'll combine the cards and display some sort of pager so the user can browse them. We'll use this mode on the educational cards.
Stacked mode. It'll combine the cards and display them one behind the other. Dismissing / completing a card will show the one behind. We can use this mode on the notices.

EDIT: Pushed an update to D41677-code exploring what the API response looks like returning all these new locations. We need to update now this PR to handle them.

EDIT2: Just pushed a commit to this PR demonstrating how to use the new locations.

Aurorum · 2020-04-10T12:44:30Z

client/my-sites/customer-home/locations/tasks/index.jsx

@@ -16,7 +16,7 @@ const cardComponents = {
 	'home-banner-legacy-stats-banners': StatsBanners,
 };

-const Upsells = ( { cards, primary, siteId, slug } ) => {
+const Tasks = ( { cards, primary, siteId, slug } ) => {


Just a heads up that I started something for Tasks in #41018 :)

a8ci18n · 2020-04-10T16:54:34Z

client/my-sites/customer-home/locations/features/index.jsx

+
+	return (
+		<>
+			<h2>{ translate( 'Learn and grow' ) }</h2>


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 19 times:
translate( 'Learn and grow with My Home' ) ES Score: 6

gwwar · 2020-04-10T23:04:55Z

client/my-sites/customer-home/style.scss

@@ -58,6 +58,10 @@
 		@include grid-template-columns( 12, 24px, 1fr );
 		grid-gap: 24px;
 	}
+
+	h2 {
+		font-family: 'Recoleta', serif;


We'll need to download the font, we can maybe check in to see how Gutenboarding is doing it. There are some performance considerations here as we do it, so we can maybe consult perfops on best practices.

gwwar · 2020-04-10T23:20:05Z

I think this is starting to come together nicely @kwight @mmtr , I left some notes on the backend patch and asked a few clarifying questions for requirements in related thread.

Here's a snapshot of WIP for the branch:

Some next steps/tasks in misc order (I'll file issues).

My Home: Make Recoleta available #41036 Make sure Recoleta works, is somewhat okay perf wise for the download hit, and has a decent fallback for unsupported languages
My Home: update styling for Block-Editor card and add analytics #40993 Add two extra support videos to Mastering the Block Editor ( Block Editor Overview / Layouts/Block-Patterns)
My Home: Add Pager to Education Cards #41037 Update the educational container to have a temporary dot pager so we can see both mastering the block editor and free photo library
My Home: Reuse dot pager from WordPress #41035 File PR to Gutenberg to break out the pager from the guide component so we can reuse this in Calypso https://wordpress.github.io/gutenberg/?path=/story/components-guide--default
My Home: Stats Card v2 #41034 Create a new stats component for the new graph view. We can then deprecate and delete the old stats card component after we've switched over views.

a8ci18n · 2020-04-13T15:20:12Z

client/my-sites/customer-home/locations/secondary/learn-grow/index.jsx

+
+	return (
+		<>
+			<h2>{ translate( 'Learn and grow' ) }</h2>


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 19 times:
translate( 'Learn and grow with My Home' ) ES Score: 6

a8ci18n · 2020-04-15T14:20:03Z

client/my-sites/customer-home/cards/education/free-photo-library/index.jsx

+		<EducationalCard
+			header={ translate( 'The WordPress.com free photo library' ) }
+			text={ translate(
+				'Our free photo library integrates your site with over 40,000 beautiful copyright-free photos to create stunning designs.'


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 20 times:
translate( 'The WordPress.com Free Photo Library integrates your site with beautiful copyright-free photos to create stunning designs.' ) ES Score: 8

a8ci18n · 2020-04-15T14:20:04Z

client/my-sites/customer-home/locations/secondary/learn-grow/index.jsx

+	return (
+		<>
+			<h2 className="learn-grow__heading customer-home__section-heading">
+				{ translate( 'Learn and grow' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 19 times:
translate( 'Learn and grow with My Home' ) ES Score: 6

gwwar · 2020-04-16T19:53:16Z

@kwight I think we can close this one out? Please reopen if we still need this

kwight requested a review from a team as a code owner April 9, 2020 22:12

kwight self-assigned this Apr 9, 2020

kwight added [Status] In Progress [Feature] My Home The main dashboard for managing a WordPress.com site. DO NOT MERGE labels Apr 9, 2020

a8ci18n reviewed Apr 9, 2020

View reviewed changes

gwwar mentioned this pull request Apr 9, 2020

My Home: Create a section for recommended tasks #40734

Closed

Aurorum reviewed Apr 10, 2020

View reviewed changes

gwwar assigned mmtr Apr 10, 2020

a8ci18n reviewed Apr 10, 2020

View reviewed changes

gwwar reviewed Apr 10, 2020

View reviewed changes

a8ci18n reviewed Apr 13, 2020

View reviewed changes

kwight and others added 9 commits April 15, 2020 14:48

My Home: Try Home Layout i1.

c71519b

Add support for new locations

9e7892d

Revert unintended changes

dc94918

Add headings

36ba94e

Remove visibility checks from stats card

9da0dc2

Remove grow & earn card from "management" location

c8869d6

Use new views

6c8a8b1

Fix card id

4023589

Add back changes removed on rebase

375d4ac

mmtr force-pushed the try/home-layout-i1 branch from dc2639c to 375d4ac Compare April 15, 2020 12:59

mmtr added 2 commits April 15, 2020 15:10

Adjust style for section headings

e457235

Adjust style for quick links

6395378

Combine educational cards

b806c10

a8ci18n reviewed Apr 15, 2020

View reviewed changes

mmtr mentioned this pull request Apr 15, 2020

My Home: Add Pager to Education Cards #41037

Closed

Use sentence case for quick links

128eab8

This was referenced Apr 15, 2020

My Home: Add flag to experiment with new layout #41145

Merged

My Home: Display "Mastering Gutenberg" card #41184

Merged

gwwar closed this Apr 16, 2020

matticbot removed the [Status] In Progress label Apr 16, 2020

mmtr deleted the try/home-layout-i1 branch April 17, 2020 13:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My Home: Try Home Layout i1. #41000

My Home: Try Home Layout i1. #41000

kwight commented Apr 9, 2020 •

edited by mmtr

Loading

matticbot commented Apr 9, 2020

a8ci18n Apr 9, 2020

matticbot commented Apr 9, 2020 •

edited

Loading

kwight commented Apr 9, 2020

gwwar commented Apr 9, 2020

mmtr commented Apr 10, 2020 •

edited

Loading

Aurorum Apr 10, 2020

a8ci18n Apr 10, 2020

gwwar Apr 10, 2020

gwwar commented Apr 10, 2020 •

edited by mmtr

Loading

a8ci18n Apr 13, 2020

a8ci18n Apr 15, 2020

a8ci18n Apr 15, 2020

gwwar commented Apr 16, 2020

My Home: Try Home Layout i1. #41000

My Home: Try Home Layout i1. #41000

Conversation

kwight commented Apr 9, 2020 • edited by mmtr Loading

Testing instructions

matticbot commented Apr 9, 2020

a8ci18n Apr 9, 2020

Choose a reason for hiding this comment

matticbot commented Apr 9, 2020 • edited Loading

kwight commented Apr 9, 2020

gwwar commented Apr 9, 2020

mmtr commented Apr 10, 2020 • edited Loading

Aurorum Apr 10, 2020

Choose a reason for hiding this comment

a8ci18n Apr 10, 2020

Choose a reason for hiding this comment

gwwar Apr 10, 2020

Choose a reason for hiding this comment

gwwar commented Apr 10, 2020 • edited by mmtr Loading

a8ci18n Apr 13, 2020

Choose a reason for hiding this comment

a8ci18n Apr 15, 2020

Choose a reason for hiding this comment

a8ci18n Apr 15, 2020

Choose a reason for hiding this comment

gwwar commented Apr 16, 2020

kwight commented Apr 9, 2020 •

edited by mmtr

Loading

matticbot commented Apr 9, 2020 •

edited

Loading

mmtr commented Apr 10, 2020 •

edited

Loading

gwwar commented Apr 10, 2020 •

edited by mmtr

Loading