Buttons: Update button labels to sentence case #39692

danhauk · 2020-02-26T06:22:34Z

Create more consistency throughout Calypso by standardizing sentence case on button labels.

Why sentence case?

Sentence case improves readability by allowing users to see proper shapes of words without the breaking flow of Capital Letters.
Sentence case respects the difference between proper nouns and the other words.
i18n: some languages capitalize different things (e.g. all nouns are capitalized in German). Title case adds cognitive load when users have to figure out which words are nouns, for example.

Before	After

Testing Instructions

Checkout this branch locally or visit https://calypso.live/?branch=update/button-sentence-case
Go through each section looking for all buttons making sure they all have sentence case.
Try with different site types (simple, atomic, jetpack), different plans (free, paid), or any other combination you can think of.
Post any buttons I missed with any special instructions to reproduce it.

Sections

Me

matticbot · 2020-02-26T06:22:36Z

Test live: https://calypso.live/?branch=update/button-sentence-case

a8ci18n · 2020-02-26T06:26:19Z

client/my-sites/pages/page-list.jsx

@@ -299,7 +299,7 @@ class Pages extends Component {
 		return (
 			<SectionHeader label={ translate( 'Pages' ) }>
 				<Button primary compact className="pages__add-page" href={ newPageLink }>
-					{ translate( 'Add New Page' ) }
+					{ translate( 'Add new page' ) }


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

a8ci18n · 2020-02-26T06:26:20Z

client/my-sites/pages/page/index.js

@@ -324,7 +324,7 @@ class Page extends Component {
 		return (
 			<PopoverMenuItem onClick={ this.copyPage } href={ duplicateUrl }>
 				<Gridicon icon="clipboard" size={ 18 } />
-				{ this.props.translate( 'Copy Page' ) }
+				{ this.props.translate( 'Copy page' ) }


⚠️ 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 22 times:
translate( 'Copying page...' ) ES Score: 6

a8ci18n · 2020-02-26T06:26:21Z

client/my-sites/pages/page/index.js

@@ -333,7 +333,7 @@ class Page extends Component {
 		const { page, translate } = this.props;
 		return (
 			<PopoverMenuItemClipboard text={ page.URL } onCopy={ this.copyPageLink } icon={ 'link' }>
-				{ translate( 'Copy Link' ) }
+				{ translate( 'Copy link' ) }


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

a8ci18n · 2020-02-26T06:26:22Z

client/my-sites/plans/current-plan/purchases-listing.jsx

@@ -170,14 +170,14 @@ class PurchasesListing extends Component {
 			return null;
 		}

-		let label = translate( 'Manage Plan' );
+		let label = translate( 'Manage plan' );


⚠️ 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 26 times:
translate( 'Manage Plans' ) ES Score: 8

a8ci18n · 2020-02-26T06:26:23Z

client/my-sites/plan-features/actions.jsx

@@ -58,7 +58,7 @@ const PlanFeaturesActions = ( {
 	if ( current && ! isInSignup ) {
 		upgradeButton = (
 			<Button className={ classes } href={ manageHref } disabled={ ! manageHref }>
-				{ canPurchase ? translate( 'Manage Plan' ) : translate( 'View Plan' ) }
+				{ canPurchase ? translate( 'Manage plan' ) : translate( 'View plan' ) }


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

a8ci18n · 2020-02-26T06:26:24Z

client/my-sites/plans/current-plan/purchases-listing.jsx


 		if ( isJetpackBackup( purchase ) ) {
-			label = translate( 'Manage Product' );
+			label = translate( 'Manage product' );


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

a8ci18n · 2020-02-26T06:46:50Z

client/my-sites/post-type-list/post-actions-ellipsis-menu/copy-link.jsx

@@ -18,7 +18,7 @@ import { infoNotice } from 'state/notices/actions';
 function PostActionsEllipsisMenuCopyLink( { onCopyLinkClick, copyLink } ) {
 	return (
 		<PopoverMenuItemClipboard text={ copyLink } onCopy={ onCopyLinkClick } icon={ 'link' }>
-			{ translate( 'Copy Link' ) }
+			{ translate( 'Copy link' ) }


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

a8ci18n · 2020-02-26T06:46:52Z

client/my-sites/post-type-list/post-actions-ellipsis-menu/duplicate.jsx

@@ -39,7 +39,7 @@ function PostActionsEllipsisMenuDuplicate( {
 	return (
 		<PopoverMenuItem href={ duplicateUrl } onClick={ onDuplicateClick } icon="clipboard">
 			<QueryJetpackModules siteId={ siteId } />
-			{ translate( 'Copy Post' ) }
+			{ translate( 'Copy post' ) }


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

a8ci18n · 2020-02-26T06:46:53Z

client/my-sites/themes/theme-showcase.jsx

@@ -348,7 +348,7 @@ class ThemeShowcase extends React.Component {
 									<hr />
 								) : (
 									<Button onClick={ this.toggleShowcase } data-e2e-value="open-themes-button">
-										{ translate( 'Show All Themes' ) }
+										{ translate( 'Show all themes' ) }


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

a8ci18n · 2020-02-26T07:00:42Z

client/my-sites/comments/comment-navigation/index.jsx

@@ -315,7 +315,7 @@ export class CommentNavigation extends Component {

 					{ hasComments && (
 						<Button compact onClick={ toggleBulkMode }>
-							{ translate( 'Bulk Edit' ) }
+							{ translate( 'Bulk edit' ) }


⚠️ 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 1 times:
translate( 'Bulk Edit', 'NULL', { context: 'NULL'} ) ES Score: 10
See 1 additional suggestions in the PR translation status page

a8ci18n · 2020-02-26T07:00:43Z

client/my-sites/media-library/header.jsx

-					<span className="is-desktop">
-						{ this.props.translate( 'Add New', { context: 'Media upload' } ) }
+					<span className="media-library__upload-button-label">
+						{ this.props.translate( 'Add new', { context: 'Media upload' } ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 12 times:
translate( 'Add new', { context: 'new image'} ) ES Score: 9
See 2 additional suggestions in the PR translation status page

ℹ️ This string already exists with the following contexts:

null (no context)

add new media

Block

Customize Changeset

event

file

link

Media upload

page

plugin

post

site

Template

Template Part

theme

user

Would it make sense to reuse one of the above?

a8ci18n · 2020-02-26T07:06:32Z

client/my-sites/exporter/export-card/advanced-settings.jsx

@@ -64,7 +64,7 @@ class AdvancedSettings extends React.Component {
 					loading={ this.props.shouldShowProgress }
 					isPrimary={ false }
 					onClick={ this.props.onClickExport }
-					text={ this.props.translate( 'Export Selected Content' ) }
+					text={ this.props.translate( 'Export selected content' ) }


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

a8ci18n · 2020-02-26T07:06:33Z

client/my-sites/exporter/export-card/index.jsx

@@ -42,7 +42,7 @@ class ExportCard extends Component {
 				loading={ this.props.shouldShowProgress }
 				isPrimary={ false }
 				onClick={ this.props.exportAll }
-				text={ translate( 'Export All' ) }
+				text={ translate( 'Export all' ) }


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

a8ci18n · 2020-02-26T07:21:03Z

client/my-sites/marketing/tools/header.tsx

@@ -40,7 +39,7 @@ const MarketingToolsHeader: FunctionComponent< Props > = ( { handleButtonClick }

 				<div className="tools__header-button-row">
 					<Button onClick={ handleButtonClick } primary>
-						{ translate( 'Boost My Traffic' ) }
+						{ translate( 'Boost my traffic' ) }


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

a8ci18n · 2020-02-26T07:21:04Z

client/my-sites/marketing/tools/index.tsx

@@ -92,7 +92,7 @@ export const MarketingTools: FunctionComponent< Props > = ( {
 					imagePath="/calypso/images/marketing/social-media-logos.svg"
 				>
 					<Button compact onClick={ handleStartSharingClick }>
-						{ translate( 'Start Sharing' ) }
+						{ translate( 'Start sharing' ) }


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

a8ci18n · 2020-02-26T07:21:05Z

client/my-sites/site-settings/settings-section-header.jsx

@@ -29,7 +29,7 @@ const SettingsSectionHeader = ( {
 			{ children }
 			{ showButton && (
 				<Button compact primary onClick={ onButtonClick } disabled={ disabled } { ...buttonProps }>
-					{ isSaving ? translate( 'Saving…' ) : translate( 'Save Settings' ) }
+					{ isSaving ? translate( 'Saving…' ) : translate( 'Save settings' ) }


⚠️ 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 95 times:
translate( 'Save Settings' ) ES Score: 8

gwwar · 2020-03-06T00:31:30Z

the button labels are being pulled from the API so we'll need a back-end patch

Thanks @danhauk! Let us know if folks need help with this one or if you or @sixhours are interested in leading the patch.

sixhours · 2020-03-06T13:57:50Z

Thanks @danhauk! Let us know if folks need help with this one or if you or @sixhours are interested in leading the patch.

Happy to take the lead on this, I want to learn more about how our API works with Calypso anyway. :)

sixhours · 2020-03-06T15:54:01Z

@gwwar @danhauk Added a patch here to get this started: D40003-code

danhauk · 2020-03-06T16:04:55Z

Snapshots are updated and client tests should pass. Please give a review when you get a chance and we can land the back-end patch separately if translations are finished before that.

@sixhours Thanks for kicking off the patch! I'll keep my eye on it.

gwwar · 2020-03-06T23:09:59Z

Found a few more while testing with a premium plan. I don't think we have to get everything to 💯(we can catch the rest with follow ups) but it may be worth a quick audit with all plan types: free, personal, premium, business, ecommerce.

Earn:

Marketing:

gwwar

Giving tentative approval here ✅. Please do not merge until:

Strings are fully translated
Please prep updates to the Readmes in Calypso / internal messaging so folks are aware of the Sentence case rule

Things that don't block this PR

D40003-code for customizing the API page/post labels
Chatting with core to see if sentence case can be adopted in general
Stray usages. If we happen to miss some and miss translation, just add them in follow up PRs. Any other changes here should also wait for the String Freeze check to pass.

danhauk · 2020-03-07T04:23:49Z

I left those examples intentionally since things like Google Analytics, Google Ads, and Business (in this case) are product names and should be capitalized. Although that To in your last screenshot should definitely not be capitalized.

I'll give a quick run through again with all plans and site types on Monday while we wait for strings to translate.

akirk · 2020-03-09T12:36:44Z

Thanks for adding a [Status] String Freeze here. Turns out we are not great prepared for simple case changes in combination with "String Freeze." Normally our algorithms will detect a slightly changed original and just continue to use the translations (which is also fine in this case because they have their own word casing rules [e.g. in German nouns are always spelled with a upper case first letter]), but since the old strings are still being used, this didn't work.

We noticed this at sending the Weekly Kit and held back the translations and semi-manually processed these (and in the course I found an instance of same text that wasn't caught in this PR, so I just committed that change to this one).

Long story short: translations are ready without sending them for translation.

…p-calypso into update/button-sentence-case

danhauk · 2020-03-12T19:08:53Z

I think failing tests are unrelated to this PR but maybe someone could give a second look? @gwwar @kwight @mmtr

Otherwise this is ready to merge. Guidelines are in the README for the button component and internal messaging seems to be well received in the post p9Jlb4-1ly-p2

gwwar

E2Es look mostly like timeouts so I think we're okay. This tests pretty well for me @danhauk, let's try 🚢ing!

a8ci18n · 2020-05-22T13:03:42Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/2909838

Thank you @danhauk for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2020-06-18T08:28:20Z

Translation for this Pull Request has now been finished.

Update buttons to sentence case in Pages and My Plan

9316a96

danhauk added the [Type] Janitorial label Feb 26, 2020

danhauk self-assigned this Feb 26, 2020

danhauk added the [Status] In Progress label Feb 26, 2020

a8ci18n reviewed Feb 26, 2020

View reviewed changes

Button case for Posts and Themes

658bda6

a8ci18n reviewed Feb 26, 2020

View reviewed changes

Comments and Add new site

dd91797

danhauk requested a review from a team as a code owner February 26, 2020 06:54

Media library button case and fix for linting

07e4917

a8ci18n reviewed Feb 26, 2020

View reviewed changes

Export and Plugins sections

a55e1d3

a8ci18n reviewed Feb 26, 2020

View reviewed changes

Marketing section and button in settings headers

fda30bd

a8ci18n reviewed Feb 26, 2020

View reviewed changes

danhauk added 3 commits February 26, 2020 08:29

Earn section

ddea8d0

Hosting and Domains sections

bbf86e8

People section

14ac52b

Update snapshot for primary domain button

573af5e

gwwar approved these changes Mar 6, 2020

View reviewed changes

Follow suite with a forgotten instance of changed text

be19930

sixhours mentioned this pull request Mar 10, 2020

Posts: Programmatically change button labels to sentence case #40027

Closed

danhauk added 2 commits March 12, 2020 14:11

Update test to look for correct element

75c27ed

Merge branch 'update/button-sentence-case' of github.com:Automattic/w…

9f828d7

…p-calypso into update/button-sentence-case

danhauk requested a review from a team as a code owner March 12, 2020 18:13

gwwar approved these changes Mar 12, 2020

View reviewed changes

danhauk mentioned this pull request Mar 13, 2020

Purchases: Stop description text from jumping on page transition. #40101

Merged

danhauk merged commit 9af6717 into master Mar 13, 2020

danhauk deleted the update/button-sentence-case branch March 13, 2020 13:29

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 Mar 13, 2020

This was referenced Mar 13, 2020

Buttons: More sentence casing of labels #40120

Closed

Buttons: More sentence-casing for button labels #40171

Merged

sixhours mentioned this pull request Mar 18, 2020

Posts list: Use JS to Sentence case "Add new post" label #40256

Merged

travisw mentioned this pull request Mar 20, 2020

Add stand-alone peer referral page for US traffic. #40302

Merged

mmtr mentioned this pull request Mar 30, 2020

Search across all pages #40464

Merged

jancavan mentioned this pull request May 21, 2020

External Media: Implementation Automattic/jetpack#15717

Merged

sixhours mentioned this pull request May 13, 2021

My Home: Replace "More Help" with "Contact Support" #52831

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Buttons: Update button labels to sentence case #39692

Buttons: Update button labels to sentence case #39692

danhauk commented Feb 26, 2020 •

edited

matticbot commented Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

a8ci18n Feb 26, 2020

gwwar commented Mar 6, 2020

sixhours commented Mar 6, 2020

sixhours commented Mar 6, 2020

danhauk commented Mar 6, 2020 •

edited

gwwar commented Mar 6, 2020

gwwar left a comment •

edited by danhauk

danhauk commented Mar 7, 2020 •

edited

akirk commented Mar 9, 2020

danhauk commented Mar 12, 2020

gwwar left a comment

a8ci18n commented May 22, 2020

a8ci18n commented Jun 18, 2020

Buttons: Update button labels to sentence case #39692

Buttons: Update button labels to sentence case #39692

Conversation

danhauk commented Feb 26, 2020 • edited

Why sentence case?

Testing Instructions

Sections

Me

matticbot commented Feb 26, 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

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

gwwar commented Mar 6, 2020

sixhours commented Mar 6, 2020

sixhours commented Mar 6, 2020

danhauk commented Mar 6, 2020 • edited

gwwar commented Mar 6, 2020

gwwar left a comment • edited by danhauk

Choose a reason for hiding this comment

danhauk commented Mar 7, 2020 • edited

akirk commented Mar 9, 2020

danhauk commented Mar 12, 2020

gwwar left a comment

Choose a reason for hiding this comment

a8ci18n commented May 22, 2020

a8ci18n commented Jun 18, 2020

danhauk commented Feb 26, 2020 •

edited

danhauk commented Mar 6, 2020 •

edited

gwwar left a comment •

edited by danhauk

danhauk commented Mar 7, 2020 •

edited