Como adicionar Dynamic Tag em Gutenberg

Tags dinâmicas permitem aplicar um valor dinâmico a argumentos específicos em um bloco estático existente. Esta função está atualmente disponível para uso com os seguintes blocos do WordPress – Parágrafo, Título, Botões e Capa. 

Agora você pode criar listagens que atendam às suas necessidades usando o editor de blocos e as tags de conteúdo dinâmico JetEngine .

Vamos descobrir como dar vida a todas as ideias desejadas. Por exemplo, vamos criar uma listagem de postagens usando tags de conteúdo dinâmico .

Abra JetEngine > Listagens e clique no botão “ Adicionar Novo ”. Preencha todos os campos obrigatórios.

• Fonte da listagem — escolha a fonte da listagem adicionada;
• Do tipo de postagem — selecione um tipo de postagem do qual o conteúdo será retirado. Podem ser não apenas as postagens padrão do WordPress, mas também os tipos de postagem personalizados ;
• Nome do item da listagem – digite o nome da listagem;
• Visualização de listagem – defina a opção “Blocos (Gutenberg)” para trabalhar com tags de conteúdo dinâmico suportadas por blocos.

Pressione o botão “ Criar item de listagem ” assim que todos os campos forem preenchidos.

Primeiramente, vamos verificar como a Tag de Conteúdo Dinâmico funciona com o bloco Capa.

Bloco de cobertura

Adicione o bloco Capa ao editor. O botão Tag de conteúdo dinâmico agora será colocado acima. 

Clique nele para ver que as opções “URL da imagem” e “Alt da imagem” agora estão disponíveis para personalização.

Escolha “URL da imagem” para a edição inicial. A primeira guia é chamada Fonte de dados . Nesse caso, há também o menu suspenso Fonte da imagem .

Escolha entre todas as fontes apresentadas de acordo com suas necessidades. 

Prossiga para a guia Contexto de dados . Ele permite que você selecione um objeto do qual os dados dinâmicos serão obtidos.

• Usuário Atual (global) — o usuário para quem a página foi adicionada;
• Usuário Atual (para escopo atual) — o usuário que está sendo processado;
• Usuário Consultado — o usuário que está logado ou que está indicado na URL;
• Autor da postagem atual — o usuário que é o autor da postagem aberta.

Lembre-se de que a aba Contexto de Dados está acessível para todos os blocos considerados para que as opções permaneçam as mesmas.

Vá para a opção “Image Alt”. A primeira aba também é Data Source , a mesma que observamos no bloco anterior. No entanto, as opções são diferentes agora.

• Propriedade do objeto atual — representa dados relacionados ao objeto atual;
• Dados personalizados — exibe os dados chamados pelas opções apresentadas;
• Função dinâmica — mostra valores calculados de acordo com a função definida.

Vamos começar com a “Propriedade do objeto atual”. Depois de selecionado, o menu suspenso Propriedade será exibido.

Você pode usar postagem, termo, usuário padrão e outras opções disponíveis. Por exemplo, atributos WooCommerce se você estiver construindo uma loja.

No entanto, vamos verificar a segunda opção apresentada no menu suspenso Fonte . Os dados personalizados ativam o menu suspenso Selecionar dados para mostrar .

As opções mostradas aqui são descritas detalhadamente na visão geral das macros .

A terceira fonte é apresentada através da “Função Dinâmica”. O primeiro menu suspenso que aparece é Function .

• Valor somado — exibe uma soma total dos valores do metacampo definidos;
• Valor médio — representa um valor médio de todos os valores de entrada;
• Contagem — calcula a quantidade de posts/termos/usuários que possuem o campo preenchido com dados;
• Valor máximo — representa o maior valor entre todas as opções;
• Valor mínimo — mostra o menor valor dentre as opções apresentadas;
• Resultados da consulta SQL – funciona com consulta SQL e descreve seus dados.

A lista suspensa a seguir é Data Source . Escolha entre Postagem, Termo e Meta do usuário.

O campo Data Context aparece se a opção “Post Meta” for escolhida. Digite o Nome do Campo . Este valor pode ser representado com a chave do metacampo concluída durante a criação do metacampo.

Avance para o menu suspenso Contexto de dados .

• Todas as postagens — os dados serão extraídos de todas as postagens;
• Postagens do mandato atual — as informações serão retiradas apenas da Taxonomia mais detalhada ;
• Postagens do usuário atual — os valores do metacampo serão recebidos das postagens do usuário atual;
• Postagens por usuário consultado — os dados serão retirados das postagens do usuário consultado;
• Postagens relacionadas para a postagem atual – os valores, neste caso, serão extraídos do conjunto Relation , o menu suspenso que é mostrado quando o contexto de dados descrito é selecionado.

O campo de seleção a seguir é Consulta por postagens com status e descreve todos os status de postagens disponíveis que podem ser consultados.

Indo para a próxima etapa, você pode selecionar Consulta por postagens com tipos .

Selecione entre os tipos de postagem do site. Recursos de diferentes plug-ins e tipos de postagem personalizados também serão exibidos nesta lista.

Depois que as opções anteriores do menu suspenso forem escolhidas, passe para os campos a seguir. Eles não serão vistos se você tiver escolhido a opção “Contagem” no menu de seleção de função .

• Ponto Decimal — define a marca do ponto decimal;
• Separador de milhares — escolha como será mostrado o separador de milhares;
• Contagem de Decimais — defina quantos números após a vírgula decimal serão exibidos.

A próxima guia é Contexto de dados . Já analisamos o mesmo anteriormente, então vamos para a guia Filtro de dados . Ele permite filtrar adicionalmente os dados dinâmicos.

Ative a alternância de saída do filtro, se necessário.

Quando ativado, a lista suspensa de retorno de chamada é exibida. É muito semelhante aos usados ​​​​no outro produto JetEngine, Dynamic Field . Você pode escolher entre várias opções. Leia mais sobre eles no artigo relacionado ao Dynamic Field, onde as mesmas opções são descritas.

Nossa listagem não estará completa sem outros dados vitais. O próximo bloco que adicionaremos é o Título.

Bloco de título

Após adicionar o bloco de título ao editor, clique no botão “ Campo de Conteúdo Dinâmico ” e selecione a única aba Conteúdo .

Já abordamos as personalizações exibidas, pois são semelhantes às do bloco de capa.

Escolha as opções desejadas e vá para o próximo bloco. Agora exploraremos como o bloco de parágrafo coopera com a tag de conteúdo dinâmico.

Bloco de parágrafo

Como você pode ver, depois de adicionar um bloco de parágrafo, as opções do campo de conteúdo dinâmico aqui parecem iguais às do bloco de título.

Crie a quantidade desejável de campos e escolha os valores necessários. Como criamos uma listagem CPT em nosso exemplo, a opção mais adequada para nós agora é mostrar a opção “metacampo JetEngine”. Sinta-se à vontade para usar os valores que você precisa.

Se você deseja adicionar outras informações estáticas ao bloco, digite os dados necessários antes/depois do valor “%%content%%”.

Depois de terminar todas as personalizações, passe para o bloco de botões, se necessário.

Bloco de botões

Adicione um bloco de botões. Ao clicar no ícone Dynamic Content Tag , você verá as guias Texto e URL . Suas opções de edição são iguais aos demais valores que podem ser mostrados com texto.

Digite informações extras antes/depois dos valores dinâmicos, se necessário.

Agora cobrimos todos os blocos que suportam Data Content Tag . Clique no botão “ Publicar ”.

Como exemplo, exibiremos a listagem criada na página editada por Gutenberg. Vá para Páginas > Adicionar novo .

Você pode exibir uma listagem com a Grade de listagem . Selecione a listagem que você acabou de criar.

Publique a página quando estiver pronta e verifique-a no front end.