Update Webpack Config to Exclude i18n strings for translation

[ronalfy]

Feature Request

Right now when you run npm run build, the code is obfuscated and doesn't work with WP CLI's makepot feature because the variables are overwritten to be something else.

Adding this to webpack.config.prod.js allows for the i18n strings to not be obfuscated so that a user can run WP CLI's makepot command and have the JavaScript strings added to their POT file.

mangle: {
    safari10: true,
    except: ['__', '_n', '_x', '_nx' ],
},

When a user runs npm run build, the user can immediately run WP CLI's makepot command afterward and have the strings show up in their POT file.

An example of creating a POT file is here: https://developer.wordpress.org/cli/commands/i18n/make-pot/

Reference PR is: #182

[ronalfy]

@ahmadawais

@ahmadawais

Here's my POT with the exclusions.

The JS without the exclusions was a reasonable 66KB, and with the exclusions, 67KB.

I used the following WP CLI command:

wp i18n make-pot . languages/metronet-profile-picture.pot --exclude="/js/,/src/block/"

You can find my updated POT file with the exclusions here: https://raw.githubusercontent.com/ronalfy/user-profile-picture/dev/languages/metronet-profile-picture.pot

I believe this will also help with .org translations as well since it can parse the JS.

[idea--list]

+1000

I was always struggling while trying to i18n my GB blocks. Since yesterday i can do that at last but was afraid of using JSX, ES6, Webpack and any tools that would begin minifying the .js files just because i suspected those would break the i18n process...

This bugfix sounds really promising, have to try it now!

[idea--list]

@ronalfy Just tried the proposed fix but it does not seem to work on my end. Here is what i have done:

0. npx create-guten-block my-block
1. modfied webpack.config.prod.js just as you suggested
2. npm start
3. write the code ready /adding load_plugin_textdomain() and wp_set_script_translations() in init.php/
4. npm run build
5. wp i18n make-pot ./ languages/my-block.pot --exclude="/js/,/src/block/"
6. the .pot file will contain the extracted strings with proper references (dist/blocks.build.js)
7. translate with PoEdit to get the .po and .mo files
8. wp i18n make-json my-block-de_DE.po --no-purge
9. rename the json file to my-block-de_DE-my_block-cgb-block-js.json

I can confirm that after applying the suggested fix by running the command in 5. the .pot file contains the strings that reside in the .js file and need to be translated (which is not the case without the fix proposed here)

However at the end no strings that come from blocks.build.js will get translated in GB, despite the path i coded for the languages directory must be right as strings from the php files (ex plugin header) get translated under the plugins screen. Meaning load_plugin_textdomain() works alright, but wp_set_script_translations() seems to fail despite they search the translation files in the same directory. Can you confirm if your method results in a working translation of strings coming from script files? If so, do you have any idea what i might be doing wrong?

If i develop GB blocks with no dev tools, no JSX, no minifying, etc then i can successfully translate also strings coming from .js files.

[ronalfy]

I haven't tried to create a JSON file. The recommended way I believe is here: https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/

I just released a new version of a plugin and the translated strings are now showing up: https://translate.wordpress.org/projects/wp-plugins/metronet-profile-picture/dev/en-ca/default/

On Sun, Jun 2, 2019 at 7:50 PM Peter B notifications@github.com wrote:

@ronalfy https://github.com/ronalfy Just tried the proposed fix but it does not seem to work on my end. Here is what i have done:

0. npx create-guten-block my-block

   1. modfied webpack.config.prod.js just as you suggested
   2. npm start
   3. write the code ready /adding load_plugin_textdomain() and wp_set_script_translations() in init.php/
   4. npm run build
   5. wp i18n make-pot ./ languages/my-block.pot --exclude="/js/,/src/block/"
   6. the .pot file will contain the extracted strings with proper references (dist/blocks.build.js)
   7. translate with PoEdit to get the .po and .mo files
   8. wp i18n make-json my-block-de_DE.po --no-purge
   9. rename the json file to my-block-de_DE-my_block-cgb-block-js.json

I can confirm that after applying the suggested fix by running the command in 5. the .pot file contains the strings that reside in the .js file and need to be translated (which is not the case without the fix proposed here)

However at the end no strings that come from blocks.build.js will get translated in GB, despite the path i coded for the languages directory must be right as strings from the php files (ex plugin header) get translated under the plugins screen. Meaning load_plugin_textdomain() works alright, but wp_set_script_translations() seems to fail despite they search the translation files in the same directory. Can you confirm if your method results in a working translation of strings coming from script files? If so, do you have any idea what i might be doing wrong?

If i develop GB blocks with no dev tools, no JSX, no minifying, etc then i can successfully translate also strings coming from .js files.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ahmadawais/create-guten-block/issues/183?email_source=notifications&email_token=AAE3M2PZYVDIPQ75SJMPQI3PYRTF7A5CNFSM4HSBG6MKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWYBW2A#issuecomment-498080616, or mute the thread https://github.com/notifications/unsubscribe-auth/AAE3M2NBJGXDC6CYXCG4BSTPYRTF7ANCNFSM4HSBG6MA .

-- This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error, please notify Ronald Huereca at ronalfy@gmail.com.

You can only delay the inevitable. www.ronalfy.com

[idea--list]

Thanks for the quick reply! Just checked your code, as you call wp_set_script_translations( 'mpp_gutenberg', 'metronet-profile-picture' ); you just do not specify any location for a json file as in your case the translation comes from the WP plugin repo.

As i do not commit my plugins there, it is not an option. That is why i pass the location of a json as 3rd argument. It seems that the issue i am facing is then related to the content of the .json file. So took a closer look inside the json, and found a part "source":"dist\/blocks.build.js" inside it.

Made 2 assumptions: a) There might be a bug that prevents using several dots in the file name. So i just renamed blocks.build.js to block.js and modified the content of the json accordingly. Did not make any difference. b) Then i supposed the folder structure might be the issue then, so i just moved block.js to the root folder of the plugin and modified the content of the json file accordingly. That did not help either...

Find it very strange as the .po and .mo files located in the same directory work as expected but they just do not affect strings in js files. Even the console does not show errors so i am clueless why it works using old-school js without any dev tools and why things break otherwise...

[ronaldhuereca]

Care to share your code and I'll take a look?

[idea--list]

@ronaldhuereca

Just uploaded the pure ES5 version and also a CGB implementation of the same plugin. Added you as collaborator, so you should have insight to both versions. Also listed up the workflows step-by-step.

I really wonder what i might have missed in the second version... A working example of a i18n-ized GB block that stores the translation files in the languages folder (and not in WP plugin repo) would be highly appreciated!

[ronaldhuereca]

@idea--list I created a branch called i18n with a working example.

[rodrigodagostino]

Hey, @ronaldhuereca ! Where would that branch be located?

[ronalfy]

Here: https://github.com/idea--list/Callout-block-with-CGB/tree/i18ntest?files=1

On Mon, Jun 10, 2019 at 01:22 Rodrigo D’Agostino notifications@github.com wrote:

Hey, @ronaldhuereca https://github.com/ronaldhuereca ! Where would that branch be located?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ahmadawais/create-guten-block/issues/183?email_source=notifications&email_token=AAE3M2NPEXC7SPYJYOO5UJTPZXXLNA5CNFSM4HSBG6MKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXJA5IY#issuecomment-500305571, or mute the thread https://github.com/notifications/unsubscribe-auth/AAE3M2LHKGILHFAJY75WOEDPZXXLNANCNFSM4HSBG6MA .

-- This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error, please notify Ronald Huereca at ronalfy@gmail.com.

You can only delay the inevitable. www.ronalfy.com

[rodrigodagostino]

Thank you very much, @ronalfy ! I'll take a look to it :)