Internationalização de Blocos Gutenberg (i18n)

Fala Dev! Blz?

A internacionalização (i18n) é essencial para tornar seus blocos acessíveis a usuários de diferentes idiomas.

O WordPress tem uma infraestrutura robusta para isso, e felizmente o Gutenberg já vem pronto para ser traduzido.

🗂️ O que você vai aprender

• Como preparar seus blocos para tradução.
• Como usar o __() e sprintf() do WordPress.
• Como carregar traduções com wp_set_script_translations().
• Onde e como gerar os arquivos .pot, .po, .mo.

📦 Estrutura mínima do bloco com i18n

Exemplo: blocks/hello/index.js

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import edit from './edit';
import save from './save';
import metadata from './block.json';

registerBlockType(metadata.name, {
  ...metadata,
  title: __('Hello World', 'wp24h'),
  description: __('A simple hello world block.', 'wp24h'),
  edit,
  save,
});

🔁 Use __(), _x(), sprintf() ou translate() de @wordpress/i18n para qualquer texto exibido.

🧠 i18n nos arquivos edit.js ou save.js

import { __ } from '@wordpress/i18n';

const title = __('Este é um título traduzível', 'wp24h');

📄 block.json com campos traduzíveis

{
  "apiVersion": 2,
  "name": "wp24h/hello",
  "title": "Hello World", 
  "description": "Bloco de exemplo.",
  "category": "widgets",
  "icon": "smiley",
  "textdomain": "wp24h",
  "editorScript": "file:../../dist/hello.js"
}

O textdomain deve bater com o nome do seu plugin (ou do seu tema, se aplicável).

🔄 Carregando traduções via PHP

No Init.php do seu plugin:

add_action('init', function () {
    wp_set_script_translations('wp24h-hello', 'wp24h', plugin_dir_path(__FILE__) . '../../languages');
});

Aqui, 'wp24h-hello' é o handle do script registrado no register_block_type.

🧰 Gerando arquivos .pot

No terminal, use:

npx @wordpress/scripts make-pot ./languages

Isso gera um arquivo .pot com todas as strings encontradas nos blocos.

Para editar e traduzir, use ferramentas como:

• Poedit
• Loco Translate (em tema/plugin)

📁 Estrutura de pastas ideal

plugin/
├── blocks/
│   └── hello/
│       └── index.js
├── dist/
├── languages/
│   ├── wp24h-pt_BR.po
│   └── wp24h-pt_BR.mo

✅ Checklist de i18n no Gutenberg

✨ Resultado

Com a i18n configurada:

• Usuários veem textos no idioma do WordPress.
• Blocos podem ser usados em plugins ou temas multilíngues.
• Traduções funcionam tanto no editor quanto no frontend.