Internacionalização com blocos Gutenberg

Blog fellyph cintra - Screen Shot 2019 01 27 at 23.33.08

Confira agora tudo que você precisa saber sobre 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.

O que são blocos Gutenberg?

Os blocos Gutenberg são os blocos do editor usados para criar layouts de conteúdo no novo editor de blocos do WordPress. Introduzido no WordPress 5.0, o editor Gutenberg é um editor totalmente baseado numa estrutura de componentes(blocos). Hoje os blocos Gutenberg podem ser utilizados em qualquer parte do site com a edição completa de site.

Caso queira conferir os posts anteriores:

Internacionalização na 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.

Como funciona a Internacionalização com blocos gutenberg?

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 um domínio para nossa String, nada mais é que um id adicionado no cabeçalho do nosso tema ou plugin. Após definido o nosso domínio (text domain) fazemos a chama de texto da seguinte forma:

__( 'Hello, dear user!', 'my-text-domain' );
Code language: JavaScript (javascript)

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 num arquivo .pot. Ele pode ser gerado automaticamente por algumas ferramentas. No caso de blocos Gutenberg podemos utilizar o WordPress i18n babel plugin para gerar o nosso arquivo .pot.

Como utilizar Internacionalização com blocos gutenberg

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 ) );
Code language: JavaScript (javascript)

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.

Ferramentas para se trabalhar com Internacionalização com blocos gutenberg

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 do 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!

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.