Internacionalização com blocos Gutenberg

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.

Caso queira conferir os posts anteriores:

• parte 1 – Criando primeiro bloco Gutenberg
• parte 2 – Trabalhando com CSS externo
• parte 3 – Trabalhando com atributos

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:

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

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!