DE{CODE}: Novos recursos para o Atlas

As atualizações das ferramentas de desenvolvimento sem cabeça Atlas do WP Engine ajudarão você a atender aos requisitos mais difíceis de seus clientes. Usando uma conta Sandbox gratuita, esta demonstração mostrará como adicionar esses novos recursos ao seu site headless. Confira o vídeo abaixo para começar a criar seu site seguro e com melhor desempenho!

Slides da Sessão

Transcrição de texto completo

KELLEN MACE : Olá. Sou Kellen, da equipe de relações com desenvolvedores da WP Engine. Nesta palestra, vamos explorar alguns dos novos e empolgantes recursos do ecossistema Atlas. Veremos como no portal do usuário do WP Engine, podemos criar um novo aplicativo Atlas e escolher este modelo de portfólio. Ao fazer isso, podemos obter um site WordPress sem cabeça completo ao vivo na Internet em questão de minutos.

Em seguida, veremos como podemos clonar esse projeto em nossa máquina local e configurá-lo para desenvolvimento local, para que possamos fazer personalizações em nosso novo site. Em seguida, voltaremos nossa atenção para o Atlas Content Modeler e veremos como podemos usá-lo para criar um novo modelo de conteúdo personalizado chamado Photos.

E este modelo de conteúdo de fotos terá alguns de seus próprios campos personalizados, incluindo um que é um campo repetível, que é um novo recurso que chegou recentemente ao Atlas Content Modeler. Então, finalmente, veremos como podemos fazer algum desenvolvimento personalizado em nosso aplicativo JavaScript front-end e consultar esses dados personalizados de fotos e, em seguida, renderizá-los na página.

Depois de criar uma conta do WP Engine e fazer login na página Atlas do portal do usuário, posso prosseguir e clicar no botão Criar um novo aplicativo. A partir daqui, podemos começar com um blueprint, que é um site pré-criado, ou extrair de um repositório existente. Vamos começar com um projeto. Agora podemos selecionar qual blueprint gostamos de usar. Portanto, escolheremos o blueprint Portfolio e, em seguida, clicaremos em Continuar.

O próximo passo é conectar este aplicativo ao GitHub. Então, clicaremos no botão para fazer isso e entraremos no GitHub. E depois disso, veremos esta tela, indicando que nosso aplicativo foi autorizado. Em seguida, precisamos realmente clonar este repositório. Então, clicaremos em Clone Blueprint e daremos um nome ao nosso novo repositório. E clique no botão para criar um novo repositório usando este modelo de blueprint.

Aqui você pode ver que este novo repositório de aplicativos foi criado na minha conta do GitHub. Agora precisamos vincular este repositório ao nosso aplicativo Atlas. Então, de volta ao portal do usuário, rolaremos para baixo até a seção Selected Repository. Se você permitiu o acesso a todos os seus repositórios, poderá vê-lo na lista. Caso contrário, você pode clicar em Gerenciar repositórios.

Nesta página, você poderá selecionar os repositórios que o Atlas poderá acessar. Então, vamos selecionar nosso repositório na lista. Clique em Salvar e agora, quando retornarmos ao painel do usuário, veremos o repositório que adicionamos aparecer na lista. Então vá em frente e selecione isso. Para uma região para nosso aplicativo, ficaremos com a região central dos EUA. E, finalmente, clique no botão para criar este aplicativo Atlas.

Aqui, veremos uma notificação de que nosso aplicativo está sendo criado. Então, daremos apenas um minuto. Agora que nosso aplicativo Atlas foi concluído, podemos seguir em frente e clicar neste link de URL do Atlas para ver nosso novo aplicativo Atlas sendo executado ao vivo na Internet. Então, na página inicial, veremos nossa lista de postagens mais recentes. Veremos nossos depoimentos.

Podemos ir até a página do portfólio e conferir uma lista de nossos projetos de portfólio aqui. Vou clicar em um projeto individual. Em seguida, vamos verificar o blog. Então vá até a página do blog e veja nossa grade de posts aqui. E também podemos clicar para ver uma página de postagem de blog individual. E pronto, pronto, clique, para voltar a nossa homepage.

Então você pode perceber que essas transições de página são muito rápidas. Temos um corte imediato de uma página para outra. E esse é um dos benefícios de usar uma arquitetura headless do WordPress. A seguir, vamos ver o site WordPress que está por trás das cenas, potencializando essa experiência. Então, vamos voltar ao portal do usuário do WP Engine e, a partir daqui, podemos clicar neste link para o ambiente WordPress vinculado.

Aqui podemos clicar em WP Admin para ser enviado ao administrador do WordPress para o nosso site. Então, aqui está nosso back-end alimentando essa experiência. Vamos para as postagens, e podemos ver aqui que ele foi pré-preenchido com várias postagens fictícias do blog. Então é daqui que vêm todos os dados para o nosso novo site. Vamos também dar uma olhada nos plugins. Aqui você pode ver que vários plugins foram instalados e ativados para permitir o desenvolvimento headless do WordPress.

Vamos prestar atenção especial ao Atlas Content Modeler. Então, na barra lateral, clicamos em Content Modeler. Você pode ver aqui que dois conteúdos personalizados foram criados para nós, projetos e depoimentos. E podemos vê-los aqui na barra lateral. Portanto, temos projetos, uma lista deles, bem como depoimentos e uma lista deles. Portanto, é daí que vêm os dados de projetos e depoimentos que vimos no site front-end.

Então, fizemos um grande progresso. Vimos como a partir do portal do usuário podemos criar um novo aplicativo Atlas. E quando fazemos isso, ele cria não apenas um aplicativo JavaScript front-end para servir as páginas do seu site, mas também cria o back-end WordPress que potencializa essa experiência e poupa o trabalho de vincular os dois. Ele conecta os dois para que o aplicativo front-end possa obter seus dados do back-end do WordPress.

A partir daí, pudemos dar uma olhada no aplicativo front-end e vê-lo rodando on-line ao vivo, bem como dar uma olhada no administrador do WordPress e ver alguns dos tipos de dados personalizados ou modelos de dados e também alguns dos dados fictícios que são foi criado para nós. Então, em muito pouco tempo, você pode ver que temos um aplicativo WordPress headless totalmente desenvolvido em execução agora.

E se neste ponto quisermos fazer mudanças? E se você estiver construindo um site de portfólio real e pensar consigo mesmo, isso é muito legal. Este é um grande avanço. Mas agora eu quero fazer algumas mudanças. Gostaria de fazer algumas alterações no código para talvez trocar algumas cores ou adicionar páginas adicionais ao meu site. Como faço isso? Como faço para começar com o desenvolvimento local? Vamos descobrir a seguir.

Para começar, copiaremos o link para nosso repositório do GitHub e executaremos git clone na linha de comando para clonar nosso projeto. A partir daqui, podemos CD no diretório do projeto e, em seguida, executar a instalação do NPM para instalar as dependências do nosso projeto. Feito isso, iremos em frente e abriremos o projeto em um editor de código.

Em seguida, precisamos configurar algumas variáveis ​​de ambiente. Então você verá que um arquivo de exemplo foi criado para nós aqui. E agora só precisamos garantir que isso tenha os valores corretos. Então, de volta ao portal do usuário, clicaremos em Gerenciar variáveis ​​e daremos uma olhada nas variáveis ​​de ambiente que o aplicativo de produção usa. Vá em frente e copie e cole ambos em nosso aplicativo para que nosso aplicativo local use as mesmas variáveis ​​de ambiente que a produção usa.

E o último passo aqui é renomear este arquivo, removendo .sample do final dele para que ele entre em vigor. Agora, o aplicativo front-end com o qual estamos trabalhando aqui é construído sobre Faust.js. E Faust, para fazer a mágica de busca de dados que faz, precisa ser capaz de executar o que é chamado de consulta de introspecção GraphQL.

Então, isso é basicamente Faust perguntando ao WordPress back-end, ei, quais dados você tem disponíveis no esquema GraphQL para eu consultar? Portanto, precisaremos habilitar a introspecção para que isso funcione. Vamos voltar para o administrador do WordPress aqui e ir para GraphQL e, em seguida, configurações na barra lateral.

Na página Configurações, rolaremos para baixo até onde vemos Ativar introspecção pública e clique nessa caixa. Já que estamos aqui, recomendo também ativar o Modo de depuração gráfica. Isso lhe dará mensagens de depuração mais descritivas aparecendo. Depois de fazer isso, podemos prosseguir e clicar no botão para salvar nossas alterações. E agora, finalmente, podemos abrir o terminal e executar a geração de execução do NPM. E então, uma vez feito isso, finalmente, NPM run dev para colocar nosso aplicativo em funcionamento localmente.

Agora, clicarei neste link localhost 3.000 e veremos que nosso site está realmente sendo executado localmente aqui. Então dissemos que queríamos adicionar algum conteúdo para personalizar nosso site. E agora que estamos preparados para o desenvolvimento local, podemos fazer exatamente isso. Então, digamos que, para este projeto, queremos não apenas postagens de blog e, em seguida, nossos poucos conteúdos personalizados que temos, como os projetos de portfólio que vimos e também esses depoimentos.

Além desse conteúdo personalizado, digamos que queremos adicionar ainda mais. Além de alguém que cria postagens de blog e projetos de portfólio, digamos que o cliente para o qual o site é também um fotógrafo e deseja apresentar as fotos que tirou. Como poderíamos adicionar um tipo de conteúdo personalizado ou um modelo de conteúdo personalizado ao nosso site para oferecer suporte aos dados desta foto, consultá-los e, em seguida, exibir as fotos em nosso aplicativo front-end? Vamos fazer isso a seguir.

Então, voltarei para o administrador do WordPress aqui e iremos para o Content Modeler. Já estivemos na tela uma vez antes. Demos uma olhada nos projetos e depoimentos. Podemos ver que esses são modelos de conteúdo personalizados que foram criados para nós como parte deste projeto. E posso clicar em cada um deles e ver que cada um desses modelos tem seu próprio conjunto de campos individuais.

Assim, os projetos, por exemplo, teriam esses campos individuais. E projetos e depoimentos são refletidos aqui na barra lateral. E então os campos para cada um deles. Se eu clicar em um projeto e, em seguida, clicar em um existente ou ir para Adicionar novo, de qualquer forma, veremos todos esses campos refletidos aqui. Assim, nossos criadores de conteúdo verão todos os campos necessários para inserir esses dados. Tudo bem.

No entanto, para nosso conteúdo personalizado, precisamos de um novo modelo. Vou prosseguir e criar um novo modelo clicando neste botão aqui. Então vou chamar essa foto. E para um nome no plural, vamos apenas colocar um S no final e chamá-lo de fotos. Este identificador de API gerado automaticamente– aqui, este ID– eu estou bem. A foto me parece boa. Para visibilidade da API, queremos ter certeza de clicar em público, pois queremos poder consultar esses dados via GraphQL. Para o ícone do nosso modelo, talvez algo como uma câmera seja apropriado para fotos. E agora clicarei em Criar.

Assim, nosso modelo de conteúdo de fotos foi criado. Então, neste ponto, ele diz para escolher seu primeiro campo para o modelo de conteúdo. E a partir desta gravação, esses são os tipos de campo suportados pelo Atlas Content Modeler. Para as fotos que queremos apresentar neste site, vamos usar algumas delas.

Digamos que vamos dar um título a cada uma das nossas fotos. Então, direi Título e, em seguida, chamo-o de Título da foto como o identificador da API. E é assim que estará disponível no esquema GraphQL. É para isso que serve. E diremos que queremos usar isso como o título da entrada. E texto de linha única é bom. Então vá em frente e clique em Criar.

Para nosso próximo campo, digamos que queremos capturar a própria imagem para a foto. Então eu vou bater o mais. E aqui, vamos criar um novo campo. Chamaremos esta imagem. E para o tipo, na verdade, precisaremos selecionar Mídia, pois será uma foto. Então, vou chamá-lo de imagem. E aqui embaixo, irei em frente e definirei isso como a imagem em destaque para cada postagem. Então, clicarei nele e também o tornaremos obrigatório. Então, sempre sabemos que estará lá. E então clique em Criar.

Ai está. Aí está o nosso segundo campo. Para o terceiro, vamos ter uma descrição. Então eu vou bater o mais. E para este, este será um campo de rich text. Então, diremos descrição e isso será suficiente para esse campo. E então nosso último que queremos é para os assuntos. Portanto, usaremos esse campo para capturar o que é mostrado na foto. Então, se for uma foto de uma cordilheira ao pôr do sol, por exemplo, como será uma de nossas fotos, alguns dos assuntos na foto podem ser montanhas, estrelas, céu, coisas assim. Apenas uma lista de coisas que estão presentes na foto.

Haveria diferentes maneiras de armazenar esses dados. Você pode criar uma taxonomia personalizada, por exemplo, e atribuir termos a cada uma dessas coisas. Então cada uma dessas fotos pode ter um ou mais termos. Essa seria uma maneira de fazer isso. Digamos que, para nossos propósitos, não estamos interessados ​​em poder agrupar fotos com base em algo como uma tag ou uma taxonomia.

Em vez disso, esta lista é realmente apenas para fins de exibição no site. O problema é que se apertarmos o sinal de mais aqui, nós o transformamos em um campo de texto, bem, então só pegamos um deles, certo? E se houver mais? Não sabemos de antemão quantos desses assuntos uma determinada foto pode ter, certo? E é aí que o recurso de campos repetíveis do ACM é realmente útil. Então, vamos ver o que isso parece.

Vou transformar isso em um campo de texto aqui e vamos nomeá-lo como assuntos. E então torne este campo repetível. Portanto, esta é a chave. Nós iremos em frente e clicaremos nele. E vamos mantê-lo como um campo de texto de linha única e clicar em Criar. Assim, nosso modelo de conteúdo fotográfico aqui foi criado. E podemos vê-lo na barra lateral.

Então, se eu clicar aqui em Fotos, veremos que tenho um fictício que criei antes aqui. Mas se criarmos Add New, você verá que isso reflete– os campos aqui refletem o que adicionamos no modelo de conteúdo. Assim, ganhamos um título. Temos a oportunidade de anexar uma imagem. Temos um campo rich text para a descrição da foto e um campo repetível aqui para adicionar um ou mais assuntos.

Então vamos ver o que podemos fazer aqui. Clicarei em Adicionar imagem em destaque. E eu vou escolher um da minha máquina. Vamos ver. E uma vez feito o upload, daremos a ele algum texto alternativo. Diremos, uma flor branca, assim, e pronto. Aí está a nossa imagem. Vamos voltar e dar um título agora, no entanto. Diremos flor branca com bokeh. Bem desse jeito. Para uma descrição, diremos que aqui está uma ótima foto de algumas lindas flores brancas. Bem desse jeito.

E agora, para nossos assuntos, podemos nos perguntar: o que está presente na foto aqui? E talvez possamos… a flor pode ser uma. Clique em Adicionar item. E aquele efeito bokeh, com o fundo desfocado, também está lá. E o tronco ou galho da árvore, eu acho, estaria na foto, para outro exemplo. Então, vamos adicionar alguns deles aqui. E se acharmos que capturamos tudo, você pode ir em frente e clicar em Publicar. Então vamos lá.

E então, de volta às fotos, eu já havia criado esta. Montanhas são legais. Deve ser definido assim. Então você obtém uma foto da cordilheira. E então aqui está uma ótima foto de uma cordilheira com montanha, estrelas, sombras. Alguns assuntos que tem. Isso nos daria pelo menos algumas postagens para trabalhar em nosso aplicativo front-end.

Então, neste ponto, criamos nosso modelo de conteúdo no back-end do WordPress para armazenar os dados necessários para essas fotos e criamos duas novas postagens de fotos para usarmos para tentar consumir em nosso aplicativo front-end. E a seguir, você deve estar se perguntando, bem, como vamos extrair esses dados do WordPress para que possamos usá-los em nosso aplicativo front-end?

Há um recurso muito interessante que o Atlas Content Modeler mostra para tornar isso muito fácil. Então, voltarei ao Content Modeler aqui e encontrarei nosso modelo de fotos e clicarei no pequeno ícone de reticências aqui. E irei para Open in Graphical. Assim que eu clicar nele, ele comporá uma consulta para mim que inclui este modelo de conteúdo que criamos, fotos.

E ele pega os primeiros 10 deles e inclui este fragmento GraphQL abaixo que contém todos os campos que criamos, incluindo os personalizados. Então, se você perceber, adicionamos o título da foto, tínhamos nossa imagem, tínhamos a descrição e depois os assuntos. Portanto, isso é muito útil para ver como esses dados se parecem no esquema GraphQL. Então vá em frente e aperte este botão para executar esta consulta.

E você pode ver o que nosso aplicativo JavaScript front-end receberia se executasse exatamente essa mesma consulta GraphQL. Seria voltar fotos. E dentro disso haveria um objeto chamado array, chamado nós. E dentro dessa matriz haveria objetos parecidos com este. Cada uma dessas fotos teria um título, uma imagem e, mais abaixo, a descrição e os assuntos também.

Portanto, é exatamente disso que precisamos. Então, vamos fazer uso de vários desses campos agora. Então estamos prontos, em termos de back-end do WordPress e a capacidade de armazenar e também expor esses dados de fotos. Agora vamos ver como podemos usar isso em nosso aplicativo JavaScript front-end.

Então vamos voltar para lá. E acho que um bom ponto de partida para isso seria olhar a página Portfólio, que é uma lista de projetos, certo? Como essa é uma lista de postagens de modelo de conteúdo personalizado, e as fotos também, essas duas páginas têm muito em comum. Então, podemos usar isso como uma espécie de ponto de partida.

Então, clicarei em Portfólio aqui e apenas para nos lembrarmos de como ele se parece. E é assim que obtemos esta lista de projetos de portfólio. Então, vamos abrir o código agora e sujar um pouco as mãos. Vamos rastrear esta página, que é o projeto slash, e ver como isso é construído.

Então, dentro de Source, irei para Pages. E então eu vou encontrar o Project. Aí está. E abra o arquivo index.js dentro dele. Role um pouco para baixo e veremos que esse gancho de paginação de nó de uso está sendo usado. E este é um hook do React que vem deste local aqui, dentro da pasta Hooks. E dentro disso, estamos chamando query.projects.

E query.projects nos permitirá acessar dados sobre o tipo de postagem personalizada de nossos projetos, também conhecido como modelo de conteúdo de nosso projeto que criamos. Então, vamos chamar query.projects e, em seguida, passar alguns campos que queremos processar com antecedência, para que sejam assim que a página carregar. Então é isso que esse array é aqui. Portanto, esses campos estão lá no primeiro carregamento da página.

E quando estivermos realmente prontos para renderizar o conteúdo desta página, faremos isso. Temos um componente de SEO, um cabeçalho e um rodapé na parte inferior. E então a seção principal da página aqui está dentro desta tag principal, onde temos o cabeçalho, que é a seção azul sendo puxada. E então um wrapper div com nossa lista de projetos dentro disso. E também este componente Carregar mais, que resulta neste botão Carregar mais na parte inferior, no qual posso clicar. E então isso busca mais projetos e os coloca na interface do usuário.

Então é assim que essa página é construída. E como eu disse, gosto de usar isso como ponto de partida para nós. Então, vamos copiar todo o arquivo e imitar essa estrutura de arquivo aqui. Então, dentro de Pages, criaremos Photo. E dentro dessa pasta, criaremos um arquivo index.js. Tudo bem. E neste novo arquivo, vou colar o conteúdo. Mas vamos mudar algumas coisas, já que não estamos interessados ​​nos dados dos projetos para isso, queremos os dados das nossas fotos. Então vamos ver como podemos fazer isso.

Portanto, o nome dessa constante faz referência a projetos. Então, vamos em frente e renomeá-lo como uma primeira etapa. Podemos dizer que os nós de fotos pré-passam os campos. Então isso vai ser bom. Teremos que fornecer nossa própria lista de campos. Talvez deixemos o ID do banco de dados por enquanto e adicionaremos alguns em um momento.

Mais abaixo, vejamos. Foto pré-passagem. Oh, o nome ficou confuso. Aqui vamos nós. Então agora eles combinam novamente. Tudo bem. Em vez de query.projects, lembre-se, queremos query.photos para nosso tipo de conteúdo personalizado. Então vá em frente e atualize isso para ser fotos, ali mesmo. Role um pouco para baixo.

Portanto, este componente de projetos não será mais aplicado, pois não o estamos usando. Então, vou remover isso neste ponto e quanto a isso? Teremos apenas… teremos apenas H1. Diz Olá, apenas para obter algo renderizado na página aqui. E talvez possamos comentar muito mais também.

Então vou fazer uma busca por projeto para ver se tem algo que esqueci. Sim, apenas alguns comentários de código e, em seguida, este componente aqui que está sendo puxado e que não estamos mais usando. Então, vou deletar esse componente. E acho que devemos ser bons. Portanto, não estamos usando algumas dessas coisas neste momento, mas tudo bem. Faremos momentaneamente.

Vou salvar isso e veremos se conseguimos essa renderização. Agora, em nosso aplicativo front-end, devo conseguir navegar para Photo, assim. E lá vamos nós. Então aqui está nossa nova página. Ele diz olá e muito disso se parece com a página de projetos de portfólio, como o cabeçalho na parte superior e o rodapé.

Percebo que ainda diz portfólio e provavelmente queremos trocá-lo. Então, podemos fazer isso brevemente. Então aqui está o portfólio. Diremos fotos. E também neste local, vamos mudar isso para fotos. Salve isso. Aqui vamos nós. Isso atualizou o cabeçalho.

Agora vamos nos aprofundar em como podemos realmente usar esses dados, buscar os dados de nossas fotos e exibir uma lista aqui. Então, por onde começamos com isso? Como vimos no GraphQL– ou no admin do WordPress aqui, é assim que nossa consulta vai se parecer. Vai ter esses campos. Então vamos fazer isso. Portanto, o título da foto é o campo personalizado. Mas, na verdade, como definimos esse campo como o título da postagem, poderíamos usar apenas o título, pois será... o título da postagem será o mesmo que o campo personalizado com esse nome. Então, poderíamos apenas usar isso.

Portanto, nesta matriz, não apenas o ID do banco de dados, mas também o título de nossas fotos, imagem, descrição e assuntos. Então, vamos adicioná-los também. Imagem, descrição e depois assunto. Tudo bem. Você precisará de vírgulas no final. Aqui vamos nós. Então, acho que são todos os nossos campos que queremos ter disponíveis assim que a página terminar. Então isso parece bom para mim.

E vamos testar se podemos realmente obter alguma renderização de dados aqui. Então, sob o nosso Hello H1 que temos, vamos fazer isso. Faremos JSON.stringify e, em seguida, passaremos para esse algo. Então, vamos fazer dados aqui e ver se podemos obter a renderização de dados em nossa página.

Vou guardar isso e voltaremos ao nosso front-end. E aí está, com certeza. Então é assim que os dados se parecem. Você pode ver que estamos obtendo com sucesso de nosso back-end do WordPress. Temos essa matriz de nós e, dentro desses objetos, representando cada uma de nossas fotos individuais e exatamente os dados que solicitamos, incluindo cada um dos valores individuais para nosso campo de assuntos repetíveis aqui.

Então isso é ótimo. Isto é exatamente o que precisamos. Vamos deixar as coisas um pouco mais limpas - bem, muito mais limpas, eu acho, do que apenas cuspir dados na página como esta. Em vez de apenas essa pré-tag aqui, vamos mapear cada um dos nossos dados e renderizar um cartão na página para isso.

Então, uma coisa que gosto de fazer é antes de presumirmos que temos posts para renderizar, temos que levar em consideração o caso de que talvez não haja nenhum, certo? Então, uma coisa que gosto de fazer é no topo dos meus componentes, sempre tenho fotos, algo assim. E então eu faço data.nodes.length assim. E faremos um ponto de interrogação para encadeamento opcional, porque não sabemos se os dados ainda existirão.

E então vamos lançar isso para um booleano assim. Isso significa que, se falharmos neste ponto e os dados estiverem indefinidos, isso será convertido em falso. Diremos que não temos fotos para renderizar. Caso contrário, se formos capazes de detalhar todo o comprimento dessa matriz, será zero, se não houver postagens, ou uma ou mais. Portanto, se convertermos esse inteiro em um Booleano, ele nos dirá se temos fotos ou não. Então, se for zero, isso será falso. Se for um ou mais, havePhotos seria verdadeiro.

Com esse conhecimento, podemos tomar algumas decisões dentro do nosso componente aqui. Então, vamos descobrir como podemos fazer isso. Então, direi, se tivermos fotos, queremos renderizar uma coisa. Nós vamos dizer– vamos ver. Queremos fazer data.photos e depois mapeá-los. Então, para cada foto, renderizaremos algo.

Então, vamos apenas retornar algo fácil primeiro. Vamos devolver o– vamos ver. Vamos fazer um H2, que tal, já que vai ser como uma das nossas cartas. E então diremos photo.title assim. Tudo bem. Então, vamos mapear cada uma de nossas fotos. E para cada um deles, retornaremos um H2 com o título dessa foto. Tudo bem.

Então, tudo isso é o que queremos se realmente tivermos fotos para renderizar. Mas e a alternativa, se não o fizermos? Portanto, teremos nossa cláusula else aqui e renderizaremos outra coisa. Que tal o parágrafo. E diremos, sem fotos para exibir. Então agora, se salvarmos, lá vamos nós. Então, agora estamos obtendo nossos títulos de post renderizados aqui.

Então, vamos tornar este recurso um pouco mais completo aqui. Diremos que queremos devolver outra coisa. Tudo bem. E para cada um deles, copiarei apenas alguns estilos, alguns estilos embutidos que escrevi anteriormente aqui, apenas para nos poupar o tempo de digitá-los. Então eu vou ter esse div wrapper. E então, dentro disso, podemos restaurar nosso H2 que tínhamos. Então vou colar um H2 com o título.

Depois do título, que tal mostrarmos a descrição. Podemos fazer isso a seguir. Então será foto.descrição, assim. Mas não podemos renderizá-lo sozinho, como dentro de um contêiner, por exemplo, assim. Se tentarmos fazer isso, não funcionará muito bem para nós, porque o HTML não terá escape. Então, se eu salvar isso, você pode ver agora que temos o HTML de escape sendo mostrado na página, o que não é o que queremos.

Então o React tem um utilitário para trabalhar com HTML que é seguro e não precisa ser escapado assim. E isso é usar div e então perigosamenteSetInnerHTML assim. E você pode passar para ele um objeto onde uma propriedade é HTML de sublinhado duplo.

E então o valor que você passa para isso é o que você deseja renderizar sem escapar. Então, para nós, isso seria foto.descrição, simples assim. E então esse div pode ser auto-roupa. Tudo bem. Então agora vou dar uma salvadinha. Veremos o que conseguimos. Legal. Portanto, agora nosso HTML não está mais sendo escapado. Então parece bom para mim.

Então isso é ótimo. Que tal aquela imagem em destaque? O que poderíamos fazer é escrever isso do zero. Poderíamos pegar o URL da imagem em destaque e ter uma tag de imagem e passá-la como o URL. E então o navegador renderizaria uma imagem e a apontaria para essa fonte.

No entanto, este projeto, se você se aprofundar nesta base de código do blueprint, na verdade possui um componente pré-construído exatamente para esta finalidade, chamado imagem em destaque. Então, para nós, isso seria perfeito para usarmos. Então, vou rolar um pouco para onde estamos importando vários componentes diferentes de nosso diretório de componentes. E vou marcar uma no final aqui chamada imagem em destaque, assim. Agora podemos renderizar nossa imagem em destaque onde quisermos.

Logo abaixo de onde esta div está com a descrição da nossa foto, renderizaremos nossa imagem em destaque. E isso requer um suporte de imagem. E o que precisamos passar aqui é todo o nó dessa imagem. Então, para nós, seria photo.feauredimage.node, simples assim. E acho que isso deve funcionar para a nossa imagem. Então, vou salvá-lo e, com certeza, aqui vamos nós. Então, uma vez que nossa página é recarregada aqui, agora temos nosso título, nossa descrição e, em seguida, a própria foto sendo exibida. E da mesma forma, para a nossa próxima foto, essa imagem está sendo mostrada na lista.

Então isso é legal. Estamos fazendo um grande progresso. A última coisa foi cuidar do nosso campo repetível para os assuntos presentes na foto. Então, o que farei é criar um parágrafo aqui e fechá-lo. E então, dentro dessa tag de parágrafo, podemos abrir alguns cachos e fazer nossos mesmos photo.subjects. Mas agora vamos aderir ao final da junção. E diremos [INAUDÍVEL] que queremos juntá-lo por uma vírgula, espaço, assim mesmo. E eu vou dar um salve.

Quando nosso hot reload acontecer, devo conseguir rolar para baixo. E com certeza, lá vamos nós. Então eles estão sendo mostrados na lista. O usuário pode não ter certeza de quais são. Então, talvez em nosso aplicativo, possamos voltar e adicionar um rótulo de algum tipo, uma pequena coisa precedendo lá que diz Subjects talvez, assim. Assuntos flor, bokeh, ramo. E então nossa outra foto aqui tem assuntos de montanha, estrelas, sombras, só para dar um exemplo.

Então, vamos fazer uma pausa aqui, mas você pode ver como consegui montar esta página rapidamente. Acho que devemos nos livrar do nosso olá, mundo lá em cima. Não precisamos disso. Ou Olá palavra. Então eu vou remover isso. Aqui estamos. Então você pode ver, como eu estava dizendo, com que rapidez conseguimos montar isso.

Apenas baseando nosso código na página de lista de portfólio, fomos capazes de criar nossa página de lista de fotos aqui e, em seguida, mapear cada uma das fotos individuais e acessar os campos personalizados do Atlas Content Modeler - título, descrição, imagem, e então nossos campos repetíveis para o assunto aqui. Então, eu adoraria que você se sentisse fortalecido por isso em seus próprios projetos.

Se você quiser pegar um de nossos projetos como uma grande vantagem inicial que pode fazer muito do seu projeto para você, muito do trabalho braçal feito. A partir daí, você pode fazer algo parecido com o que fizemos nesta palestra. Você pode personalizá-lo ainda mais e adicionar suas próprias personalizações e outros modelos de conteúdo e assim por diante.

Muito obrigado por assistir. Espero que esta palestra tenha sido realmente útil e tenha dado a você uma boa noção de todos os ótimos recursos que foram lançados e continuarão a ser lançados no ecossistema Atlas.

APRESENTADOR: E isso é um encerramento para DE{CODE} 2022. Espero que você tenha achado inspirador e esteja saindo com mais experiência em WordPress e novas conexões com a comunidade. Fique de olho no conteúdo gravado no site a partir de sexta-feira para atualizar o que você pode ter perdido ou assistir a um vídeo novamente.

Quero deixar um agradecimento final aos nossos parceiros patrocinadores: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios e 10Up. Muito obrigado por doar para nossa campanha de arrecadação de fundos DE{CODE}. Nós realmente apreciamos sua generosidade.

Agora, para todos que interagiram conosco em nosso hub de participantes e em nossas sessões, escolheremos os três primeiros vencedores e informaremos como você pode reivindicar seu prêmio no final do DE{CODE}. Esperamos vê-lo novamente em nossos eventos futuros, pessoalmente ou virtualmente. Mal podemos esperar para trazer a você mais sobre as últimas tendências de desenvolvimento do WordPress e como você pode implementá-las para criar sites WordPress mais rapidamente.

Isso é tudo de mim. Muito obrigado por se juntar a nós, e cuide-se.