Customer Home: update card headings size and tags #40997

danhauk · 2020-04-09T20:51:59Z

Changes proposed in this Pull Request

Update the card headings on Customer Home to be a smaller size. They were all fighting with the My Home page heading, especially on mobile. This also helps us move towards the explorations in My Home: Create a section for recommended tasks #40734.
Update the card headings to use a more semantic <h2> instead of <h1> all over the place.
General cleanup of some other styles.
Update headings to use title case and adding periods to subheadings per a recent decision.

@Automattic/dotcom-manage-design can you gut check me on the sizes here?

Before	After

Testing instructions

Checkout the branch or use the calypso.live link
Visit My Home to view updated headings
Test with an established site with no checklist
Test with a new site with checklist

matticbot · 2020-04-09T20:52:01Z

Test live: https://calypso.live/?branch=update/customer-home-card-headings

a8ci18n · 2020-04-09T21:24:20Z

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

@@ -51,7 +51,9 @@ const FreePhotoLibrary = ( { openSupportArticleDialogAndTrack, isSiteWPForTeamsP
 					/>
 				</button>
 			) }
-			<CardHeading>{ translate( 'Over 40,000 Free Photos' ) }</CardHeading>
+			<CardHeading tagName="h2" size={ 16 }>
+				{ translate( 'Over 40,000 free photos' ) }


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

a8ci18n · 2020-04-09T21:24:21Z

client/my-sites/customer-home/cards/features/go-mobile/index.jsx

-					<CardHeading>{ translate( 'Go Mobile' ) }</CardHeading>
-					<h6 className="go-mobile__subheader">{ translate( 'Make updates on the go' ) }</h6>
+					<CardHeading tagName="h2" size={ 16 }>
+						{ translate( 'Go mobile' ) }


⚠️ This change will be queued for retranslation. We'll display the English text until then.

a8ci18n · 2020-04-09T21:24:22Z

client/my-sites/customer-home/cards/features/go-mobile/index.jsx

+					<CardHeading tagName="h2" size={ 16 }>
+						{ translate( 'Go mobile' ) }
+					</CardHeading>
+					<h6 className="go-mobile__subheader">{ translate( 'Make updates on the go.' ) }</h6>


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

a8ci18n · 2020-04-09T21:24:23Z

client/my-sites/customer-home/cards/features/grow-earn/index.jsx

@@ -35,9 +35,11 @@ export const GrowEarn = ( { siteSlug, expandToolsAndTrack, isSiteWPForTeamsProp

 	return (
 		<Card className="grow-earn">
-			<CardHeading>{ translate( 'Grow & Earn' ) }</CardHeading>
+			<CardHeading tagName="h2" size={ 16 }>
+				{ translate( 'Grow & earn' ) }


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

a8ci18n · 2020-04-09T21:24:23Z

client/my-sites/customer-home/cards/features/grow-earn/index.jsx

 			<h6 className="grow-earn__card-subheader customer-home__card-subheader">
-				{ translate( 'Grow your audience and earn money' ) }
+				{ translate( 'Grow your audience and earn money.' ) }


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

a8ci18n · 2020-04-09T21:24:24Z

client/my-sites/customer-home/cards/features/launch-site/index.jsx

@@ -26,9 +26,11 @@ export const LaunchSite = ( { isPrimary, launchSiteAndTrack, siteId } ) => {

 	return (
 		<Card className="launch-site">
-			<CardHeading>{ translate( 'Site Privacy' ) }</CardHeading>
+			<CardHeading tagName="h2" size={ 16 }>
+				{ translate( 'Site privacy' ) }


⚠️ This change will be queued for retranslation. We'll display the English text until then.

a8ci18n · 2020-04-09T21:24:25Z

client/my-sites/customer-home/cards/features/launch-site/index.jsx

 			<h6 className="customer-home__card-subheader launch-site__card-subheader">
-				{ translate( 'Your site is private' ) }
+				{ translate( 'Your site is private.' ) }


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

a8ci18n · 2020-04-09T21:24:26Z

client/my-sites/customer-home/cards/features/support/index.jsx

 			<h6 className="support__header customer-home__card-subheader">
-				{ translate( 'Get all the help you need' ) }
+				{ translate( 'Get all the help you need.' ) }


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

a8ci18n · 2020-04-09T21:24:27Z

client/my-sites/customer-home/cards/primary/checklist-site-setup/index.jsx

@@ -22,7 +22,9 @@ const ChecklistSiteSetup = ( { checklistMode } ) => {
 	return (
 		<div className="checklist-site-setup">
 			<Card className="checklist-site-setup__heading">
-				<CardHeading>{ translate( 'Site Setup List' ) }</CardHeading>
+				<CardHeading tagName="h2" size={ 16 }>
+					{ translate( 'Site setup list' ) }


🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

a8ci18n · 2020-04-09T21:24:28Z

client/my-sites/customer-home/cards/primary/quick-links/index.jsx

@@ -160,15 +160,17 @@ export const QuickLinks = ( {
 	if ( ! isMobile() ) {
 		return (
 			<Card className="quick-links">
-				<CardHeading>{ translate( 'Quick Links' ) }</CardHeading>
+				<CardHeading tagName="h2" size={ 16 }>
+					{ translate( 'Quick links' ) }


⚠️ This change will be queued for retranslation. We'll display the English text until then.
ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 47 times:
translate( 'Quick Links' ) ES Score: 10

jancavan · 2020-04-09T21:48:38Z

Should the card headers look more like/use the SectionHeader component?

mmtr

It looks much better now ❤️

Although I feel there is more space than needed now around the "Site setup list" header.

Update headings to use title case

I think you wanted to say "sentence case" right?

gwwar · 2020-04-10T21:03:05Z

Thanks @danhauk giving ✅ for code changes.

Let's get a 👍 from @Automattic/dotcom-manage-design for design modifications before landing

matticbot · 2020-04-17T17:15:50Z

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

Sections (~24 bytes removed 📉 [gzipped])

name  parsed_size           gzip_size
home        +35 B  (+0.0%)      -24 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.

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-17T17:27:44Z

@gwwar We have the String Freeze label on this PR, but I don't think we need to wait to merge (the changes are stylistic and/or punctuation, which wouldn't invalidate our existing translations) – are you hard-set on waiting?

gwwar · 2020-04-17T19:16:45Z

It's 94% translated so it's not a blocker. I usually like adding the label for visible items, so we can try and ship updates with copy translated. (Strings get picked up on Monday so fastest turn around is usually tidying copy on Friday).

kwight · 2020-04-22T21:08:47Z

@danhauk Anything holding this back at the moment (maybe @jancavan 's comment?). It would be great to get it in sooner than later (I think it might block #41229 ?) .

jancavan · 2020-04-23T18:28:28Z

Mine is more just a visual feedback, so not a blocker. Feel free to tackle it in a separate PR if need be. @kwight @danhauk

kwight · 2020-04-28T19:46:00Z

Not sure how this looks with #41229 merged – is it still needed @danhauk ?

gwwar · 2020-04-29T18:31:04Z

Closing out this one since we're pretty close to new layout updates. Please reopen if this doesn't happen in a timely way.

danhauk added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Feature] My Home The main dashboard for managing a WordPress.com site. labels Apr 9, 2020

danhauk requested a review from a team as a code owner April 9, 2020 20:52

danhauk self-assigned this Apr 9, 2020

a8ci18n reviewed Apr 9, 2020

View reviewed changes

mmtr reviewed Apr 10, 2020

View reviewed changes

gwwar added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Apr 10, 2020

gwwar mentioned this pull request Apr 13, 2020

Customer Home: sidebar inconsistencies #40573

Closed

Customer Home: update card headings size and tags

f2aff33

kwight force-pushed the update/customer-home-card-headings branch from 17d7c62 to f2aff33 Compare April 17, 2020 17:03

kwight mentioned this pull request Apr 17, 2020

My Home: Tweak styles for experimental layout #41229

Merged

gwwar closed this Apr 29, 2020

matticbot removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Apr 29, 2020

sirreal deleted the update/customer-home-card-headings branch December 4, 2020 09:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customer Home: update card headings size and tags #40997

Customer Home: update card headings size and tags #40997

danhauk commented Apr 9, 2020 •

edited

matticbot commented Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

a8ci18n Apr 9, 2020

jancavan commented Apr 9, 2020

mmtr left a comment

gwwar commented Apr 10, 2020

matticbot commented Apr 17, 2020

kwight commented Apr 17, 2020

gwwar commented Apr 17, 2020

kwight commented Apr 22, 2020 •

edited

jancavan commented Apr 23, 2020

kwight commented Apr 28, 2020

gwwar commented Apr 29, 2020

Customer Home: update card headings size and tags #40997

Customer Home: update card headings size and tags #40997

Conversation

danhauk commented Apr 9, 2020 • edited

Changes proposed in this Pull Request

Testing instructions

matticbot commented Apr 9, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jancavan commented Apr 9, 2020

mmtr left a comment

Choose a reason for hiding this comment

gwwar commented Apr 10, 2020

matticbot commented Apr 17, 2020

kwight commented Apr 17, 2020

gwwar commented Apr 17, 2020

kwight commented Apr 22, 2020 • edited

jancavan commented Apr 23, 2020

kwight commented Apr 28, 2020

gwwar commented Apr 29, 2020

danhauk commented Apr 9, 2020 •

edited

kwight commented Apr 22, 2020 •

edited