Playground block: Add i18n support #327
Conversation
packages/wordpress-playground-block/src/components/playground-preview/index.tsx
Outdated
Show resolved
Hide resolved
| {createInterpolateElement( | ||
| // translators: powered-by label with embedded icon. please leave markup tags intact, including numbering. | ||
| __( | ||
| '<span1>Powered by</span1> <Icon /> <span2>WordPress Playground</span2>' |
There was a problem hiding this comment.
The signature of createInterpolateElement() takes a map with keys for element names, so it is not possible to use regular <span> twice here and have them treated separately. But it turns out we can use unique non-existent tag names and achieve what we want.
It's not great because it might confuse translators who might "fix" our span "typos". To attempt to reduce the risk of this, I added a translators note that mentions the numbered markup tags.
| @@ -0,0 +1,9 @@ | |||
| import { createI18n, sprintf as coreSprintf } from '@wordpress/i18n'; | |||
|
|
|||
| const i18n = createI18n(undefined, 'interactive-code-block'); | |||
There was a problem hiding this comment.
Nice, I didn't know that you could set the domain in one place instead of writing it on every line.
There was a problem hiding this comment.
Nice, I didn't know that you could set the domain in one place instead of writing it on every line.
I didn't at first either. This PR started with manually passing text domain everywhere (and discovering that I'd forgotten to add it in a bunch of places). This is much better.
What?
This PR adds i18n support to enable translation of Playground block strings.
Why?
Before this PR, Playground block strings were not rendered using i18n facilities and were not translatable.
How?
This PR uses
@wordpress/i18n, adds a local i18n module with the correct text domain, and attempts to convert all fixed strings to using the i18n API.Testing Instructions
Smoke test. Use the block in the editor and on the front end. Play with different block settings toggles, and ensure the user visible text is intact.
@akirk Somehow it doesn't appear possible to select you as a reviewer when creating this PR. Would you be willing to review this as well? I am relatively new to i18n APIs and would love to learn from your wisdom here.