Categoria: WordPress

Categorias
AMP Accelerated mobile pages WordPress

AMP para WordPress

No post anterior falei sobre plugins de performance para WordPress, agora chegou a hora de falar de outro plugin relacionado a performance o Plugin do AMP para WordPress.

Assistindo conteúdo sobre WP no YouTube, por muitas vezes o plugin é vendido como plugin para deixar o WordPress rápido. Mas como isso é possível?

AMP é uma biblioteca que roda no front-end, ela foca na entrega do conteúdo e na experiência do usuário, ele possui três ferramentas cruciais para melhoria do desempenho:

  • AMP JS – Possui uma série de melhorias relacionadas a performance com tree shaking e lazy loading.
  • AMP HTML – Uma biblioteca de componentes HTML, como, slideshow, light-box, menu slideshow, player de vídeo entre outros.
  • AMP Cache – Esse item é ativado quando sua aplicação possui código AMP válido.

Umas das condições do plugin AMP é liberar a renderização de conteúdo não permitir que scripts terceiros aumentem o tempo de exibição do conteúdo da sua página.

Um bom exemplo de bloqueio da renderização de nossa página é a utilização embed de vídeos do YouTube quando criei o curso de PWA decidi criar uma página com todos os vídeos, inclui 17 embeds em uma mesma página, e o resultado foi o seguinte:

Auditoria de desempenho utilizando chrome devtools

Nos testes realizados na versão semAMP:

  • Primeira impressão de conteúdo é realizada em 3.4 segundos
  • O tempo de interação vai para 29.9 segundos isso significa que um usuário irá levar 30 segundos para interagir com o conteúdo.

O principal problema é causado por conta das várias requisições feita por múltiplos embeds do Youtube, por conta de rodarem um um iframe eles não conversam entre si acabam requisitando os mesmo scripts diversas vezes.

requisições realizadas pela página sem o plugin AMP

Como podemos ver na imagem acima temos varias requisições para o mesmo arquivo JavaScript totalizando 45 requisições, essas requisições aumentam o tamanho total da página, além de todas essas requisições serem disparadas ao mesmo tempo, assim impossibilitando o usuário de interagir com a página.

Quando ativamos o plugin AMP para mesma página temos o seguinte resultado.

Teste performance realizado como o plugin AMP ativo

Como podemos ver temos uma redução no tempo de carregamento e uma melhor na pontuação referente a performance

  • Primeira impressão de conteúdo é realizada em 2,8 segundos
  • O tempo de interação 5 segundo, essa foi a redução mais significativa.

Isso ocorre porque AMP passa a gerenciar esses recursos, como por exemplo conteúdo “embedado”agora o número de requisições JavaScript cai para 15 arquivos:

Requisições JavaScript feitas com o plugin ativo.

Além da redução do tempo de carregamento também temos a redução de transferências de arquivos de 2.2mb para 1.2mb. Essa comparação mostra um dos benefícios de se trabalhar com a biblioteca. Mas antes de sair ativando o plugin precisamos entender como ele funciona.

O plugin

Quando foi lançado em 2016, o AMP teve seu primeiro plugin criado por uma parceria entro Google e Automattic, o plugin era bem experimental. Nessa época outros plugins criados pela comunidade ofereciam muito mais recursos. Por muito tempo utilizei plugins criados pela comunidade.

Em 2019, visitando o stand do Google no WordCamp Europe tive a possibilidade de ver o trabalho feito pelo Google para reativar o plugin do AMP. Era visível nos últimos 2 anos uma movimentação do Google para contribuir com a comunidade WP.

Nessa época decidi baixar o plugin novamente para realizar testes: https://wordpress.org/plugins/amp/

Página principal do plugin do AMP

Depois dos primeiros testes vi que as melhorias eram significativas comparado a última vez que tinha o utilizado o plugin. Os testes foram realizados utilizando o modo Padrão. Para entender mais o Plugin AMP funciona ele possui três modos:

  • Leitor(2016): Onde o usuário tem uma versão mais simples todas as páginas amp serão redirecionadas para uma nova url com /amp no final e o plugin irá gerenciar todos os erros de validação.
  • Transição: O plugin delega ao administrador do conteúdo a escolha de quais as páginas serão exibidas como AMP e não-AMP. O visual segue o mesmo visual do seu tema WordPress.
  • Padrão: Nessa modo sua aplicação irá tornar full AMP. Onde todo o conteúdo da sua aplicação irá utilizar somente em uma versão AMP.

Após ativar o plugin, acessamos no menu lateral do painel de controle da sua aplicação WordPress você irá encontrar a opção AMP.

Acessando o painel do plugin iremos ver as seguinte opções:

tela principal do plugin AMP

Inicialmente temos um banner de boas vindas, em seguida temos duas opções de experiência AMP website e AMP Stories.

  • AMP Website: irá habilitar AMP em sua aplicação, após a seleção dessa opção temos a opção de escolher qual template iremos utilizar
  • AMP Stories: vou dedicar um post para essa sessão mas uma breve introdução stories foi incluído recentemente na plataforma com ele temos a opção de adicionar chamadas aos nossos posts com animações. Caso queira saber mais confira a documentação oficial do AMP Stories.
painel com opções de templates

Como havia mencionado anteriormente, na tela principal do plugin temos a opção de selecionar os templates que iremos utilizar em nossa aplicação. Caso escolha o modo leitor, as páginas e posts que utilizam AMP terão as páginas corrigidas para AMP, automaticamente. É a versão que não requer nenhuma ação por parte do administrador mas sua experiência é bem simple.

Validação de conteúdo AMP

As versões de Transição e Padrão precisam de uma ação do administrador para obter um conteúdo válido AMP. Porque essas versões tentarão ser idêntica a versão não AMP. Para isso o processo de validação precisa ser direcionado pelo administrador da aplicação.

Mas qual a importância de ter um conteúdo válido AMP? Primeiro por uma questão de boas práticas manter a qualidade do código de sua aplicação e Segundo todo conteúdo válido pode fazer uso do AMP Cache.

AMP Cache é recurso disponibilizado por motores de busca como Google e Bing que melhora ainda mais a performance da sua aplicação os resultados vindo dos motores de busca serão servidos pelo AMP cache.

Primeiro item para obter o conteúdo AMP válido é ter um tema compatível, no meu caso que utilizo o Twenty Twenty não precisei realizar nenhuma alteração em meu tema. Segundo passo foi resolver os problemas de compatibilidade com plugins.

Podemos fazer a validação por dois caminhos por índice de erros ou por página. No meu caso não utilizo muitos plugins, apenas um plugin para exibir os códigos dos tutoriais no meu blog, o plugin não era compatível com AMP assim causando problemas de validação, como podemos ver na imagem abaixo:

lista de erros de validação AMP

A solução foi simples navegando na lista de plugins compatíveis achei uma alternativa para esse plugin:

Substitui pelo plugin Syntax-hightlighting Code block e resolvi o problema referentes a plugin. Caso isso não seja possível você pode desabilitar as partes que causam problemas e verificar como o plugin se comporta. Segunda opção é utilizar componentes AMP para substituir plugins posso fazer outro post sobre o assunto, caso tenha interesse.

Analytics

Outro ponto crucial é a para de monitoramento da sua aplicação, caso não utilize nenhum plugin de tracking o plugin disponibiliza uma área para você adicionar o código do analytics com AMP código possui um formato diferente ele trabalha com um formato JSON:

{
    "vars": {
        "account": "UA-doseusite-1"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

Na sessão do analytics do plugin do AMP você terá mais informações de como adicionar o código analytics mas o formato acima é o esperado no caso da propriedade account deve ser passado o código UA so seu analytics.

Caso não queira se preocupar como código uma alternativa para conectar seu plugin AMP para WordPress com Google Analytics é a utilização do plugin SiteKit, ele sincroniza todos os serviços de tracking:

Plugin site kit by Google

Essa é uma breve intro sobre o plugin do AMP para WordPress em meu canal do Youtube também gravei sobre o assunto:

intro sobre AMP

Caso queira saber mais sobre AMP tenho um curso de desenvolvimento de aplicações AMP em meu canal. E aqui no blog também tenho uma página dedicada sobre o assunto.

Categorias
WordPress

Por que instalar um plugin de cache WordPress nem sempre resolve o seu problema.

Um dos assuntos mais populares no Youtube são os vídeos que ensinam como deixar o seu site WordPress “rápido”. Muitas vezes a ação se resume a instalar um plugin de cache WordPress. Essa é uma solução super simples que ajuda muita gente mas…

Qual é o problema com plugins de cache?

Não existe nenhum problema eles só criam um falso positivo. Não vou falar de um plugin específico, mas plugins de cache 99% trabalham dois pontos cache no browser e cache no servidor. Ambos demandam atenção mas para esse post vamos falar sobre:

Cache de assets no Browser

O cache de arquivos estáticos no browser é algo já utilizado desde os primórdios da web e continua muito útil. Ele funciona da seguinte forma quando o usuário acessa nossa aplicação a primeira vez uma lista de arquivos são armazenados no cache para quando o usuário retornar para sua aplicação não precisa ir na rede requisitar esses arquivos novamente, assim criando a sensação do carregamento rápido.

Esse carregamento “Rápido” cria uma falsa ilusão que está tudo bem, vamos pegar um exemplo um dos vídeos que assisti tem um site de uma imobiliária, a homepage carrega 5.1 megabytes, testando em uma conexão de fibra página carrega a primeira vez em 10 segundos sem o cache. Com o cache habilitado 5 segundos. Maravilha uma redução de 50% que é verdade.

Mas temos dois problemas:

  • Primeiro minha conexão é 5o mbps não é uma conexão média para os usuários, no Brasil a conexão média gira em torne de 6,8mbps mas particularmente não acredito nessa média, quando testamos simulando uma conexão 3G lenta esse tempo de carregamento vai para mais 60 segundos.
  • O segundo problema o cache funciona quando usuário retorna a nossa aplicação e você acha que um usuário que carregou o seu site em mais de 60 segundos irá retornar?

Vale apenas lembrar que um site de 5.1mb não é um problema do plugin de cache WordPress. Baseado nesse exemplo que é muito comum na maioria das aplicações web, vou falar de alguns items que demandam atenção para melhoria da performance da sua aplicação web. Vou tentar entrar nesses assuntos de forma não muito técnica porque esse é um assunto válido para todos os tipos de usuários.

Imagens

Como vimos no exemplo anterior o site utilizado no teste, dos 5.1 megabytes 4.5 megabytes são imagens isso representa 88% do tamanho total da aplicação. Estudos apontam que na média imagens representam 80% do tamanho total da aplicação. Muito comum encontrar aplicações WordPress com thumbnails de 300×300 em alta resolução e mais de 1mb. Antes de realizar o upload das imagens reduza a dimensão das imagens de acordo com a área que será exibida. WordPress também disponibiliza uma série de resoluções por padrão e você pode incluir tamanhos personalizados em seu tema.

Falando em optimização também temos uma série de ferramentas(aplicações web, desktop e plugins) que reduzem o tamanho da imagem sem comprometer a resolução, mas temos um bom exemplo que é a Progressive web app squoosh com essas ferramentas conseguimos ter uma redução de mais de 60% sem alterar o formato e a resolução das imagens.

Tela inicial do squoosh

Squoosh é uma aplicação web você não precisa baixar nenhum software para utilizar a ferramenta. Como podemos ver na imagem a segui, podemos ter antes e depois da imagem, assim conseguimos ter preview de como a imagem irá ficar após as alterações.

Tela de preview do squoosh

O ideal é que a otimização seja feita antes de realizar o upload das imagens, para não utilizar recursos do seu servidor para processamento de imagens.

Além disso temos uma variedades de formatos que são aplicadas para cada caso. Imagens sem transparência o ideal é a utilização de JPEG temos outros formatos que são ainda melhores que JPEG que é o caso do WEBP mas ainda não possui suporte para todos os browsers mas você consegue criar um fallback para esses casos.

Se você quiser ir além em otimização de imagens pesquise sobre:

  • Lazy loading
  • Imagens responsiva
  • CDN para imagens

Hospedagem

Fator decisivo na entrega do seu conteúdo é a hospedagem responsável por administrar uma série de serviços que determinam a velocidade da sua aplicação, por exemplo, especificações dos servidores, processamento e memória, dedicado ou compartilhado. Além do fator importante chamado: suporte, se algo der errado e caso você não domine devops como 99% da população global você precisará uma ação eficiente do suporte de sua hospedagem. Isso pode ser crucial para reparar danos de um eventual problema.

Caso você um perfil mais técnico minha sugestão é ir para Cloud e ter um maior controle dos recursos de sua aplicação e muitas vezes sai mais barato a contratação de um serviço de Cloud gringo.

Versão do PHP

Ainda relacionado com a item hospedagem, a versão do PHP precisa ser levado em consideração antes de contratar o serviço, verifique qual a versão PHP que a hospedagem fornece, lançado em 2016 com uma série de melhorias o PHP 7 tinha uma melhora significativa para execução de requisições da sua aplicação por incrível que pareça algumas hospedagens ainda não fornecem a versão 7 ou superior.

Um estudo realizado pela empresa Kinsta mostra que o desempenho de aplicações WordPress utilizando PHP 7.4 é 300% superior a versão 5.6, enquanto a versão 5.6 executa 97.7 requisições por segundo a versão consegue executar 313.4 requisições por segundo.

Versão do mySQL

Vou falar especificamente de mySQL por que é um dos bancos mais populares entre as hospedagens. Banco de dados é um dos pilares de um CMS, ele é responsável por armazenar seus posts e retornar as consultas quando o usuário pesquisa uma palavra chave. Quando o número de posts atravessa a barreira dos mil posts isso fica mais visível. A última versão 8.0 em alguns tipos de operações como consulta a melhoria de desempenho pode chegar a 200%.

Eu comentei a barreira de 1000 post caso tenha um site popular onde consultas são realizadas com frequência e você consegue ver a lentidão dentro do admin isso significa que chegou a hora de utilizar o serviço para melhorar as consulta dentro do WP, não vou fazer propaganda mas você pode pesquisar sobre que irá achar uma série de serviços.

Outra alternativa ao mySQL é o mariaDB banco de dados que possui bons feedbacks da comunidade.

CDN

Comentando sobre o último item, CDN é um fator que otimiza a entrega de arquivos como imagens, css, javascript e fonts. Esse serviço aumenta o valor de sua hospedagem mas alguns plugins e serviços dentro da plataforma WordPress fornecem esse serviço com um valor atrativo.

Como a CDN ou Content Delivery Network funciona? É um sistema otimizado de entrega de conteúdo, seus arquivos serão distribuídos entre servidores ao redor de mundo e quando o usuário requisitar esses arquivos eles serão entregues pelos servidores mais próximos. Além disso CDN podem oferecer funcionalidades como compressão de arquivos.

Compressão de arquivos

Um dos dos algoritmos de compressão mais utilizado é gzip ele tem a capacidade de comprimir e descomprimir arquivos rapidamente, assim reduzindo a taxa de transferencia de arquivos em alguns casos a redução do tamanho dos arquivos pode chegar a 72%, alguns plugins disponibilizam esse recurso. Mas isso pode impactar no uso de CPU dependendo da implementação porque existem diversas formas de implementar gzip, antes de habilitar esse recurso em produção teste o seu plugin de cache WordPress.

Minificação de arquivos.

Minificação é um recursos simples que pode reduzir bastante o tamanho dos seus arquivos de texto: JavaScript, CSS e HTML. Esse é um recurso básico em um plugin de cache WordPress, sempre deixe ele habilitado. Só tenha cuidado alguns plugins realizam uma minificação bem agressiva e podem quebrar o seu tema, então realize teste em diferentes páginas antes de utilizar esse recurso.

Conclusão

Existe uma série de outros recursos que otimizam o desempenho de sua aplicação, mas esse itens listados são baseados na minha experiência. Mas o ponto que quero mostrar é: Plugin de cache WordPress ajudam bastante mas somente a sua instalação não irão resolver todos os seus problemas relacionados a performance.

Performance é um trabalho amplo que nunca tem um ponto final, sempre fique acompanhando as métricas da sua aplicação e analisando os pontos em que você pode melhorar. Se gostou deste assunto dê uma conferida na categoria WordPress no blog e deixe o comentário caso queira saber mais e até o próximo post.

Categorias
Tutoriais WordPress

Criando páginas single para cada categoria (Single templates) no WordPress – 2019

Esse post originalmente era de 2011, dei uma atualizada no conteúdo com alguns novos recursos e correções. Trabalhando com WordPress você tem um arquivo para cada situação específica, por exemplo, o arquivo responsável pela página de categoria é o arquivo category.php, ou page.php para uma página, ou 404.php quando o conteúdo não for encontrado, assim como para página single.

Quando tratamos de post o arquivo mais específico é o single.php, por que o mais específico? Caso o single.php não exista o index.php será responsável por exibir o conteúdo da single ou o mais novo arquivo de template singular.php ele foi introduzido na versão 4.3 do WordPress para exibir o conteúdo de um post ou uma página. A imagem abaixo representa a ordem de carregamento:

Mas além dessas opções também podemos criar uma arquivo para a single de cada categoria, mas isso só é possível com trabalhando com três métodos diferentes: trabalhando com filtros , trabalhando com plugin ou trabalhando com condicional tags.

Carregando diferentes templates com add_filter

A primeira forma é adicionando um filtro para isso devemos adicionar-lo dentro do functions.php, o código ficará da seguinte forma:

add_filter('single_template', 'create_single_template');

function create_single_template( $template ) {
	global $post;

	$categories = get_the_category();
	// caso não tenhamos categoria retornamos o template default.
	if ( ! $categories )
			return $template; 

	//resgatando o post type
	$post_type = get_post_type( $post->ID );

	$templates = array();

	foreach ( $categories as $category ) {
			// adicionando templates por id e slug
			$templates[] = "single-{$post_type}-{$category->slug}.php";
			$templates[] = "single-{$post_type}-{$category->term_id}.php";
	}

	// adicionando os templates padrões
	$templates[] = "single-{$post_type}.php";
	$templates[] = 'single.php';
	$templates[] = 'singular.php';
	$templates[] = 'index.php';

	return locate_template( $templates );
}

Explicando código acima, aplicamos um filtro quando o WordPress chama o template para exibir um post, esse código é maior que a versão anterior desse post(2011), por duas razões continuamos retornando uma comportamento padrão e segundo realizamos um tratamento para não sobrescrever a single de um post type, exemplo, caso tenhamos uma categoria filme e um post type filme não termos conflito pois a single da categoria ‘filmes’ será single-post-filmes.php e a single do post type ‘filmes’ será single-filmes.php.

Carregando diferentes templates com Plugin

Alterar functions.php de forma errada pode afetar o funcionamento do todo o seu tema, para evitar problemas caso não domine muito programação a segunda forma é utilizando plugin, ainda sim você precisará de noções de programação para criar o novo template a diferença que qualquer erro afetará somente a página single que você estará criando.

Temos várias opções de plugins os passos serão bem parecidos, vou listar o plugin com atualizações mais recentes o Custom Post Template By Templatic:

  1. Baixe o plugin e instale o plugin em sua aplicação.
  2. Ative o plugin
  3. Crie um novo template para sua página single com um comentário no início do seu arquivo:
<?php
/*
PostType Page Template: [Nome para descrever seu template]
Description: [Essa parte é opcional]
*/
?>

Esse comportamento é bem parecido como template pages, nesse caso o nome do arquivo é irrelevante pode ser qualquer um. Feito isso se tudo ocorrer bem um dropdown irá aparecer na sua página de edição de posts para selecionar o template desejado.

A terceira forma é trabalhando com tags condicionais, elas são funções que funcionam como perguntas lógicas que retornam true ou false, para nossa solução iremos trabalhar com “in_category()”, para o nosso código não ficar extenso podemos dentro de nosso loop utilizar get_template_part como no exemplo abaixo: 

// dentro do loop
if ( in_category( 'filmes' ) ) {
	get_template_part( 'template-parts/content', 'filmes' );
} else {
	get_template_part( 'template-parts/content', 'post' );
}

O código acima inserimos dentro de nosso single.php não criamos um template novo para toda nossa single e sim um pequeno bloco que será incluído pela função get_template_part, caso o post seja da categoria “filmes” ele ira buscar dentro da pasta template-parts o arquivo “content-filmes.php” nele você irá realizar a customização que você deseja, caso contrário carregamos o arquivo content-post.php um trecho genérico para outras categorias.

Mais infos sobre conditional tags : http://codex.wordpress.org/Conditional_Tags

Qualquer dúvida só deixar um comentário para mais tutoriais sobre WordPress acesse a página da categoria Até o próximo post pessoal!

Categorias
Eventos Geral WordPress

Work smart with Gutenberg

Hi folks, last weekend I’ve done my first talk in 2019, at WordCamp Prague it was a pleasure to be again in Prague, one of my favourite city in Europe and my presentation it was about Gutenberg, I have created a small project with a few examples using static blocks, editable and dynamic blocks, follow the slides:

[slideshare id=134127640&doc=worksmartwithgutenberg-190302142811]

The repository with the examples from my presentation you can find here: https://github.com/fellyph/digital-agency-block-kit

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!