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.

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

Help: Localizing inline contextual help links #27173

Merged
merged 5 commits into from Apr 26, 2019

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Sep 13, 2018

Background

This is a WIP PR to localize inline contextual help links, whose text and links are all in English.

screen shot 2018-09-13 at 11 07 37 am

It's a starter task, and part of an @Automattic/i18n effort to improve translations across our support sites, a recurring point of pain for our non-English speaking users.

A subset of this effort is to normalize all support page uris so that https://es.support.wordpress.com**/business-plan/** https://bs.support.wordpress.com**/business-plan/** and https://fr.support.wordpress.com**/business-plan/** redirect to the corresponding, localized support pages.

What this PR does

When a user's locale matches one for which we have a dedicated support blog and the user clicks an inline contextual help link, we prevent the inline content window (which is currently setup to fetch English content using post ids) from showing and redirect the user to that blog using the English slug.

If we don't yet offer a support blog in the user's language, we use the default en functionality.

sep-13-2018 15-34-23

Future iterations

  1. For non-en locales where this is no support site, pass a parameter flag auto_translate=1 to en.support.wordpress.com allowing the user to have the support page automatically translated via Google translate .
  2. Load localized support page content in the inline content window. This would require getting the post ids of the translated pages and passing them to QueryReaderPost. D18028-code is a experimental API endpoint that fetches this information. though its future is uncertain.

Testing

  1. Set your WordPress account language to es (or another support-ready language)
  2. Go to /stats/
  3. Click on the help icon at the bottom right of the screen, and select one of the contextual help links.
  4. Do the same for ar or another locale without a WordPress support site.

Expectations

At 3: You should be taken to the page at es.support.wordpress.com. If the localized content does not exist you'll be offered to view the page in English or have it translated using Google Translate

At 4: The content will load in English.

It should also work for locale variants such as de_formal, which will default to the root language, in this case de.support.wordpress.com

@ramonjd ramonjd added [Type] Enhancement [Status] In Progress i18n [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Sep 13, 2018
@ramonjd ramonjd self-assigned this Sep 13, 2018
@matticbot
Copy link
Contributor

@ramonjd ramonjd requested a review from a team September 13, 2018 01:12
title: 'Quick-Start Guide',
description:
"Use our five-step checklist to get set up and ready to publish, no matter what kind of site you're building.",
title: translate( 'Quick-Start Guide' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 5 times:
translate( 'Quick Start Guide' ) ES Score: 15

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
link: 'https://en.support.wordpress.com/increase-your-site-traffic/',
post_id: 132186,
title: 'Increase Your Site Traffic',
description:
title: translate( 'Increase Your Site Traffic' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 20 times:
translate( 'Increase Your Traffic' ) ES Score: 10

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
link: 'http://en.support.wordpress.com/gravatars/',
post_id: 1338,
title: 'Your Profile Picture',
description:
title: translate( 'Your Profile Picture' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 19 times:
translate( 'Upload your profile picture' ) ES Score: 14
See 2 additional suggestions in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
link: 'http://en.support.wordpress.com/account-deactivation/',
post_id: 138080,
title: 'Account Closure',
description: 'Need a fresh start? Learn how to close your account.',
title: translate( 'Account Closure' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 18 times:
translate( 'Confirm account closure' ) ES Score: 13

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

title: 'Explore the WordPress.com Plans',
description:
"Upgrading your plan unlocks a ton of features! We'll help you pick the best fit for your needs and goals.",
title: translate( 'Explore the WordPress.com Plans' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 8 times:
translate( 'Explore WordPress.com Plans' ) ES Score: 12

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

description:
'The Media Library is where you can manage your images, audio, videos, and documents ' +
'all in one place.',
title: translate( 'The Media Library' ),
Copy link

Choose a reason for hiding this comment

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

😞 103 existing translations will be lost with this change.

},
{
link: 'http://en.support.wordpress.com/followers/',
post_id: 5444,
title: 'Your Followers',
description:
title: translate( 'Your Followers' ),
Copy link

Choose a reason for hiding this comment

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

😞 56 existing translations will be lost with this change.
If the string must change, the following option has already been translated 43 times:
translate( 'followers' ) ES Score: 10
See 1 additional suggestion in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

title: 'Webmaster Tools',
description:
'Learn how to verify your WordPress.com site for the webmaster tools that many search engines provide.',
title: translate( 'Webmaster Tools' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 17 times:
translate( 'Webmaster Tools Verification' ) ES Score: 11

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

title: 'WordPress.com Plans',
description:
'Learn about the capabilities and features that the different plans unlock for your site.',
title: translate( 'WordPress.com Plans' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 18 times:
translate( 'Discover WordPress.com Plans' ) ES Score: 11

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
link: 'http://en.support.wordpress.com/visual-editor/',
post_id: 3644,
title: 'The Visual Editor',
description:
title: translate( 'The Visual Editor' ),
Copy link

Choose a reason for hiding this comment

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

😞 95 existing translations will be lost with this change.

title: 'Follow Blogs',
description:
'When you follow a blog on WordPress.com, new posts from that site will automatically appear in your Reader.',
title: translate( 'Follow Blogs' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 59 times:
translate( 'Blogs I Follow' ) ES Score: 12

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
],
help: [
{
link: 'http://en.support.wordpress.com/blogging-u/',
post_id: 117437,
title: 'Blogging U.',
description:
title: translate( 'Blogging U.' ),
Copy link

Choose a reason for hiding this comment

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

🆗 This change is safe, we'll keep the existing 21 translations.

},
{
link: 'https://en.support.wordpress.com/',
title: 'All Support Articles',
description: 'Looking to learn more about a feature? Our docs have all the details.',
title: translate( 'All Support Articles' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 34 times:
translate( 'All support articles' ) ES Score: 16

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
link: 'https://learn.wordpress.com/',
title: 'Self-guided Online Tutorial',
description: 'A step-by-step guide to getting familiar with the platform.',
title: translate( 'Self-guided Online Tutorial' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 25 times:
translate( 'Self-guided online tutorial' ) ES Score: 23

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
type: RESULT_VIDEO,
link: 'https://www.youtube.com/embed/Y6iPsPwYD7g',
title: 'Change Your Privacy Settings',
description: 'Find out how to change your website privacy settings on WordPress.com.',
title: translate( 'Change Your Privacy Settings' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 24 times:
translate( 'Change privacy settings' ) ES Score: 12

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
type: RESULT_VIDEO,
link: 'https://www.youtube.com/embed/_tpcHN6ZtKM',
title: 'Schedule a Post',
description: 'Find out how to schedule a post on your WordPress.com website or blog.',
title: translate( 'Schedule a Post' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 21 times:
translate( 'Schedule post' ) ES Score: 12

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
type: RESULT_VIDEO,
link: 'https://www.youtube.com/embed/V8UToJoSf4Q',
title: 'Add a Simple Payment Button',
description: 'Find out how to add a payment button to your WordPress.com website.',
title: translate( 'Add a Simple Payment Button' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 1 time:
translate( 'Add a simple payment button.' ) ES Score: 17
See 1 additional suggestion in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
type: RESULT_VIDEO,
link: 'https://www.youtube.com/embed/mCfuh5bCOwM',
title: 'Create a Post',
description: 'Find out how to create a post on WordPress.com.',
title: translate( 'Create a Post' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 26 times:
translate( 'Create a post' ) ES Score: 10

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

},
{
type: RESULT_VIDEO,
link: 'https://www.youtube.com/embed/JVnltCZUKC4',
title: 'Add Testimonials',
description: 'Find out how to add testimonials to your WordPress.com website or blog.',
title: translate( 'Add Testimonials' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 18 times:
translate( 'Add some testimonials' ) ES Score: 13

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

@lsinger
Copy link
Contributor

lsinger commented Sep 20, 2018

Inline Help uses a file called contextual-help.js as its database, which I see you've edited heavily in this PR to add a locale variable to every entry.

When we built Inline Help, the idea here was that we could, in the future, add alternative version of the file for different languages, e.g., a file called contextual-help-br.js could contain the help content for Brazil. We'd only need to change the import of that file to be based on the user's locale. That would also enable us to include languages that don't have all the listed help articles available, or that maybe have locale-specific issues (legal things, payment services, differing social media sites, etc.). We'd just have a custom "database" for the locale.

I'd prefer we explore that option before we make the contextual-help.js file itself dynamic. Thoughts? Please feel free to ping me on Slack (also: #calypso-inline-help!).

@ramonjd
Copy link
Member Author

ramonjd commented Sep 20, 2018

Hey @lsinger! Thanks a lot for your comments. It's immensely helpful to understand the intentions behind this feature.

When we built Inline Help, the idea here was that we could, in the future, add alternative version of the file for different languages, e.g., a file called contextual-help-br.js could contain the help content for Brazil. We'd only need to change the import of that file to be based on the user's locale

Would the contents of each of these files be translated? Or hardcoded in the target language, i.e., Brazilian?

If the latter, we'd probably have to come up with a way to generate these from our translation sources, which compels me to ask whether we could rather devise some backend solution/API to deliver localized contextual help text/support links/page ids to the client.

Storing them on the client side up to a certain quantity sounds easier, yet we might gain more flexibility later if we could fetch the pageId, title, excerpt and permalink of the localized support article we wanted via, let's say, an English slug or pageId.

@Automattic/i18n is working on adding meta to localized support pages, linking them to their English equivalents, so this will be theoretically possible.

It strikes me as particularly relevant in the case of the hard-coded page id, which I noticed we use for tracking and for loading the support article's content in the overlay. Keeping on top of those as they change and as we add more languages might become tedious.

What do you think?

That would also enable us to include languages that don't have all the listed help articles available

@Automattic/i18n is also steaming ahead with getting our support translations up to scratch, at least for our "Magnificent" set of languages. @emilyaudela is doing a marvellous job on that.

One advantage of the meta information I referred to above is that we'll be able to query whether a localized support page exists for a particular topic instead of curating a manual list or simply linking off to the English language page, which is the case now.

Our ultimate goal is to standardize the support help links in such a way so that developers only have to worry about the locale subdomain fragment when linking to {x}.support.wordpress.com/help-me-please, and not whether the page exists at all.

For languages that fall beyond the bounds of magnificence, @akirk and I spoke about potentially offering users the option to have the English page machine translated (Google), triggered via a url param or whatever. That's a few steps down the track however.

...maybe have locale-specific issues (legal things, payment services, differing social media sites, etc.) We'd just have a custom "database" for the locale. I'd prefer we explore that option before we make the contextual-help.js file itself dynamic.

Has any work been done on locale-specific issues? Perhaps in the interim we might offer a generic set of help topics for each locale, in seperate resources as you mentioned, and then extend them with locale-specific topics as we progress. That way at least we could offer contextual help in languages other than English.

I'd prefer we explore that option before we make the contextual-help.js file itself dynamic.

Just to be clear, are you referring to the dynamic help links or the use of translate in general?

Ah, I wrote more than I intended. 🥔I hope some of it makes sense. Thanks again!

I'll join the group so I can get more context. Getting this awesome feature translated would be a tremendous thing indeed!

@ramonjd
Copy link
Member Author

ramonjd commented Oct 1, 2018

My impression though is that you’re assuming that all help articles will exist in every language.

@lsinger They don't. Guarding against this assumption has always been an unfortunate limitation on how we link to support sites, but we've done some preliminary work to mitigate this. :)

Perhaps I should have provided more background information, sorry!

As mentioned in the PR, we are normalizing all support page uris so that de.support.wordpress.com/business-plan/, es.support.wordpress.com/business-plan/ and fr.support.wordpress.com/business-plan/ redirect to the corresponding, localized support pages.

Where they don't, the user will see a localized page offering them the choice of visiting the original English or a Google-translated version. Though as more and more support page translations come through, we should hopefully experience fewer of these.

More info: pLZE4-cYQ-p2

If you have any questions on this, or would like to share ideas, feel free to ping me directly.

@akirk
Copy link
Member

akirk commented Oct 11, 2018

Could you incorporate #27715?

@ramonjd ramonjd force-pushed the add/localized-support-urls-inline-contextual-help branch from 08319a5 to 34f85c9 Compare October 12, 2018 01:44
title: 'Change Your Account Email Address',
description: 'Find out how to change your account email address on WordPress.com.',
title: translate( 'Change Your Account Email Address' ),
description: translate( 'Find out how to change your account email address on WordPress.com.' ),
Copy link

Choose a reason for hiding this comment

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

Hi! I've found a possible matching string that has already been translated 18 times:
translate( 'Find out how to change your account email address WordPress.com.' ) ES Score: 11

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

@ramonjd ramonjd changed the title [WIP] Help: Localizing inline contextual help links Help: Localizing inline contextual help links Oct 12, 2018
@@ -36,7 +36,7 @@
"facebook_app_id": "611241942420191",
"rebrand_cities_prefix": "rebrandcitiestestsite",
"livechat_support_locales": [ "en", "es", "pt-br" ],
"support_site_locales": [ "en", "es", "de", "ja", "pt-br" ],
"support_site_locales": [ "en", "es", "de", "fr", "he", "id", "it", "ja", "nl", "pt-br", "ru", "tr" ],
Copy link
Member

Choose a reason for hiding this comment

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

We've now launched all Mag16. Could you add those and I think then we can launch this!

@akirk
Copy link
Member

akirk commented Oct 24, 2018

Would it make sense to rebase this on #27857?

@ramonjd
Copy link
Member Author

ramonjd commented Oct 24, 2018

Would it make sense to rebase this on #27857?

Yes!! :) When are you going to write a common-sense bot? :)

Actually, given the size/usefulness of #27857 it would be great to get that into master first. I'll review today.

@akirk
Copy link
Member

akirk commented Oct 30, 2018

In light of #27857 and #28166 I have removed the use of getSupportSiteLocale().

@ramonjd ramonjd force-pushed the add/localized-support-urls-inline-contextual-help branch from cc98329 to cf0a923 Compare October 30, 2018 23:46
@ramonjd
Copy link
Member Author

ramonjd commented Oct 30, 2018

Rebased and updated to use localizeUrl() from #27857

@akirk akirk force-pushed the add/localized-support-urls-inline-contextual-help branch from b64eb55 to eee0cc9 Compare December 11, 2018 12:31
@akirk akirk force-pushed the add/localized-support-urls-inline-contextual-help branch from eee0cc9 to 15c9cfa Compare March 18, 2019 09:44
…adding known translated blog locale slugs to shared config array.
…for all envs

Removed duplicate event.preventDefault
Added check for non-EN support site locale, if a localized support site that matches the user's current locale exists, we send them there rather than show the English article. If the localized article does not yet exist, the user has the opportunity to view the English content or have the page translated by Google translate.
@lsl lsl force-pushed the add/localized-support-urls-inline-contextual-help branch from a43c789 to 7552756 Compare April 26, 2019 06:33
@matticbot
Copy link
Contributor

matticbot commented Apr 26, 2019

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

Sections (~7668 bytes added 📈)

name  parsed_size           gzip_size
help      +7668 B  (+1.0%)     +242 B  (+0.2%)

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 (~23023 bytes added 📈)

name                                                         parsed_size            gzip_size
async-load-my-sites-checklist-wpcom-checklist-component-jsx      +7668 B   (+4.9%)     +242 B  (+0.6%)
async-load-components-web-preview-component                      +7668 B   (+2.3%)     +242 B  (+0.3%)
async-load-blocks-inline-help                                    +7668 B  (+12.7%)     +242 B  (+1.5%)
async-load-blocks-inline-help-popover                              +19 B   (+0.0%)      +17 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.

@lsl lsl added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Apr 26, 2019
@lsl lsl merged commit 3da5caa into master Apr 26, 2019
@lsl lsl deleted the add/localized-support-urls-inline-contextual-help branch April 26, 2019 08:36
@matticbot matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants