Internationalização de Blocos Gutenberg (i18n)

WordPress Extremo: Gutenberg + React + Blocos Customizados

Bloco de Posts com Filtro por Múltiplas Categorias

Filtrando Posts por Categoria no Editor do Bloco

Bloco Dinâmico com Renderização no Servidor

Conectando Blocos com a REST API do WordPress

Componentes Reutilizáveis e Atributos Compostos em Blocos Gutenberg

Ícones, Imagens e Classes Personalizadas no Gutenberg

Cor, Alinhamento e Estilo Dinâmico com Gutenberg + React

Estilizando Blocos Gutenberg com CSS e Classes Dinâmicas

Campos Dinâmicos e InspectorControls no Gutenberg: Deixe Seu Bloco Interativo

Criando Blocos Personalizados com Gutenberg e React

Salvando Dados Personalizados no Backend via REST API

Blocos Reutilizáveis com InnerBlocks no Gutenberg

Comunicação entre Blocos com Block Context API no WordPress

Como Criar Blocos Condicionais no Gutenberg com Atributos

Internationalização de Blocos Gutenberg (i18n)

Scripts e Estilos Condicionais: Carregando apenas quando necessário

Uso de Slots e Templates Personalizados

Inserindo Blocos via Código ou Shortcodes

Testes e Validação de Blocos com @wordpress/scripts

Distribuindo Seus Blocos: Plugins, Repositório e GitHub

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.