Add Jetpack and Layout Grid translations #4359

fluiddot · 2021-12-09T13:15:02Z

Description

This PR adds the translation files for localizing Jetpack blocks and the Layout Grid block (block experiments).

I'd like to note that, although this PR adds the missing translations, it's only the first part of the process of the incorporation process, as these changes don't bring the logic for updating them.

Translation files

For this purpose, a new folder located at src/i18n-translations has been created and contains the translations for each project. These files have been generated as part of a different PR (#4366), where optimized translation files will be produced including only the strings used by the native version of the editor.

NOTE: In the future, this folder won't be necessary as translations will be generated on the fly via a new command and when producing the JS bundle.

POT files

For the strings that are not part of the web version and therefore not included in the plugin's GlotPress project, we have to include them in the localization strings files (bundle/ios/GutenbergNativeTranslations.swift / bundle/android/strings.xml), exactly the same as we do for the Gutenberg strings.

This implied adding new NPM commands to generate the required POT files and updating the scripts we use for generating the localization strings files (po2swift.js / po2android.js), so they support multiple POT files as now we'll have one file each Gutenberg, Jetpack, and Layout Grid projects.

NOTE: I'm working on a new command to unify the POT files generation into a single one, so eventually, we won't need to add extra commands when adding translations of new plugins.

Localization strings files

The strings added to bundle/ios/GutenbergNativeTranslations.swift and bundle/android/strings.xml files are strings coming from Jetpack and Layout Grid plugins that require translation as they're only referenced in .native.js files.

To test

Verify that localization strings files are not modified

Run command: npm run genstrings
Observe that neither bundle/ios/GutenbergNativeTranslations.swift and bundle/android/strings.xml are modified.

Verify that Jetpack translations are present

Change the device's language to non-English.
Open the app.
Insert a Jetpack block (i.e.: Contact Info or Story blocks)
Observe that strings related to the block are translated to the selected language.
If any string remains untranslated, verify that is included in the localization strings files (bundle/ios/GutenbergNativeTranslations.swift / bundle/android/strings.xml).

Verify that Layout Grid translations are present

Change the device's language to non-English.
Open the app.
Insert the Layout Grid block
Observe that strings related to the block are translated to the selected language.
If any string remains untranslated, verify that is included in the localization strings files (bundle/ios/GutenbergNativeTranslations.swift / bundle/android/strings.xml).

NOTE: I noticed that some strings of the Layout Grid block are not translated, looks like this is caused because they're not retrieved by the correct domain (reference) hence, they're not being included in the GlotPress project. We'll address this in a separate PR.

Click here to display screenshot

PR submission checklist:

I have considered adding unit tests where possible.
I have considered if this change warrants user-facing release notes more info and have added them to RELEASE-NOTES.txt if necessary.

fluiddot · 2021-12-15T11:18:42Z

package.json

+		"makepot:android:gutenberg": "npm run wp -- i18n make-pot ./gutenberg/packages --include=*.native.js,*.android.js --exclude=test/*,e2e-tests/*,build/*,build-module/*,build-style/* --skip-php --subtract=./gutenberg.pot --ignore-domain gutenberg-android.pot",
+		"makepot:android:jetpack": "npm run wp -- i18n make-pot ./jetpack/projects/plugins/jetpack/extensions --include=*.native.js,*.android.js --exclude=test/*,e2e-tests/*,build/*,build-module/*,build-style/* --skip-php --subtract=./jetpack.pot --ignore-domain jetpack-android.pot",
+		"makepot:android:layout-grid": "npm run wp -- i18n make-pot ./block-experiments/blocks/layout-grid --include=*.native.js,*.android.js --exclude=test/*,e2e-tests/*,build/*,build-module/*,build-style/* --skip-php --subtract=./layout-grid.pot --ignore-domain layout-grid-android.pot",
+		"makepot:ios:gutenberg": "npm run wp -- i18n make-pot ./gutenberg/packages --include=*.native.js,*.ios.js --exclude=test/*,e2e-tests/*,build/*,build-module/*,build-style/* --skip-php --subtract=./gutenberg.pot --ignore-domain gutenberg-ios.pot",
+		"makepot:ios:jetpack": "npm run wp -- i18n make-pot ./jetpack/projects/plugins/jetpack/extensions --include=*.native.js,*.ios.js --exclude=test/*,e2e-tests/*,build/*,build-module/*,build-style/* --skip-php --subtract=./jetpack.pot --ignore-domain jetpack-ios.pot",
+		"makepot:ios:layout-grid": "npm run wp -- i18n make-pot ./block-experiments/blocks/layout-grid --include=*.native.js,*.ios.js --exclude=test/*,e2e-tests/*,build/*,build-module/*,build-style/* --skip-php --subtract=./layout-grid.pot --ignore-domain layout-grid-ios.pot",


Generate POT files for each plugin including Gutenberg. This approach won't scale easily as we add more plugins, so I'll provide in a new PR a way to unify the POT files creation in a single command.

fluiddot · 2021-12-15T11:20:28Z

package.json

+		"makepot:jetpack": "npm run wp -- i18n make-pot ./jetpack/projects/plugins/jetpack/extensions --exclude=test/*,e2e-tests/*,build/*,build-module/*,build-style/*,*.native.js,*.ios.js,*.android.js,bundle/* --ignore-domain jetpack.pot",
+		"makepot:layout-grid": "npm run wp -- i18n make-pot ./block-experiments/blocks/layout-grid --exclude=test/*,e2e-tests/*,build/*,build-module/*,build-style/*,*.native.js,*.ios.js,*.android.js,bundle/* --ignore-domain layout-grid.pot",


Similar to Gutenberg, we need to generate these POT files for each plugin to subtract strings on makepot:<platform>:<plugin> above commands.

fluiddot · 2021-12-15T11:21:28Z

package.json

+		"genstrings:android": "npm run makepot:android:gutenberg && npm run makepot:android:jetpack && npm run makepot:android:layout-grid && ./bin/po2android.js bundle/android/strings.xml gutenberg-android.pot jetpack-android.pot layout-grid-android.pot",
+		"genstrings:ios": "npm run makepot:ios:gutenberg && npm run makepot:ios:jetpack && npm run makepot:ios:layout-grid && ./bin/po2swift.js bundle/ios/GutenbergNativeTranslations.swift gutenberg-ios.pot jetpack-ios.pot layout-grid-ios.pot",


As we do for Gutenberg, we have also to include the POT files generated for each plugin (Jetpack + Layout Grid) when generating the localization strings files.

fluiddot · 2021-12-15T11:23:30Z

bin/po2android.js

+		const potFilesContent = potFiles.map( (file) => fs.readFileSync( file ) );
+		const xmlOutput = po2Android( potFilesContent );


Now the po2android and po2ios scripts support multiple POT files, they basically merge all strings into a single object that is later on used for generating the localization strings files.

gutenberg-mobile/bin/po2android.js

Line 87 in b42efc1

return { ...result, ...po.translations[ '' ] };

fluiddot · 2021-12-15T11:31:35Z

src/block-experiments-setup.js


-export default function setupBlockExperiments( capabilities ) {
+const LAYOUT_GRID_LOCALE_DOMAIN = 'layout-grid';


The domain for the Layout Grid block is layout-grid, here you can see an example.

fluiddot · 2021-12-15T11:33:00Z

src/jetpack-editor-setup.js

@@ -26,6 +28,8 @@ const supportedJetpackBlocks = {
 	},
 };

+const JETPACK_LOCALE_DOMAIN = 'jetpack';


The domain for Jetpack is jetpack, here you can see an example.

peril-wordpress-mobile · 2021-12-15T12:07:04Z

Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

mchowning · 2021-12-16T13:29:19Z

I've got a bit of a task backlog right now, so I won't be able to get to this until next week. Could you take a look at this @jhnstn ?

jhnstn

The changes look good.
I verified that none of the strings were changed via genstrings command.
I did notice that 'ADD IMAGE' is not translated in the Jetpack story block:

I did find the string in bundle/android/strings.xml as is noted in the test steps

fluiddot added 7 commits December 3, 2021 18:09

Add jetpack and layout grid translation files

3785726

Move jetpack and layout-grid translations to new folder

ec25712

Add setup locale function

d1c3f6f

Setup Jetpack locale

e456ae0

Setup block experiments locale

d3c7933

Add make pot commands for jetpack and layout grid

7a049c8

Update localization strings files

b42efc1

fluiddot self-assigned this Dec 9, 2021

fluiddot commented Dec 15, 2021

View reviewed changes

Update release notes

9f0404a

fluiddot requested review from mkevins and mchowning December 15, 2021 12:11

fluiddot marked this pull request as ready for review December 15, 2021 12:11

fluiddot added 3 commits December 15, 2021 13:11

Merge branch 'develop' into add/jetpack-layout-grid-translations

f698c38

Update release notes after merge with develop

6e51e60

Update release notes after merge with develop

25ca1da

fluiddot added this to the 1.69.0 (19.0) milestone Dec 15, 2021

github-actions bot mentioned this pull request Dec 15, 2021

Gutenberg Mobile https://github.com/wordpress-mobile/gutenberg-mobile/pull/4359 wordpress-mobile/WordPress-Android#15717

Closed

fluiddot requested a review from jhnstn December 16, 2021 18:43

fluiddot mentioned this pull request Dec 17, 2021

Add i18n update script #4366

Merged

2 tasks

jhnstn approved these changes Dec 23, 2021

View reviewed changes

fluiddot mentioned this pull request Dec 27, 2021

[RNMobile] Refactor native editor initialization WordPress/gutenberg#37073

Merged

7 tasks

fluiddot merged commit cc93862 into develop Dec 27, 2021

fluiddot deleted the add/jetpack-layout-grid-translations branch December 27, 2021 15:11

fluiddot mentioned this pull request Dec 29, 2021

Use i18n update script when generating JS bundle #4411

Merged

2 tasks

mkevins mentioned this pull request Jan 7, 2022

Release 1.69.0 #4438

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Jetpack and Layout Grid translations #4359

Add Jetpack and Layout Grid translations #4359

fluiddot commented Dec 9, 2021 •

edited

Loading

fluiddot Dec 15, 2021

fluiddot Dec 15, 2021

fluiddot Dec 15, 2021

fluiddot Dec 15, 2021 •

edited

Loading

fluiddot Dec 15, 2021

fluiddot Dec 15, 2021

peril-wordpress-mobile bot commented Dec 15, 2021 •

edited

Loading

mchowning commented Dec 16, 2021

jhnstn left a comment

		"makepot:jetpack": "npm run wp -- i18n make-pot ./jetpack/projects/plugins/jetpack/extensions --exclude=test/,e2e-tests/,build/,build-module/,build-style/,.native.js,.ios.js,.android.js,bundle/* --ignore-domain jetpack.pot",
		"makepot:layout-grid": "npm run wp -- i18n make-pot ./block-experiments/blocks/layout-grid --exclude=test/,e2e-tests/,build/,build-module/,build-style/,.native.js,.ios.js,.android.js,bundle/* --ignore-domain layout-grid.pot",

		"genstrings:android": "npm run makepot:android:gutenberg && npm run makepot:android:jetpack && npm run makepot:android:layout-grid && ./bin/po2android.js bundle/android/strings.xml gutenberg-android.pot jetpack-android.pot layout-grid-android.pot",
		"genstrings:ios": "npm run makepot:ios:gutenberg && npm run makepot:ios:jetpack && npm run makepot:ios:layout-grid && ./bin/po2swift.js bundle/ios/GutenbergNativeTranslations.swift gutenberg-ios.pot jetpack-ios.pot layout-grid-ios.pot",

		const potFilesContent = potFiles.map( (file) => fs.readFileSync( file ) );
		const xmlOutput = po2Android( potFilesContent );


		export default function setupBlockExperiments( capabilities ) {
		const LAYOUT_GRID_LOCALE_DOMAIN = 'layout-grid';

Add Jetpack and Layout Grid translations #4359

Add Jetpack and Layout Grid translations #4359

Conversation

fluiddot commented Dec 9, 2021 • edited Loading

Description

Translation files

POT files

Localization strings files

To test

Verify that localization strings files are not modified

Verify that Jetpack translations are present

Verify that Layout Grid translations are present

fluiddot Dec 15, 2021

Choose a reason for hiding this comment

fluiddot Dec 15, 2021

Choose a reason for hiding this comment

fluiddot Dec 15, 2021

Choose a reason for hiding this comment

fluiddot Dec 15, 2021 • edited Loading

Choose a reason for hiding this comment

fluiddot Dec 15, 2021

Choose a reason for hiding this comment

fluiddot Dec 15, 2021

Choose a reason for hiding this comment

peril-wordpress-mobile bot commented Dec 15, 2021 • edited Loading

mchowning commented Dec 16, 2021

jhnstn left a comment

Choose a reason for hiding this comment

fluiddot commented Dec 9, 2021 •

edited

Loading

fluiddot Dec 15, 2021 •

edited

Loading

peril-wordpress-mobile bot commented Dec 15, 2021 •

edited

Loading