tandem
/
tipus
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Try to localize Gutenberg to Spanish, as an i18n test 

Gutenberg uses its own @wordpress/i18n for internationalization, which
is not much more than a wrapper around tannin[0], a reimplementation of
Jed[1].

It uses the same brain-damaged idea of all JavaScript applications: load
a really huge JavaScript object with the source text as key, and the
translations, if there are plurals, as values.  That is what they call
“a gettext localization library”.

The problem now becomes: how do i extract the translatable strings from
the libraries?

Isolated Block Editor’s maintainer stance is very clear: “It’s
Gutenberg, so whatever you need to do there will work the same”[2]. In
other words, “don’t know; don’t care”.

Let’s see what Gutenberg people say.

Well, Gutenberg may not require WordPress, but their developers sure
assume that you are using WordPress[3], and if you complain then their
response is “Why do you think using wp-cli is not easy enough?”[4].

Apparently, before wp-cli they used @wordpress/babel-plugin-makepot,
that creates a POT file for each JavasScript processed with WebPack,
but does not extract the strings from imported packages.  Which is kind
of logical, but then where do i get the required JSON files i need to
load to translate their fucking overly complex piece of crap?

Or, said in another way, how does WordPress do it? Apparently, they do
the same they do for every other plugin[5]: with GlotPress[6].

That _would_ work if i used the exact same versions as the plugin does,
but it would not help me translate the strings from
@automattic/isolated-block-editor because they are **not** a WordPress
plugin.  And, as we saw previously, the maintainer does not care.

Well, i have to extract them myself somehow.  Using the uglies hack i
could muster, apparently, because wp-cli i18n refuses to extract strings
from inside node_modules: create a symlink from each source directory i
need to translate into my po folder, and use their beloved wp-cli i18n
to create the po, including the strings from my source.

Then i downloaded the plugin PO file to include the official translation
to Spanish, and wrote a couple to test whether these from Isolated Block
Editor were being correctly extracted.

However, i can **not** use wp-cli i18n to generate the JSON file because
the fucking thing wants to generate a single JSON file for each
JavaScript source file, thus generates around 650 JSON files.

Are we mad?!

The author of Jed recommends po2json and at this point i do not really
care if i need yet another fucking tool for this.  Just do it, but make
sure it is Jed’s 1.x version, otherwise “modern” Gutenberg does not know
what to do with the translations.

What a shitshow.

[0]: https://github.com/aduth/tannin
[1]: https://github.com/messageformat/Jed.
[2]: https://github.com/Automattic/isolated-block-editor/issues/195#issuecomment-1359566724
[3]: https://github.com/WordPress/gutenberg/issues/14803#issuecomment-479823416
[4]: https://github.com/WordPress/gutenberg/issues/14803#issuecomment-479581903
[5]: https://github.com/WordPress/gutenberg/issues/13535#issuecomment-458678681
[6]: https://developer.wordpress.org/block-editor/contributors/localizing/
This commit is contained in:
jordi fita mas 2023-06-11 03:50:35 +02:00
parent be41b01b0c
commit 8f74a96f38
29 changed files with 13560 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,3 +1,5 @@
/node_modules/
/po/*.pot
/web/static/editor.css
/web/static/editor.js
/web/static/*.json

1
.idea/tipus.iml
View File

@ -5,6 +5,7 @@
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/web" type="java-resource" />
<excludeFolder url="file://$MODULE_DIR$/po/src" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />

18
Makefile Normal file
View File

@ -0,0 +1,18 @@
DEFAULT_DOMAIN = editor
POT_FILE = po/$(DEFAULT_DOMAIN).pot
LINGUAS = es
JSON_FILES = $(patsubst %,web/static/%.json,$(LINGUAS))
locales: $(JSON_FILES)
po/%.po: $(POT_FILE)
msgmerge --no-wrap --update --backup=off $@ $<
web/static/%.json: po/%.po
npx po2json --format jed1.x $< $@
$(POT_FILE):
wp i18n make-pot . $@ --ignore-domain --include=editor,po/src
.PHONY: locales

12
babel.config.js
View File

@ -1,7 +1,13 @@
module.exports = (api) => {
api.cache(true);
api.cache(true);
return {
return {
plugins: [
[
"@wordpress/babel-plugin-makepot",
{"output": "po/editor.pot"}
],
],
presets: ['@wordpress/babel-preset-default'],
};
};
};

36
editor/index.js
View File

@ -1,4 +1,5 @@
import {render} from '@wordpress/element';
import {__, setLocaleData} from '@wordpress/i18n';
import './style.scss';
import IsolatedBlockEditor, {ToolbarSlot} from '@automattic/isolated-block-editor';
@ -52,16 +53,25 @@ function save() {
fetch('/edit', requestOptions);
}
render(
<IsolatedBlockEditor
settings={settings}
onLoad={(parser, rawHandler) => onLoad(textarea.value, parser, rawHandler)}
onSaveContent={(content) => saveBlocks(content, textarea)}
onError={() => document.location.reload()}
>
<ToolbarSlot>
<Button onClick={save} variant="primary">Beep!</Button>
</ToolbarSlot>
</IsolatedBlockEditor>,
editor
);
async function load(editor) {
const response = await fetch('/static/es.json');
const result = await response.json();
const localeData = result.locale_data.messages;
localeData[""].domain = "default";
setLocaleData(localeData, 'default');
render(
<IsolatedBlockEditor
settings={settings}
onLoad={(parser, rawHandler) => onLoad(textarea.value, parser, rawHandler)}
onSaveContent={(content) => saveBlocks(content, textarea)}
onError={() => document.location.reload()}
>
<ToolbarSlot>
<Button onClick={save} variant="primary">{__('Beep!')}</Button>
</ToolbarSlot>
</IsolatedBlockEditor>,
editor
);
}
load(editor);

158
package-lock.json generated
View File

@ -15,7 +15,8 @@
"@wordpress/components": "23.8.0",
"@wordpress/edit-post": "7.8.0",
"@wordpress/element": "5.8.0",
"@wordpress/format-library": "4.8.0"
"@wordpress/format-library": "4.8.0",
"@wordpress/i18n": "4.31.0"
},
"devDependencies": {
"@babel/core": "^7.21.4",
@ -29,6 +30,7 @@
"babel-plugin-inline-json-import": "^0.3.2",
"css-loader": "^6.7.3",
"mini-css-extract-plugin": "^2.7.5",
"po2json": "^0.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass-loader": "^13.2.2",
@ -4980,6 +4982,15 @@
"node": ">= 0.4.0"
}
},
"node_modules/has-color": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
"integrity": "sha512-kaNz5OTAYYmt646Hkqw50/qyxP2vFnTVu5AQ1Zmk22Kk5+4Qx6BpO8+u7IKsML5fOsFk0ZT0AcCJNYwcvaLBvw==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@ -5642,6 +5653,40 @@
"integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==",
"devOptional": true
},
"node_modules/nomnom": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
"integrity": "sha512-5s0JxqhDx9/rksG2BTMVN1enjWSvPidpoSgViZU4ZXULyTe+7jxcCRLB6f42Z0l1xYJpleCBtSyY6Lwg3uu5CQ==",
"deprecated": "Package no longer supported. Contact support@npmjs.com for more info.",
"dev": true,
"dependencies": {
"chalk": "~0.4.0",
"underscore": "~1.6.0"
}
},
"node_modules/nomnom/node_modules/ansi-styles": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
"integrity": "sha512-3iF4FIKdxaVYT3JqQuY3Wat/T2t7TRbbQ94Fu50ZUCbLy4TFbTzr90NOHQodQkNqmeEGCw8WbeP78WNi6SKYUA==",
"dev": true,
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/nomnom/node_modules/chalk": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
"integrity": "sha512-sQfYDlfv2DGVtjdoQqxS0cEZDroyG8h6TamA6rvxwlrU5BaSLDx9xhatBYl2pxZ7gmpNaPFVwBtdGdu5rQ+tYQ==",
"dev": true,
"dependencies": {
"ansi-styles": "~1.0.0",
"has-color": "~0.1.0",
"strip-ansi": "~0.1.0"
},
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@ -5804,6 +5849,31 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/po2json": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/po2json/-/po2json-0.4.5.tgz",
"integrity": "sha512-JH0hgi1fC0t9UvdiyS7kcVly0N1WNey4R2YZ/jPaxQKYm6Cfej7ZTgiEy8LP2JwoEhONceiNS8JH5mWPQkiXeA==",
"dev": true,
"dependencies": {
"gettext-parser": "1.1.0",
"nomnom": "1.8.1"
},
"bin": {
"po2json": "bin/po2json"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/po2json/node_modules/gettext-parser": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/gettext-parser/-/gettext-parser-1.1.0.tgz",
"integrity": "sha512-zL3eayB0jF+cr6vogH/VJKoKcj7uQj2TPByaaj6a4k/3elk9iq7fiwCM2FqdzS/umo021RetSanVisarzeb9Wg==",
"dev": true,
"dependencies": {
"encoding": "^0.1.11"
}
},
"node_modules/postcss": {
"version": "8.4.20",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
@ -6588,6 +6658,18 @@
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
"integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
},
"node_modules/strip-ansi": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
"integrity": "sha512-behete+3uqxecWlDAm5lmskaSaISA+ThQ4oNNBDTBJt0x2ppR6IPqfZNuj6BLaLJ/Sji4TPZlcRyOis8wXQTLg==",
"dev": true,
"bin": {
"strip-ansi": "cli.js"
},
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/stylis": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
@ -6782,6 +6864,12 @@
"node": ">=12.20"
}
},
"node_modules/underscore": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
"integrity": "sha512-z4o1fvKUojIWh9XuaVLUDdf86RQiq13AC1dmHbTpoyuu+bquHms76v16CjycCbec87J7z0k//SiQVk0sMdFmpQ==",
"dev": true
},
"node_modules/unicode-canonical-property-names-ecmascript": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@ -11062,6 +11150,12 @@
"function-bind": "^1.1.1"
}
},
"has-color": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz",
"integrity": "sha512-kaNz5OTAYYmt646Hkqw50/qyxP2vFnTVu5AQ1Zmk22Kk5+4Qx6BpO8+u7IKsML5fOsFk0ZT0AcCJNYwcvaLBvw==",
"dev": true
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@ -11574,6 +11668,35 @@
"integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==",
"devOptional": true
},
"nomnom": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz",
"integrity": "sha512-5s0JxqhDx9/rksG2BTMVN1enjWSvPidpoSgViZU4ZXULyTe+7jxcCRLB6f42Z0l1xYJpleCBtSyY6Lwg3uu5CQ==",
"dev": true,
"requires": {
"chalk": "~0.4.0",
"underscore": "~1.6.0"
},
"dependencies": {
"ansi-styles": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz",
"integrity": "sha512-3iF4FIKdxaVYT3JqQuY3Wat/T2t7TRbbQ94Fu50ZUCbLy4TFbTzr90NOHQodQkNqmeEGCw8WbeP78WNi6SKYUA==",
"dev": true
},
"chalk": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
"integrity": "sha512-sQfYDlfv2DGVtjdoQqxS0cEZDroyG8h6TamA6rvxwlrU5BaSLDx9xhatBYl2pxZ7gmpNaPFVwBtdGdu5rQ+tYQ==",
"dev": true,
"requires": {
"ansi-styles": "~1.0.0",
"has-color": "~0.1.0",
"strip-ansi": "~0.1.0"
}
}
}
},
"normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@ -11695,6 +11818,27 @@
"optional": true,
"peer": true
},
"po2json": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/po2json/-/po2json-0.4.5.tgz",
"integrity": "sha512-JH0hgi1fC0t9UvdiyS7kcVly0N1WNey4R2YZ/jPaxQKYm6Cfej7ZTgiEy8LP2JwoEhONceiNS8JH5mWPQkiXeA==",
"dev": true,
"requires": {
"gettext-parser": "1.1.0",
"nomnom": "1.8.1"
},
"dependencies": {
"gettext-parser": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/gettext-parser/-/gettext-parser-1.1.0.tgz",
"integrity": "sha512-zL3eayB0jF+cr6vogH/VJKoKcj7uQj2TPByaaj6a4k/3elk9iq7fiwCM2FqdzS/umo021RetSanVisarzeb9Wg==",
"dev": true,
"requires": {
"encoding": "^0.1.11"
}
}
}
},
"postcss": {
"version": "8.4.20",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
@ -12290,6 +12434,12 @@
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
"integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
},
"strip-ansi": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
"integrity": "sha512-behete+3uqxecWlDAm5lmskaSaISA+ThQ4oNNBDTBJt0x2ppR6IPqfZNuj6BLaLJ/Sji4TPZlcRyOis8wXQTLg==",
"dev": true
},
"stylis": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
@ -12430,6 +12580,12 @@
"integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
"dev": true
},
"underscore": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
"integrity": "sha512-z4o1fvKUojIWh9XuaVLUDdf86RQiq13AC1dmHbTpoyuu+bquHms76v16CjycCbec87J7z0k//SiQVk0sMdFmpQ==",
"dev": true
},
"unicode-canonical-property-names-ecmascript": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",

4
package.json
View File

@ -11,7 +11,8 @@
"@wordpress/components": "23.8.0",
"@wordpress/edit-post": "7.8.0",
"@wordpress/element": "5.8.0",
"@wordpress/format-library": "4.8.0"
"@wordpress/format-library": "4.8.0",
"@wordpress/i18n": "4.31.0"
},
"devDependencies": {
"@babel/core": "^7.21.4",
@ -25,6 +26,7 @@
"babel-plugin-inline-json-import": "^0.3.2",
"css-loader": "^6.7.3",
"mini-css-extract-plugin": "^2.7.5",
"po2json": "^0.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass-loader": "^13.2.2",

13326
po/es.po Normal file
View File

File diff suppressed because it is too large Load Diff

1
po/src/a11y Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/a11y/src

1
po/src/annotations Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/annotations/src

1
po/src/api-fetch Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/api-fetch/src

1
po/src/block-editor Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/block-editor/src

1
po/src/block-library Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/block-library/src

1
po/src/blocks Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/blocks/src

1
po/src/components Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/components/src

1
po/src/core-data Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/core-data/src

1
po/src/edit-post Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/edit-post/src

1
po/src/editor Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/editor/src

1
po/src/format-library Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/format-library/src

1
po/src/interface Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/interface/src

1
po/src/isolated-block-editor Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@automattic/isolated-block-editor/src/

1
po/src/keycodes Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/keycodes/src

1
po/src/list-reusable-blocks Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/list-reusable-blocks/src

1
po/src/media-utils Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/media-utils/src

1
po/src/preferences Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/preferences/src

1
po/src/reusable-blocks Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/reusable-blocks/src

1
po/src/rich-text Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/rich-text/src

1
po/src/server-side-render Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/server-side-render/src

1
po/src/widgets Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/@wordpress/widgets/src