O grande tutorial WordPress Gutenberg para desenvolvedor@s - cria os teus próprios blocos

Maddy Osman
11 min.
WordPress -Gutenberg-Tutorial-Developer

Gutenberg abre novas e interessantes possibilidades para ti enquanto desenvolvedor/a. Neste tutorial eu explico tudo o que precisas de saber sobre o editor de blocos. Aprende a criar os teus próprios blocos WordPress e a personalizar os blocos existentes.

Gutenberg é o editor que foi lançado com o WordPress 5.0. Gutenberg introduziu o conceito dos blocos WordPress. Isto permite que @s operador@s de sites coloquem elementos de design através de arrastar e largar (drag & drop) - sem a necessidade de um construtor de páginas externo ou conhecimentos de programação. 

Gutenberg será usado no futuro como base para a edição completa do site. No passado, era sempre necessário programar, mesmo que se usasse um construtor de páginas: Para algumas mudanças e ajustes o código era obrigatório.

A cada novo grande updatedo WordPress, torna-se claro que o conhecimento de PHP e o desenvolvimento tradicional de sites WordPress já não é suficiente. Como desenvolvedor/a WordPress, precisas de dominar Gutenberg.

Este tutorial inclui: 

  • O que é o Gutenberg
  • Como trabalhar com os blocos WordPress
  • Como utilizar estas novas funcionalidades e tecnologias para construir poderosos sites WordPress

Vamos mergulhar no tutorial WordPress Gutenberg para desenvolvedor@s!

O que é Gutenberg?

Gutenberg foi lançado pela primeira vez noWordPress 5.0 para facilitar a criação de publicações e páginas de uma forma puramente visual. Mas esta foi apenas a fase 1 do projeto.

Gutenberg conta com tecnologias modernas como JavaScript, React e REST API para criar uma experiência de edição dinâmica que imita a edição de front-end. Nesta primeira fase, foi lançado o Editor de Blocos

O que é o editor de blocos Gutenberg ?

Gutenberg substitui o editor TinyMCE (que é frequentemente referido como o editor clássico) e permite-te usar blocos de conteúdo para adicionar elementos como texto ou imagens às tuas publicações e páginas.

Com mais updates e com a fase 2, Gutenberg deve tornar-se um editor de sites completo. No futuro será possível criar sites WordPress inteiros com blocos.

WordPress -Gutenberg-Tutorial-Developer

Isto significa que qualquer pessoa que desenvolva sites WordPress deve redefinir o seu próprio fluxo de trabalho de desenvolvimento. O conhecimento de PHP já não é suficiente para construir um site WordPress a partir do zero. Precisas de saber JavaScript, React e REST API se quiseres criar blocos e elementos de design personalizados para sites baseados em Gutenberg. 

Introdução aos blocos WordPress

É emocionante embarcar nesta nova viagem com o Editor de Blocos Gutenberg. Com este tutorial, vais aprender tudo o que precisas de saber antes de começar com desenvolvimento Gutenberg e criar os teus próprios blocos WordPress.

O que precisas de saber antes de desenvolveres para Gutenberg 

A linguagem mais importante que precisas de saber para seguir este tutorial WordPress Gutenberg para desenvolvedor@s é Javascript. Mais especificamente, precisa de conhecer a versão ES5, que é suportada pela maioria dos navegadores modernos. 

As novas funcionalidades estão incluídas na versão de 2015, ES6, e na versão mais recente, ESNext. 

Entender ES6 e ESNext pode ser valioso. No entanto, se quiseres usá-los no teu desenvolvimento de blocos WordPress, precisas de saber como configurar ferramentas que convertam o teu código mais recente para ES5. 

WordPress -Gutenberg-Tutorial-Developer

Também precisas de conhecer JSX, que é uma extensão de sintaxe de Javascript e também requer uma transformação. Como ES6, ESNext e JSX são muito mais fáceis de escrever do que ES5, vale a pena o esforço para configurar ferramentas de transformação. 

WordPress -Gutenberg-Tutorial-Developer

Webpack, em conjunto com Babel, é uma ferramenta de transformação popular. Esta combinação de ferramentas minimiza o teu Javascript. 

WordPress -Gutenberg-Tutorial-Developer

Por último, mas não menos importante, conhecer React JS pode ajudar-te bastante quando crias os teus próprios blocos WordPress ou segues vários tutoriais WordPress para desenvolvedor@s que se concentram na personalização de blocos. 

O conteúdo é armazenado de forma diferente em Gutenberg 

Em contraste com o editor de conteúdo clássico, no Gutenberg o conteúdo é armazenado de forma diferente. O conteúdo já não é armazenado como HTML, mas como comentários HTML numa determinada estrutura com o formato JSON. Isto facilita a transferência de conteúdo para outra instalação WordPress ou para um sistema de gestão de conteúdo (CMS). 

Armazenar conteúdo no tradicional HTML é bom quando se trata de conteúdo simples e baseado em texto. No entanto, quando estás a lidar com conteúdo gerado dinamicamente, o teu código, infelizmente, fica confuso. 

Não precisas necessariamente de saber os detalhes técnicos de como os blocos WordPress funcionam. O que é importante é que quando crias conteúdo no Gutenberg, o HTML gerado está livre de de código analisado e confuso. Isto porque todos os detalhes são armazenados nos comentários HTML. 

O que podes fazer com os blocos WordPress Gutenberg 

Podes fazer várias coisas no Gutenberg. Se estás a seguir um tutorial WordPress para desenvolvedor@s, deves estar ciente das tuas opções. 

Vamos explorar algumas opções: 

  • Desenvolve os teus próprios blocos WordPress: Esta é a tarefa mais complexa que podes fazer. No entanto, os blocos personalizados WordPress muitas vezes valem o esforço para conseguir uma verdadeira personalização. 
  • Prepara o teu tema para Gutenberg: Isto inclui seguires as instruções do tema sugerido em WordPress.org para tornares o teu tema compatível com Gutenberg. Isto inclui também ajustares o estilo do bloco para obteres o visual desejado do teu tema e manteres a funcionalidade do bloco. 
  • Personalizar ou ampliar os blocos de conteúdo existentes em WordPress: Como mencionado acima, podes personalizar os blocos WordPress existentes no Gutenberg. Isto inclui adicionares estilos de blocos personalizados, adicionares filtros via Javascript, ou personalizares categorias de blocos e tipos de blocos que são mostrados para tipos específicos de publicações personalizáveis. 

Criar um ambiente de desenvolvimento para o editor de blocos Gutenberg

WordPress -Gutenberg-Tutorial-Developer

Antes de poderes construir qualquer coisa com Gutenberg ou assistires qualquer tutorial WordPress para desenvolvedor@s, precisas de configurar um ambiente de desenvolvimento. O teu primeiro passo é obteres o Node.js. O WordPress recomenda o uso do Node Version Manager (nvm) para instalar e gerir o Node. 

Podes construir Gutenberg dentro do repositório clonado, executando o seguinte: 

npm ci
npm run build

Esta codificação assegura que Gutenberg pode ser usado como um plugin. Em seguida, adiciona o diretório Gutenberg criado à pasta wp-content/plugins no teu ambiente WordPress local. A White Pixel também recomenda a instalação de Webpack e Babel. 

Percorre todos os passos de configuração para configurares um ambiente de desenvolvimento. Precisarás de um site de teste local a executar o WordPress com o plugin Gutenberg que criaste, e de acesso ao terminal para executar um conjunto de pedidos de linha de comando. WordPress.org fornece inúmeros recursos para roteiros de desenvolvimento

Agora que tens o teu ambiente local criado e configurado, podemos passar à parte principal deste tutorial WordPress para desenvolvedor@s: os blocos WordPress.

Compreender os blocos WordPress

Os blocos WordPress são recipientes nos quais o conteúdo é colocado dentro do Editor de Blocos WordPress. Os blocos WordPress podem ser movidos através de uma interface de arrastar e soltar.

Entenderes o que são blocos WordPress é importante antes de criares os teus próprios. Os blocos WordPress também são muito abrangentes e incluem várias funcionalidades importantes, incluindo: 

Como crias os teus próprios blocos WordPress

Com este tutorial WordPress Gutenberg para desenvolvedor@s, aprenderás o que precisas para criar blocos de conteúdo personalizados WordPress. Depois podes usá-los no teu site ou no site dos teus ou tuas clientes. 

Como registas novos blocos WordPress

Cada novo bloco começa com o registo. Usa a funcionalidade registerBlockType para registar uma nova definição de tipo de bloco.  

O nome do bloco é uma string que tem de ser escrita como . Substitui o namespace pelo nome do bloco que desejas criar. 

A partir daí, tens de definir as propriedades do teu novo bloco, como por exemplo, o título, descrição, categoria, ícone, palavras-chave ou estilos. 

Adicionar barras de ferramentas para ações personalizáveis

Se quiseres adicionar ações personalizadas ao teu bloco através de uma barra de ferramentas interativa, podes personalizar (ou criar a partir do zero) barras de ferramentas Gutenberg funcionais. Define ícones personalizados, formatação, posicionamento e ações atribuídas, dependendo das necessidades do teu plugin ou tema. 

WordPress -Gutenberg-Tutorial-Developer

De acordo com o Manual do Editor de Blocos, adicionar uma barra de ferramentas personalizada pode parecer algo parecido com isto: 

Barra de ferramentas de importação

Como traduzires blocos WordPress 

Ao fazeres a internacionalização, podes garantir que os blocos WordPress criados pot ti alcançam um público mais amplo. 

Desde o WordPress 5.0 podes usar o pacote wp-i18n JavaScript para adicionares strings traduzíveis. Podes também criar ficheiros de tradução e tê-los carregados quando um/a utilizador/a solicita conteúdo nesta língua. 

Adicionar configurações de inspetor

Todos os blocos têm um conjunto de configurações do inspetor que aparecem no lado direito do ecrã quando são inseridos no teu conteúdo. E, dependendo do bloco WordPress, os aspetos que os/as utilizadores/as podem personalizar variam. Para cada bloco individual criado têm de ser definidas as opções do inspetor. 

WordPress -Gutenberg-Tutorial-Developer

Podes adicionar <InspectorControls> dizendo a WordPress quais os controles do inspetor a usar, como eles devem ser, quais as opções a incluir e por que ordem eles devem aparecer. 

Os esforços do JavaScript para WordPress são algo parecidos com isto: 

WordPress -Gutenberg-Tutorial-Developer

Com estas especificações, podes usar o JSX para estilizar cada funcionalidade e ajustar a tua sequência. 

Como produzires conteúdo dinâmico com PHP

O conteúdo dinâmico é essencial para WordPress. Há muitas razões pelas quais pode precisar de um bloco dinâmico. 

Por exemplo, se você quiser criar um bloco personalizado de ÚltimosPosts que exibe os últimos posts do blog em tempo real, você precisa de um bloco dinâmico. 

O bloco depende do PHP, porque ele precisa de ir buscar novas informações sempre que é renderizado. Para a maioria dos blocos, a chave para os tornar dinâmicos é alterar a sua função de armazenamento para zero. Depois adicionas o código para dizer ao novo bloco para recuperar o conteúdo apropriado. 

Também podes definir um atributo para dizer ao bloco para exibir um determinado número de publicações.

Adicionar configurações individuais aos blocos Gutenberg já existentes

Podes igualmente adicionar configurações personalizáveis e fazer alterações aos blocos existentes do Gutenberg WordPress. Por exemplo, podes adicionar controlos personalizáveis ao painel de blocos avançados dentro das configurações do inspetor de um bloco. Jeffrey Carandang tem um ótimo tutorial acerca disto no seu blog.

Criar padrões de bloco personalizados

Vamos explorar outro aspeto de Gutenberg neste tutorial WordPress para desenvolvedor@s. Com os padrões de blocos WordPress podes criar e partilhar layouts de blocos pré-definidos. Trata-se de um agrupamento de blocos WordPress que te permite criar layouts complexos com alguns cliques.

É possível acessar os padrões de bloco a partir do ecrã de edição para publicações/páginas, pressionando o sinal +. Verás então todos os padrões de bloco disponíveis para o teu site. 

WordPress -Gutenberg-Tutorial-Developer

Como criares os teus próprios Padrões de Bloco 

Para começar, cria um esboço de uma página ou uma publicação. Adiciona blocos em qualquer configuração que desejes. Por exemplo, se geres uma revista online, podes querer criar um layout de página para novos artigos com títulos, colunas, imagens e citações proeminentes. 

A seguir, precisas de desenhar os blocos para ter a aparência que desejas. 

O próximo passo é copiar tudo o que fizeste até agora. Para selecionares os blocos, clica em todos enquanto manténs a tecla ALT pressionada. Depois clica no ícone com os três pontos na vertical (mais opções) na barra de ferramentas. Clica em copiar. 

WordPress -Gutenberg-Tutorial-Developer

A seguir, precisas de descodificar a saída HTML que acabaste de copiar. Para tal, podes usar a ferramenta JSON Escape/Unescape. Copia o " Result String Code" que aparece após clicares em Escape

WordPress -Gutenberg-Tutorial-Developer

Agora tens de registar o teu novo padrão de bloco. 

Como registas e cancelas o registo de padrões de bloco

Podes registar um Custom Block Pattern (ou bloco padrão personalizado) usando Block Patterns API para colar o código que copiaste acima no ficheiro  functions.php do teu tema WordPress  ou adicionando-o a um plugin personalizado.

Podes também usar o plugin Block Pattern Builder para eliminares os requisitos de codificação aquando da criação de padrões de blocos.  

WordPress -Gutenberg-Tutorial-Developer

Como usares o editor Gutenberg enquanto desenvolved@r de temas

Gutenberg facilita o desenvolvimento de blocos personalizados WordPress que tornam a publicação de conteúdo uma experiência rica. Podes também pode usar Gutenberg para abdicar de um plugin construtor de páginas separado como o Elementor ou Divi.

Gutenberg pode ser usado para criar layouts de página inicial responsivos, permitindo blocos de largura e largura total. Ou podes criar um tema baseado em blocos a partir do zero. 

Vamos falar de algumas das tuas opções em detalhe. 

Utilizar blocos de cobertura para adicionar secções de páginas

Os blocos de cobertura são uma adição mais recente a Gutenberg e são uma ótima maneira de adicionares diferentes secções a uma página. Para mais informações, vê este vídeo.

O que são blocos de cobertura?

Os blocos de cobertura são blocos de imagem sobre os quais podes colocar texto. Eles são uma ótima maneira de criares cabeçalhos ou secções personalizadas que encontrarias nos plugins de construção de páginas WordPress ou temas WordPress.

Sobreposição de blocos que podes adicionar:

  • Blocos de imagem
  • Fundos de vídeo
  • Blocos de cabeçalhos
  • Blocos de parágrafos
  • Blocos de botões 

Os blocos de cobertura tornam o teu site mais versátil. Desta forma, podes criar uma página inicial personalizada. Poderias até criar um tema WordPress simples com uma combinação de blocos de cobertura e padrões de blocos. 

Opções ainda mais extensas para a edição completa de sites também estão no horizonte. A equipa de Make WordPress Design afirma que a manipulação de modelos, padrões de blocos avançados e estilos globais serão o foco principal. 

Utilização do plugin Advanced Custom Fields 

Uma limitação dos blocos é o facto de não ser possível alcançar um layout de largura total: estará sempre em caixas. 

No entanto, com algumas manipulações inteligentes, podes usar o plugin Advanced Custom Fields para adicionares metaconfigurações personalizadas e forçar layouts de largura total. Isto é essencial se quiseres usar Gutenberg para criar os teus próprios temas. 

WordPress -Gutenberg-Tutorial-Developer

Usar estilos de blocos personalizados 

Outra forma de usares Gutenberg enquanto desenvolvedor@ de temas é através de Custom Block Styles. Depois de teres criado padrões de blocos ou usado blocos de cobertura para criar secções de página, podes então adicionar ou remover estilos de blocos de cada bloco envolvido. 

Tens de saber o nome do bloco para que possas adicionar ou remover estilos associados a ele. Este passo extra permite evitar que se tenha de inserir a classe CSS personalizada cada vez que o bloco é utilizado. 

Blocos WordPress para Landing Pages e Front Pages

Já mencionámos o quão eficazes podem ser os blocos de cobertura para criar páginas iniciais para o teu site ou tema. Eles também funcionam muito bem para Landing Pages. 

Alguns outros blocos que vale a pena mencionar e que podem ajudar nesta tarefa são: 

  • Galerias
  • Blocos de colunas
  • Blocos de imagens
  • Blocos de tabelas
  • Blocos de texto

A maioria dos blocos pode ser usada em conjunto com os blocos de cobertura para criar uma página inicial com aspeto profissional. 

Se precisares de mais funcionalidades, podes adicionar um plugin de bloco Gutenberg que adiciona um único bloco a Gutenberg, ou um plugin de biblioteca de blocos Gutenberg que adiciona vários. 

Ultimate Addons para Gutenberg e Atomic Blocks são excelentes opções de biblioteca que proporcionam uma experiência mais fácil de construção de sites com blocos para testemunhos, chamadas para ação, opções de layout de página, formulários de contacto, tabelas de preços e shortcodes. 

WordPress -Gutenberg-Tutorial-Developer

Os plugins são ideais para aqueles que querem familiarizar-se com Gutenberg e desenvolver sites - sem utilizar muito código. 

Pensamentos finais sobre os blocos WordPress

O editor de blocos WordPress Gutenberg agora faz parte do núcleo WordPress e a equipa de desenvolvimento por trás de WordPress tem grandes planos para ele. Eventualmente poderás usar Gutenberg para criar menus de navegação. E no futuro, o editor será compatível com ainda mais temas.

Com a ajuda deste tutorial WordPress para desenvolvedor@s, podes agora usar blocos WordPress para criar sites e personalizar o conteúdo de acordo com as tuas necessidades. 

Agora podes criar blocos WordPress do zero e eventualmente criar sites inteiros WordPress usando o editor de blocos incluido.
Entretanto, deves certificar-se de que os sites que desenvolves estãoalojados na RAIDBOXES. A RAIDBOXES oferece pacotes abrangentes de alojamento WordPress que são adequados tanto para proprietári@s de sites individuais como para agências.

As tuas perguntas sobre o desenvolvimente de Gutenberg

Tens perguntas para a Maddy sobre o guia Gutenberg para desenvolvedor@s? Gostávamos de saber a tua opinião. Queres ser informado sobre novos artigos de WordPress? Então segue a RAIDBOXES no Twitter, Facebook ou através da nossa newsletter.

Maddy Osman é uma estratega de conteúdo SEO. Trabalha com clientes selecionados na área WordPress e alojamento web. Com formação em web design e WordPress, tem um profundo conhecimento de SEO - e sabe exatamente como ligar marcas com conteúdos relevantes de SEO.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.