Vamos come\u00e7ar com o b\u00e1sico absoluto. Quais linguagens de programa\u00e7\u00e3o e ferramentas voc\u00ea precisaria usar ou aprender para desenvolver melhor para o Gutenberg?<\/p>\n
A linguagem e as bibliotecas que voc\u00ea precisa conhecer<\/h2>\n
A resposta curta para qual linguagem voc\u00ea precisa usar para desenvolver para Gutenberg \u00e9: Javascript. No entanto, no mundo do Javascript, existem alguns conceitos, extens\u00f5es e ferramentas que voc\u00ea deve conhecer.<\/p>\n
Em primeiro lugar, h\u00e1 uma quest\u00e3o de vers\u00e3o Javascript. Existe uma padroniza\u00e7\u00e3o oficial do Javascript; ECMAScript. O ECMAScript 5 (muitas vezes abreviado para ES5<\/strong>) foi lan\u00e7ado h\u00e1 cerca de 10 anos e \u00e9 a vers\u00e3o Javascript com a qual a maioria dos desenvolvedores est\u00e1 familiarizada. Depois temos o ECMAScript 6 (muitas vezes abreviado para ES6<\/strong>) que saiu em 2015. Algumas pessoas se referem a esta vers\u00e3o como ES2015. E finalmente h\u00e1 ESNext<\/strong>, que \u00e9 um nome din\u00e2mico que cobre a pr\u00f3xima vers\u00e3o, contendo propostas que esperamos que sejam inclu\u00eddas em qualquer pr\u00f3xima vers\u00e3o padronizada do Javascript.<\/p>\n Voc\u00ea pode estar pensando como “ent\u00e3o tudo bem e tudo mais, vers\u00f5es mais recentes do Javascript significam apenas mais recursos. Ent\u00e3o, vou usar apenas o mais novo." Mas h\u00e1 uma coisa muito importante que voc\u00ea precisa saber sobre as vers\u00f5es de Javascript e \u00e9 isso: a maioria dos navegadores hoje s\u00f3 pode entender ES5.<\/p>\n Isso significa que se voc\u00ea deseja escrever Javascript em ES6 ou ESNext, voc\u00ea precisa configurar ferramentas que transformem seu c\u00f3digo em ES5 para que os navegadores possam entend\u00ea-lo. Mas antes de come\u00e7ar a pensar em pular o aprendizado do ES6 e do ESNext, lembre-se de que o ES5 tem 10 anos. E isso exigir\u00e1 que voc\u00ea escreva muito mais c\u00f3digo. Tamb\u00e9m ser\u00e1 muito menos leg\u00edvel e mais complexo do que se voc\u00ea o escrevesse em ES6 ou ESNext.<\/p>\n Al\u00e9m disso, para os conceitos de Gutenberg, voc\u00ea tamb\u00e9m deseja usar JSX<\/strong> \u2013 uma extens\u00e3o de sintaxe para Javascript. JSX tamb\u00e9m \u00e9 uma linguagem que os navegadores n\u00e3o podem entender sem transform\u00e1-la.<\/p>\n Se voc\u00ea ainda n\u00e3o est\u00e1 convencido de que o ES6\/ESNext vale o passo extra para transform\u00e1-lo, deixe-me mostrar uma compara\u00e7\u00e3o de c\u00f3digo. Com ES6 e JSX voc\u00ea pode escrever isso para retornar um par\u00e1grafo simples; com uma classe e sa\u00edda din\u00e2mica de uma vari\u00e1vel;<\/p>\n Para aqueles de voc\u00eas que s\u00e3o novos nisso e acham que esqueci as cita\u00e7\u00f5es \u2013 n\u00e3o, n\u00e3o esqueci. Esta \u00e9 a simplicidade do JSX. Vamos comparar o acima com como voc\u00ea escreveria com as bibliotecas Javascript do ES5 e do WordPress:<\/p>\n Todo o c\u00f3digo acima \u00e9 necess\u00e1rio para produzir o que o ES6 e o \u200b\u200bJSX podem fazer em uma linha singular muito f\u00e1cil de ler! Imagine construir uma interface do usu\u00e1rio mais complexa com eventos e condicionais, quando apenas um par\u00e1grafo simples requer esse peda\u00e7o de c\u00f3digo complicado.<\/p>\n Convencido? Bom!<\/p>\n A ferramenta mais comum, e a que o WordPress usa, para transformar o ES6\/ESNext \u00e9 o Babel<\/a>. Normalmente voc\u00ea usaria o Babel como um plugin para o Webpack<\/a>, que \u00e9 uma ferramenta que agrupa e reduz seus arquivos Javascript. Ambas as ferramentas est\u00e3o usando Node.js<\/a>, que fornece algumas ferramentas para executar scripts para Webpack e Babel na linha de comando. Se isso parece confuso, tenho um post que explica em profundidade como configurar todas essas ferramentas para o<\/a> desenvolvimento do Gutenberg.<\/p>\n A segunda coisa que voc\u00ea precisa saber sobre tecnologias \u00e9 que o Gutenberg \u00e9 baseado em uma camada de abstra\u00e7\u00e3o em cima do React JS<\/strong>. O React JS<\/a> \u00e9 uma biblioteca Javascript de c\u00f3digo aberto mantida pelo Facebook e foi lan\u00e7ada por volta do ano de 2013. Como o React j\u00e1 existe h\u00e1 algum tempo, h\u00e1 muitos tutoriais, guias e documenta\u00e7\u00e3o para essa biblioteca. O site oficial do React tem um tutorial<\/a> bom e detalhado para voc\u00ea que \u00e9 novo no React. Voc\u00ea definitivamente n\u00e3o precisa ser um especialista em React para desenvolver para Gutenberg, mas o b\u00e1sico de como ele funciona com componentes e estados o ajudar\u00e1 muito a entender o Gutenberg.<\/p>\n Um dos maiores benef\u00edcios do Gutenberg \u00e9 se afastar do HTML fixo no conte\u00fado do post. O WordPress, antes do Gutenberg, e a maioria dos CMSs baseados na web armazenam o conte\u00fado do artigo em HTML puro. Isso geralmente n\u00e3o \u00e9 um problema com conte\u00fado simples (t\u00edtulos e par\u00e1grafos). Mas pode ser um problema maior com conte\u00fado rico mais complexo e din\u00e2mico.<\/p>\n Qualquer CMS que permita conte\u00fado din\u00e2mico no conte\u00fado do artigo encontrar\u00e1 problemas em como salv\u00e1-lo como HTML v\u00e1lido. Pode ser qualquer coisa, desde uma imagem que se refira ao seu ID no sistema, em vez do URL completo. Ou um widget que exibe dinamicamente as postagens mais recentes em uma determinada categoria. Normalmente, isso ser\u00e1 resolvido com a sa\u00edda de HTML enigm\u00e1tico personalizado que n\u00e3o faz sentido ser gerado normalmente. E ent\u00e3o deixe o analisador CMS lidar com a transforma\u00e7\u00e3o dessas partes HTML em algo significativo ou din\u00e2mico. A desvantagem disso \u00e9 que, se voc\u00ea transferir seu conte\u00fado para outro CMS, muitas vezes resultar\u00e1 em HTML feio. O conte\u00fado seria preenchido com HTML n\u00e3o analisado que voc\u00ea precisa limpar manualmente. Esta quest\u00e3o \u00e9 o que Gutenberg pretende resolver.<\/p>\n Com o Gutenberg, o WordPress optou por salvar informa\u00e7\u00f5es adicionais e din\u00e2micas como coment\u00e1rios HTML. Os coment\u00e1rios em HTML nunca s\u00e3o vis\u00edveis para os usu\u00e1rios no site e basicamente tudo \u00e9 permitido dentro do bloco de coment\u00e1rios. Um coment\u00e1rio HTML come\u00e7a N\u00e3o vou entrar em detalhes sobre como os blocos de coment\u00e1rios s\u00e3o estruturados \u2013 voc\u00ea encontrar\u00e1 um guia detalhado<\/a> sobre isso no WordPress Editor Handbook. Mas como exemplo, um par\u00e1grafo simples no conte\u00fado do post do Gutenberg ser\u00e1 salvo no banco de dados como:<\/p>\n Quanto ao conte\u00fado din\u00e2mico, geralmente nenhum HTML ser\u00e1 gerado. Todas as informa\u00e7\u00f5es que o WordPress precisa para entender o que esse bloco est\u00e1 fazendo, s\u00e3o encontradas nos coment\u00e1rios HTML. \u00c9 assim que o Gutenberg armazena um bloco de “\u00daltimos posts":<\/p>\n Como tudo \u00e9 um coment\u00e1rio HTML, transferir suas postagens para outro WordPress sem Gutenberg ou outro CMS garantir\u00e1 que nenhum HTML feio n\u00e3o analisado seja cuspido. Ele ser\u00e1 simplesmente ignorado e ignorado.<\/p>\n Como voc\u00ea provavelmente j\u00e1 percebeu \u00e9 que os blocos de coment\u00e1rios come\u00e7am com o nome do bloco, prefixado com ‘ \u00datil saber:<\/strong> Voc\u00ea tem algumas op\u00e7\u00f5es para personalizar seus temas ou plugins para o Gutenberg. Abaixo est\u00e3o listadas as personaliza\u00e7\u00f5es mais comuns que voc\u00ea provavelmente faria como desenvolvedor.<\/p>\n O WordPress Gutenberg vem com um grande pacote de tipos de blocos e voc\u00ea pode estender qualquer um deles. Voc\u00ea tamb\u00e9m pode remover alguns deles ou decidir, em determinados casos, permitir ou remover apenas alguns deles.<\/p>\n O m\u00e9todo mais comum de estender um bloco \u00e9 adicionar estilos de bloco personalizados<\/a> \u2013 que s\u00e3o varia\u00e7\u00f5es de estilo de um bloco. Estilos de bloco n\u00e3o s\u00e3o t\u00e3o comuns no WordPress padr\u00e3o, mas existem alguns. D\u00ea uma olhada no bloco Cita\u00e7\u00e3o. No editor Gutenberg, voc\u00ea ter\u00e1 uma caixa na barra lateral direita chamada “Estilos”.<\/p>\n Outra maneira de personalizar os blocos existentes \u00e9 usando filtros. Voc\u00ea provavelmente est\u00e1 familiarizado com filtros usando PHP no WordPress, mas com Gutenberg agora existem filtros baseados em Javascript em blocos<\/a>. Por exemplo, voc\u00ea pode adicionar seus pr\u00f3prios atributos personalizados (configura\u00e7\u00f5es) a todos ou tipos espec\u00edficos de blocos ou filtrar como eles s\u00e3o salvos ou emitidos.<\/p>\n Voc\u00ea tamb\u00e9m pode manipular as categorias de blocos, al\u00e9m de remover ou permitir determinados blocos em determinadas situa\u00e7\u00f5es. Ou voc\u00ea pode, por exemplo, garantir que apenas alguns tipos de bloco sejam permitidos para um tipo de postagem personalizado.<\/p>\n Criar blocos personalizados \u00e9 talvez o primeiro pensamento que a maioria dos desenvolvedores do WordPress tem. Os blocos padr\u00e3o no WordPress podem percorrer um longo caminho, mas se voc\u00ea estiver criando um tema ou plugin mais complexo, provavelmente ter\u00e1 necessidades espec\u00edficas. Por exemplo, usando Gutenberg para criar uma p\u00e1gina inicial bonita com atalhos para conte\u00fado e conte\u00fado din\u00e2mico. \u00c9 poss\u00edvel obter a maior personaliza\u00e7\u00e3o usando a op\u00e7\u00e3o de classe CSS que existe para todos os blocos. Mas isso n\u00e3o \u00e9 particularmente amig\u00e1vel.<\/p>\n Escrever seus pr\u00f3prios blocos personalizados \u00e9 provavelmente o mais dif\u00edcil de personalizar seu tema ou plugin para o Gutenberg. Mas tamb\u00e9m pode ser o mais gratificante! Voc\u00ea n\u00e3o apenas ser\u00e1 capaz de criar blocos que tenham a apar\u00eancia exatamente como deseja \u2013 mas tamb\u00e9m \u00e9 uma \u00f3tima maneira de aprender rapidamente sobre a nova tecnologia baseada em Javascript.<\/p>\n Se voc\u00ea \u00e9 um desenvolvedor de temas do WordPress, deve estar ciente de que h\u00e1 uma boa quantidade de configura\u00e7\u00e3o que seu tema pode precisar para o Gutenberg, especialmente na forma de arquivos Como o WordPress padr\u00e3o lidar\u00e1 com a maioria dos estilos dos blocos padr\u00e3o, voc\u00ea n\u00e3o precisa se preocupar muito em estiliz\u00e1-los em seu tema. Mas os desenvolvedores de temas geralmente s\u00e3o mais exigentes quanto ao design e estilo. Portanto, voc\u00ea provavelmente precisar\u00e1 ajustar ou adicionar estilo de bloco. Voc\u00ea pode adicionar estilos de editor somente ao frontend, somente ao editor ou ambos. O Manual do WordPress Gutenberg fornece uma vis\u00e3o geral dos estilos do editor<\/a> e dos estilos de bloco padr\u00e3o.<\/p>\nEnt\u00e3o, por que se preocupar com ES6, ESNext ou JSX?<\/h3>\n
return <p className=\"example\">Hello, my name is {name}<\/p>;<\/code><\/pre>\nreturn wp.element.createElement(\n 'p',\n { className: 'example' },\n 'Hello, my name is ' + name\n);<\/code><\/pre>\nFerramentas de transforma\u00e7\u00e3o e React JS<\/h3>\n
![\"O](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153969-61e5175b816e1.png\")
<\/a><\/p>\nConcluir:<\/h3>\n
\n
A nova maneira de armazenar conte\u00fado de postagem e por que<\/h2>\n
<!--<\/code>e termina com --><\/code>, e o Gutenberg armazena dados em uma determinada estrutura com o formato JSON. Cada bloco no Gutenberg \u00e9 envolvido por um coment\u00e1rio HTML inicial e um coment\u00e1rio HTML final depois dele.<\/p>\nA nova maneira como o conte\u00fado da postagem \u00e9 armazenado<\/h3>\n
<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:latest-posts {\"categories\":\"17\",\"displayPostContent\":true,\"excerptLength\":30,\"postLayout\":\"grid\"} \/--><\/code><\/pre>\nwp<\/code>‘. Se houver alguma configura\u00e7\u00e3o personalizada, ela ser\u00e1 exibida ap\u00f3s o nome em JSON, como voc\u00ea pode ver no exemplo do bloco de postagens mais recentes. Gutenberg refere-se a isso como atributos, e esse conceito \u00e9 algo com o qual voc\u00ea se familiarizar\u00e1 quando come\u00e7ar a aprender a desenvolver para Gutenberg.<\/p>\n
\nSe voc\u00ea quiser uma vis\u00e3o mais profunda de como o novo conte\u00fado do post \u00e9 salvo, voc\u00ea pode procurar em sua wp_posts<\/code>tabela em seu banco de dados. H\u00e1 outro m\u00e9todo mais f\u00e1cil de espiar o valor completo do banco de dados, de dentro dos modelos do WordPress. Em seu \u00fanico modelo dentro do loop, simplesmente use ” echo get_the_content()<\/code>“. Usar o ” the_content()<\/code>” normal produzir\u00e1 o conte\u00fado do post analisado, mas ecoar o valor do conte\u00fado produzir\u00e1 exatamente o que est\u00e1 armazenado no banco de dados. Voc\u00ea pode usar a ferramenta Inspecionar ou visualizar a fonte no Chrome ou Firefox para ver os blocos de coment\u00e1rios.<\/p>\nO que voc\u00ea como desenvolvedor pode fazer em Gutenberg<\/h2>\n
Estenda e personalize blocos existentes<\/h3>\n
Crie seus pr\u00f3prios blocos personalizados<\/h3>\n
Certificando-se de que seu tema est\u00e1 pronto para Gutenberg<\/h3>\n
add_theme_support()<\/code>. O manual do WordPress tem uma boa vis\u00e3o geral<\/a> de todos os suportes de temas que voc\u00ea precisa considerar para tornar seu tema pronto para Gutenberg.<\/p>\n