Footer i18n: Update footer branding to be well supported in multiple languages #78018

WBerredo · 2023-06-09T18:46:30Z

Related to #77916

Proposed Changes

Replace Automattic text for a variable containing Automattic SVG in order to avoid the company name being translated

Testing Instructions

This branch

On a logged-out tab
Go to a page that displays the footer. Ex: /theme/miniature
Change the language (Ex: Español) and confirm the name Automattic is not being translated

Prod

On a logged-out tab
Go to a page that displays the footer. Ex: /theme/miniature
Change the language (Ex: Español) and confirm the name Automattic is being translated to automático

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

…for components

…l state for components" This reverts commit 9a94552.

…taining Automattic

github-actions · 2023-06-09T18:46:42Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-72038

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-72038&env=jetpack

matticbot · 2023-06-09T18:46:42Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-69828

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-69828&env=jetpack

matticbot · 2023-06-09T18:56:33Z

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

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

name           parsed_size           gzip_size
entry-stepper      +1688 B  (+0.1%)     +110 B  (+0.0%)
entry-main         +1688 B  (+0.1%)     +110 B  (+0.0%)
entry-login        +1688 B  (+0.1%)     +110 B  (+0.0%)

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.

packages/wpcom-template-parts/src/utils.ts

a8ci18n · 2023-06-09T19:18:59Z

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

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

jsnajdr · 2023-06-12T06:27:06Z

packages/wpcom-template-parts/src/utils.ts

 	];

-	const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ];
+	const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]?.toString();


I'm wondering what these ±0 arithmetics are supposed to achieve. To select a random array element, seems to me that simple roger[ Math.floor( Math.random() * roger.length ) ] is sufficient.

Also, once you avoid the .split call and use interpolation to insert the A8c logo, the .toString call is no longer needed. In theory branding can be a HTML/JSX markup then.

I'm wondering what these ±0 arithmetics are supposed to achieve. To select a random array element, seems to me that simple roger[ Math.floor( Math.random() * roger.length ) ] is sufficient.

Agreed, I'm also not sure why are they needed, but I suppose it must be needed as it is a non-trivial addition.

matticbot · 2023-06-12T15:50:38Z

This PR modifies the release build for happy-blocks

To test your changes on WordPress.com, run install-plugin.sh happy-blocks fix/footer-i18n on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-r7r-p2

jsnajdr · 2023-06-12T18:54:07Z

packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx

@@ -477,7 +464,9 @@ const UniversalNavbarFooter = ( {
 	const isEnglishLocale = useIsEnglishLocale();
 	const pathNameWithoutLocale =
 		currentRoute && removeLocaleFromPathLocaleInFront( currentRoute ).slice( 1 );
-	const [ automatticBranding, setAutomatticBranding ] = useState( { article: '', noun: '' } );
+	const [ automatticBranding, setAutomatticBranding ] = useState< React.ReactChild >(


The React.ReactChild type (or rather React.JSX.Element) will be automatically inferred from the default value, doesn't need to be specified.

jsnajdr · 2023-06-12T18:55:22Z

packages/wpcom-template-parts/src/utils.tsx

+export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => {
+	const options = {
+		description:
+			'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"',


This options.description field, will it be correctly extracted by the i18n tool? I have some doubts about that. We might have to repeat it verbatim for every variant, however ugly that is.

epeicher

I have tested it, and it works as described. Using the Calypso link and changing the language to Español, I cannot see the word Automattic being translated while it is translated in wordpress.com.

LGTM! 🚢

jsnajdr

Looks good now 👍

a8ci18n · 2023-07-14T15:32:03Z

Translation for this Pull Request has now been finished.

WBerredo added 7 commits June 9, 2023 10:19

Theme SSR: Add a loading trigger to guarantee the same initial state …

9a94552

…for components

Revert "Theme SSR: Add a loading trigger to guarantee the same initia…

4003926

…l state for components" This reverts commit 9a94552.

Check the if the button should be disabled with a state variable

d5079f5

Use an empty state for Automattic branding before set the fianl value

fbc8b59

Update the XautomatticBrandingNoun from a hook to a normal method

1425f4a

Use preffix and suffix instead of article and noun

b58f085

Replace Automattic's name from the translate string to a variable con…

3968c13

…taining Automattic

WBerredo added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Jun 9, 2023

WBerredo self-assigned this Jun 9, 2023

WBerredo mentioned this pull request Jun 9, 2023

SSR Footer: Use an empty state for Automattic branding before set the final value #77916

Merged

7 tasks

jsnajdr reviewed Jun 9, 2023

View reviewed changes

packages/wpcom-template-parts/src/utils.ts Outdated Show resolved Hide resolved

jsnajdr reviewed Jun 12, 2023

View reviewed changes

WBerredo force-pushed the fix/footer-i18n branch from 9f23df3 to 3968c13 Compare June 12, 2023 15:59

WBerredo requested a review from jsnajdr June 12, 2023 16:04

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

Add Automattic Brand during the translation retrival step

c9c9434

WBerredo added [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging and removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Jun 12, 2023

jsnajdr reviewed Jun 12, 2023

View reviewed changes

WBerredo added 2 commits June 12, 2023 17:32

Fix property name to comment

5599cc7

Add the options in each translate

a811943

epeicher approved these changes Jun 13, 2023

View reviewed changes

jsnajdr approved these changes Jun 13, 2023

View reviewed changes

Base automatically changed from fix/ssr-footer to trunk June 13, 2023 13:14

Merge branch 'trunk' into fix/footer-i18n

399edfc

WBerredo added [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging and removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Jun 13, 2023

WBerredo added 2 commits June 29, 2023 13:31

Merge branch 'trunk' into fix/footer-i18n

4a52a98

Fix lint errors

4223643

epeicher added [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging and removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Jul 14, 2023

WBerredo merged commit 10f33f3 into trunk Jul 17, 2023

WBerredo deleted the fix/footer-i18n branch July 17, 2023 12:36

github-actions bot removed the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Jul 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Footer i18n: Update footer branding to be well supported in multiple languages #78018

Footer i18n: Update footer branding to be well supported in multiple languages #78018

WBerredo commented Jun 9, 2023 •

edited

Loading

github-actions bot commented Jun 9, 2023 •

edited by matticbot

Loading

matticbot commented Jun 9, 2023

matticbot commented Jun 9, 2023 •

edited

Loading

a8ci18n commented Jun 9, 2023 •

edited

Loading

jsnajdr Jun 12, 2023

WBerredo Jun 12, 2023

matticbot commented Jun 12, 2023

jsnajdr Jun 12, 2023

jsnajdr Jun 12, 2023

epeicher left a comment

jsnajdr left a comment

a8ci18n commented Jul 14, 2023

Footer i18n: Update footer branding to be well supported in multiple languages #78018

Footer i18n: Update footer branding to be well supported in multiple languages #78018

Conversation

WBerredo commented Jun 9, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jun 9, 2023 • edited by matticbot Loading

matticbot commented Jun 9, 2023

matticbot commented Jun 9, 2023 • edited Loading

a8ci18n commented Jun 9, 2023 • edited Loading

jsnajdr Jun 12, 2023

Choose a reason for hiding this comment

WBerredo Jun 12, 2023

Choose a reason for hiding this comment

matticbot commented Jun 12, 2023

jsnajdr Jun 12, 2023

Choose a reason for hiding this comment

jsnajdr Jun 12, 2023

Choose a reason for hiding this comment

epeicher left a comment

Choose a reason for hiding this comment

jsnajdr left a comment

Choose a reason for hiding this comment

a8ci18n commented Jul 14, 2023

WBerredo commented Jun 9, 2023 •

edited

Loading

github-actions bot commented Jun 9, 2023 •

edited by matticbot

Loading

matticbot commented Jun 9, 2023 •

edited

Loading

a8ci18n commented Jun 9, 2023 •

edited

Loading