(I revised this answer mainly to let other readers and you know the issues I originally noticed in your steps as shown in the question.)
So in my original answer, I was focused on suggesting you to just go with the multiple script translation files, but I thought I should clarify the three things below:
It will find all the translations in the
srcdirectory in the multiplejsfiles and will use that as the relative paths while thenpm run buildwill make onebuild/index.jsfile which I am enqueueing.
-
Yes,
wp i18n make-jsonwill create one JED-formatted JSON file per JavaScript source file — more details on Make WordPress. -
As with the
npm run build(which uses thewp-scriptspackage), it — as far as I know — only builds JavaScript source files (.js) and not JED files which are JSON files. (There is a JS linter and other tools, though.)
The
wp i18n make-jsonwill create multiple files which the MD5 won’t work (probably because of the relative paths)
-
The files would work so long as you give the proper file name to your PO files where the format is
${domain}-${locale}.po(see Plugin Handbook » Loading Text Domain) — e.g.my-plugin-it_IT.poif the text domain ismy-pluginand the locale is set toit_IT(Italiano).But then, you used the wrong text domain, e.g. with the command
wp i18n make-pot ./ lang/myguten.pot, you should’ve usedgbgand notmygutenbecause theText Domainin your plugin header isgbg(i.e.Text Domain: gbg).Additionally, your
cp(“copy”) command should have been preceded bycd lang. -
As with the MD5 thing, it is the MD5 hash of the JS source file path as you can see in the PO file — so the path is (or should be) relative to the plugin folder.
E.g. Structure of my sample plugin:
wpse-366881/ build/ index.js <- relative path = build/index.js lang/ src/ edit.js <- relative path = src/edit.js index.js <- relative path = src/index.js index.php package.json
I rather have one combined JSON file.
So how should you internationalize JavaScript spread in multiple files but build in one?
Just follow the steps in the question, except:
-
Make sure the translation files (POT, PO, MO and JED/JSON) — i.e. the code inside and the file names — are using the text domain as defined in the plugin header. Additionally, put all the translation files in the correct directory.
E.g.
wp i18n make-pot ./ lang/gbg.pot -
There’s no need to run the
wp i18n make-jsoncommand which creates the multiple files, and just usepo2jsonto create a single JED/JSON file from a PO file.And the command for that is: (Note that as of writing, WordPress uses JED 1.x)
npx po2json <path to PO file> <path to JSON file> -f jed1.xE.g.
npx po2json lang/gbg-en_US.po lang/gbg-en_US-gbg-myguten-script.json -f jed1.x
Sample Plugin I used for testing purposes (and for other readers to try)
You can find it on GitHub — tried & tested working on WordPress 5.4.1, with the site locale/language set to it_IT/Italiano. And the code are basically all based on your code, except in index.php, I used the build/index.asset.php file to automatically load dependencies and version.
And btw, the plugin was initially based on the example here.