Categorias
WordPress

Internacionalização com blocos Gutenberg

Se você está acessando o blog pela primeira vez esse post faz parte de uma série de posts relacionados na criação de blocos para o novo editor do WordPress Gutenberg. Caso queira conferir os posts anteriores:

Internacionalização dentro da construção de temas é o fator fundamental, nele damos a possibilidade do tema se adaptar a diversos idiomas. Essa regra também se aplica aos nossos blocos, caso queiramos criar um produto que atenda diversos idiomas, precisaremos permitir que toda saída de texto do nosso bloco se a adapte ao idioma do WordPress.

Antes do Gutenberg a internacionalização de texto era feita no back-end através da função wp_localize_script() . Agora com o Gutenberg é possível fazer a internacionalização no front-end, para isso vamos trabalhar como uma biblioteca javascript chamada wp-i18n. Se você já trabalhou com a internacionalização de temas o processo será o mesmo, precisamos especificar uma domínio para nossas String, nada mais é que um id que é adicionado no cabeçalho do nosso tema ou plugin. Após definido nosso domínio (text domain) fazemos a chama de texto da seguinte forma:

__( 'Hello, dear user!', 'my-text-domain' );

Essa função que envolve o texto será responsável por conferir se o tema ou plugin possui tradução para essa string, que será armazenado em um arquivo .pot. Ele pode ser gerado automaticamente por algumas ferramentas. No caso de blocos Gutenberg podemos utilizar o WordPress i18n babel plugin para gerar nosso arquivo .pot.

Para nosso tutorial vamos utilizar os blocos criados nos exercícios anteriores e o resultado será o seguinte:

/** * 1 - Criando primeiro bloco Gutenberg com ES5: parte 04 * - internacionalizacao com blocos gutenberg */ ( function( blocks, element, editor, i18n ) { var el = element.createElement, RichText = editor.RichText; //registrando nosso bloco blocks.registerBlockType( 'fellyph/tutorial-03', { title: i18n.__('Bloco com cadastro de atributo', 'fellyph'), icon: 'smiley', category: 'layout', keywords: [ i18n.__('Tutorial', 'fellyph'), i18n.__('Cadastro', 'fellyph'), i18n.__('Dinâmico', 'fellyph') ], //registrando o tipo de bloco que iremos trabalhar attributes: { content: { type: 'string', source: 'html', selector: 'p', } }, // função responsável por exibir nosso bloco no editor edit: function(props) { var content = props.attributes.content; // função responsável por acompanhar as mudanças do nosso atributo function onChangeContent( newContent ) { props.setAttributes( { content: newContent } ); } // agora retornamos um elemento RichText ao invés de um parâgrafo return el( RichText, { tagName: 'p', className: props.className, onChange: onChangeContent, placeholder: i18n.__('Insira texto aqui', 'fellyph'), value: content, } ); }, save: function(props) { return el( RichText.Content , { tagName: 'p', className: props.className, value: props.attributes.content, } ); }, }); }( window.wp.blocks, window.wp.element, window.wp.editor, window.wp.i18n ) );

Na primeira linha adicionamos uma nova dependência o script i18n, dentro do nosso script trocamos todas as chamadas de strings que serão exibidas para o usuário, no front-end e no editor de nossa aplicação pela função i18n.__() , nela vamos passar o texto original e o text domain para tradução como parâmetros.

Para aumentar a quantidade de texto eu adicionei uma nova propriedade em nosso bloco keywords, ela ajudar na busca de nossos componentes, no caso adicionamos 3 keywords em um array: Tutorial, Cadastro e Dinâmico com isso quando realizamos uma consulta as keywords podem ser um critério para achar o nosso bloco como podemos ver na imagem abaixo:

A keyword ajuda a achar o nosso bloco

O resultado do nosso bloco será praticamente o mesmo, com uma diferença que o nosso texto agora está localizado:

Podemos ver nos detalhes do nosso bloco que estamos carregando o título que cadastramos e no bloco podemos ver o nosso placeholder.

O último passo será criar o nosso arquivo de tradução o .poc, temos duas opções, a primeira seria gerando com software especifico o poedit, caso você queira evitar tooling com Babel e Webpack:

A seguida opção com o pacote nodeJS @wordpress/babel-plugin-makepot, para isso precisamos figuração de nosso projeto com babel e Webpack isso vai demandar um post específico dai entramos na criação de blocos com JSX.

O código completo você irá encontrar em meu github: https://github.com/fellyph/Gutenberg-tutorials/tree/tutoriais/gutenberg-04

Até o próximo post!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *