{"id":37128,"date":"2022-12-01T13:50:56","date_gmt":"2022-12-01T16:50:56","guid":{"rendered":"https:\/\/www.yogh.com.br\/blog\/?p=37128"},"modified":"2025-04-14T12:06:43","modified_gmt":"2025-04-14T15:06:43","slug":"como-usar-os-blocos-reutilizaveis","status":"publish","type":"post","link":"https:\/\/www.yogh.com.br\/blog\/como-usar-os-blocos-reutilizaveis\/","title":{"rendered":"Como usar os blocos reutiliz\u00e1veis no WordPress (Gutenberg)"},"content":{"rendered":"\n

O Editor de Blocos<\/strong> do WordPress est\u00e1 cada vez mais maduro enquanto o projeto Gutenberg avan\u00e7a para suas fases 3 e 4. A cada dia aparecem novos esfor\u00e7os e atualiza\u00e7\u00f5es para deixar melhor a experi\u00eancia do usu\u00e1rio e a do desenvolvedor de sites, mas existe uma solu\u00e7\u00e3o nativa dentro do projeto<\/strong> que ajuda a otimizar seu tempo e re-aproveitar muito de seu trabalho que talvez voc\u00ea n\u00e3o conhe\u00e7a, s\u00e3o os blocos reutiliz\u00e1veis<\/strong>.<\/p>\n\n\n\n

Mas o que \u00e9 um bloco reutiliz\u00e1vel?<\/strong> Muito mais uma funcionalidade do que um tipo de bloco especifico, “reutilizar” na pr\u00e1tica \u00e9 a soma de poder gravar um conjunto de blocos para ser repetido em outros posts ou p\u00e1ginas, com a possibilidade de exportar e importar esses conjuntos.<\/p>\n\n\n\n

Nesse artigo, vamos mostrar como usar os blocos reutiliz\u00e1veis, al\u00e9m de dar dicas de bibliotecas e de como voc\u00ea pode deixar seu site muito bacana usando blocos para valer! Indo al\u00e9m dos populares plugins j\u00e1 retratados pelo nosso blog em 6 plugins de blocos para o novo editor<\/a>.<\/p>\n\n\n\n

<\/span>Como criar blocos reutiliz\u00e1veis<\/span><\/h2>\n\n\n\n

Primeiro, a fun\u00e7\u00e3o fica meio escondida, ent\u00e3o se atente no \u00edcone de \u201cmais configura\u00e7\u00f5es\u201d de cada bloco: <\/p>\n\n\n\n

\"imagem
3 pontos na vertical \u00e9 o \u00edcone para acessar “mais configura\u00e7\u00f5es”. <\/figcaption><\/figure><\/div>\n\n\n\n

Um menu se abrir\u00e1 e voc\u00ea poder\u00e1 visualizar o link \u201cAdicionar aos blocos reutiliz\u00e1veis\u201d.<\/p>\n\n\n\n

\"Imagem<\/figure><\/div>\n\n\n\n

Depois, aparece uma caixa de texto para voc\u00ea criar o seu bloco com um nome espec\u00edfico ao clicar em Salvar<\/strong>, ele estar\u00e1 criado. <\/p>\n\n\n\n

\"Imagem<\/figure><\/div>\n\n\n\n

A partir da\u00ed, o seu bloco se torna um bloco reutiliz\u00e1vel, lembre-se que o nome deve comunicar bem o que \u00e9 aquele bloco. Voc\u00ea, agora, pode pesquisar seu bloco reutiliz\u00e1vel pelo nome como qualquer outro.<\/p>\n\n\n\n

Ao clicar para inserir um bloco no bot\u00e3o azul acima a esquerda, ao lado do logo do WordPress, o menu de blocos vai se abrir e voc\u00ea poder\u00e1 visualizar uma aba “Reutiliz\u00e1vel”, l\u00e1 estar\u00e3o todos os blocos reutiliz\u00e1veis que foram criados.<\/p>\n\n\n\n

\"Imagem<\/figure><\/div>\n\n\n\n

\u00c9 importante destacar que agora esse elemento pode ser usado em diversas p\u00e1ginas\/posts, mas ser\u00e1 o mesmo, mudar ele significa mudar em todas as p\u00e1ginas que ele tiver sido inserido.<\/strong><\/p>\n\n\n\n

Ainda nesse artigo, vamos te mostrar como come\u00e7ar um outro bloco a partir de um reutiliz\u00e1vel, podendo se tornar depois outro bloco reutiliz\u00e1vel inclusive. Antes disso, \u00e9 importante explicar que para n\u00e3o depender de um design ou de uma imagem, existem formas de voc\u00ea estruturar os seus blocos a partir de bibliotecas. Seguem alguns esfor\u00e7os da comunidade internacional para criar essas cole\u00e7\u00f5es de blocos que voc\u00ea pode utilizar para melhorar seu projeto WordPress. <\/p>\n\n\n\n

<\/span>Bibliotecas de blocos que podem se tornar reutiliz\u00e1veis em seu projeto<\/span><\/h2>\n\n\n\n

No final de julho de 2021, foi lan\u00e7ado no WordPress.org, como resultado de um esfor\u00e7o da comunidade, o reposit\u00f3rio oficial de \u201cPatterns<\/strong><\/a>“<\/em>, que s\u00e3o esses conjuntos de padr\u00f5es e modelos de blocos que podem ser utilizados por qualquer um, em qualquer tema que tenha suporte ao Gutenberg. Voc\u00ea simplesmente acessa o site abaixo, encontra a estrutura que deseja utilizar e clica em \u201cCopy Pattern<\/strong>\u201d<\/em>. N\u00e3o \u00e9 preciso estar logado no WordPress.org. <\/p>\n\n\n\n

\"Imagem<\/a><\/figure>\n\n\n\n

Assim como os outros reposit\u00f3rios da comunidade, voc\u00ea pode somar seus padr\u00f5es por l\u00e1, j\u00e1 para isso \u00e9 necess\u00e1rio uma conta. O reposit\u00f3rio \u00e9 dividido em 10 categorias que s\u00e3o: Bot\u00f5es, Colunas, Destaques, Rodap\u00e9, Galerias, Cabe\u00e7alhos, Imagens, Consulta de Posts, Texto e Wireframe. Visite e aproveite para fazer seus testes com o novo Editor de Blocos.<\/p>\n\n\n\n

Mas o primeiro esfor\u00e7o de documentar e tornar p\u00fablico uma grande quantidade de blocos foi do site GutenbergHub<\/strong> ainda em 2020. O site mant\u00e9m at\u00e9 hoje \u201cmeio escondido\u201d no subdom\u00ednio Builder<\/a><\/em> (mas n\u00e3o \u00e9 outro builder<\/em> do WP) uma interface para se copiar estruturas de blocos para serem usadas em qualquer projeto. S\u00e3o as mesmas categorias do reposit\u00f3rio de Patterns<\/em>, isso porque hoje a ferramenta criada pelo desenvolvedor Munir Kamal<\/a> compartilha da mesma API do WordPress.org que \u00e9 p\u00fablica<\/a> e permite a cria\u00e7\u00e3o de aplica\u00e7\u00f5es.<\/p>\n\n\n\n

\"Imagem<\/a><\/figure>\n\n\n\n

Dividido em um menu das categorias j\u00e1 citadas (coluna \u00e0 esquerda), voc\u00ea cria primeiro sua estrutura, depois pode testar em formatos de desktop, tablet e celular. Al\u00e9m de trocar a ordem das estruturas usando o Navigator <\/em>(bot\u00e3o acima a direita, tr\u00eas linhas horizontais alinhadas diagonalmente). Assim que conseguir criar um wireframe<\/em> da p\u00e1gina parecido com o que desejava, voc\u00ea clica em \u201cCopy Code<\/strong>“<\/em> e cola no seu Editor de Blocos com o famoso \u201cCtrl+V<\/em>\u201d em seu teclado ou simplesmente clique com o bot\u00e3o direito do mouse e clique em Colar<\/strong>.<\/p>\n\n\n\n

Em mar\u00e7o de 2022 foi lan\u00e7ado o MOBA<\/a> (Museu de Arte de Blocos<\/em> em tradu\u00e7\u00e3o livre) que busca inspirar a criatividade e ultrapassar os limites do que pode ser feito com o WordPress atualmente. A cole\u00e7\u00e3o selecionada \u00e9 criada gra\u00e7as \u00e0s ferramentas de design que surgiram nos \u00faltimos lan\u00e7amentos como suporte \u00e0 bordas, gradientes e muito mais. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

O Museum of Block Art<\/strong><\/em> \u00e9 organizado por vers\u00f5es do WordPress, com as cria\u00e7\u00f5es dos colaboradores volunt\u00e1rios usando o m\u00e1ximo de recursos de cada lan\u00e7amento. Cada “arte” em destaque \u00e9 feita usando apenas o Editor de Blocos, em muitos casos sem nenhum CSS personalizado. O projeto aceita contribui\u00e7\u00f5es diretamente<\/a> desde que seguidas as orienta\u00e7\u00f5es dos curadores.<\/p>\n\n\n\n

Clicando em uma das “obras”, voc\u00ea ver\u00e1 a marca\u00e7\u00e3o usada na cria\u00e7\u00e3o do bloco. Diferente das outras bibliotecas que mostramos, o processo para usar esses conjuntos de blocos \u00e9 mais complexo, voc\u00ea vai precisar copiar e colar usando o “Editor de c\u00f3digo<\/strong>” que voc\u00ea acessa pelo Op\u00e7\u00f5es >> Editor<\/strong>. Voc\u00ea precisa colar o c\u00f3digo nessa visualiza\u00e7\u00e3o e depois voltar para o “Editor visual<\/strong>” para conseguir ver o resultado.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

O site foi projetado e constru\u00eddo por Beatriz Fialho<\/a>, Designer de Produto da Automattic, usando o Blockbase<\/a>, um tema pensado para Blocos que usa o que h\u00e1 de melhor e mais recente no WordPress.<\/p>\n\n\n\n

<\/span>Como desfazer blocos reutiliz\u00e1veis<\/span><\/h2>\n\n\n\n

Agora para avan\u00e7ar no uso dos blocos reutiliz\u00e1veis \u00e9 interessante observar que qualquer um desses blocos pode ser “desconectado” se tornando um bloco comum novamente. \u00c9 s\u00f3 acessar o \u201cmais configura\u00e7\u00f5es\u201d (os 3 pontinhos na vertical) e clicar em “Converter para bloco normal<\/strong>“, isso vai permitir que voc\u00ea modifique aquele conjunto de bloco somente naquela p\u00e1gina ou post.<\/p>\n\n\n\n

\"Imagem<\/figure><\/div>\n\n\n\n

As modifica\u00e7\u00f5es neste bloco s\u00f3 estar\u00e3o valendo no Post ou P\u00e1gina em quest\u00e3o, mas se voc\u00ea quiser transformar ele um outro reutiliz\u00e1vel voc\u00ea pode tamb\u00e9m. <\/p>\n\n\n\n

Ao criar uma diversidade desses blocos, voc\u00ea vai precisar gerenciar todos eles, portanto a seguir vamos mostrar como gerenciar blocos reutiliz\u00e1veis podendo at\u00e9 importar e exportar cada um deles com uso de arquivos JSON.<\/p>\n\n\n\n

<\/span>Como exportar e importar blocos reutiliz\u00e1veis <\/span><\/h2>\n\n\n\n

Existem dois caminhos para o link “Gerenciar blocos reutiliz\u00e1veis<\/strong>“, no menu “mais configura\u00e7\u00f5es” de um bloco como na imagem acima, ou tamb\u00e9m pelas Op\u00e7\u00f5es >> Ferramentas<\/strong>:<\/p>\n\n\n\n

\"Imagem<\/figure><\/div>\n\n\n\n

Ao clicar, voc\u00ea vai seguir para a tela do painel WordPress abaixo. Importante lembrar que voc\u00ea sai do Editor de Blocos nessa a\u00e7\u00e3o e alguma mudan\u00e7a pode ser perdida, \u00e9 importante salvar seu progresso para seguir adiante.<\/em><\/p>\n\n\n\n

\"Imagem<\/figure><\/div>\n\n\n\n

Nessa lista, voc\u00ea vai poder visualizar todos os seus blocos reutiliz\u00e1veis e tamb\u00e9m pode exportar passando o mouse em algum e clicando em “Exportar como JSON<\/strong>“. Tamb\u00e9m na imagem voc\u00ea pode observar o bot\u00e3o “Importar de JSON<\/strong>“, ao clicar nele a seguinte caixa de upload aparece para voc\u00ea poder escolher o arquivo para upload. Depois de selecionado clique em “Importar<\/strong>“.<\/p>\n\n\n\n

\"Imagem<\/figure><\/div>\n\n\n\n

N\u00e3o havendo nenhum tipo de erro seu bloco reutiliz\u00e1vel aparece na lista e voc\u00ea passa a poder utiliz\u00e1-lo dentro de seu Post ou P\u00e1gina como qualquer outro. Esperamos poder ter ajudado voc\u00ea a utilizar melhor este recurso nativo dessa nova era do WordPress que s\u00f3 est\u00e1 come\u00e7ando.<\/p>\n\n\n\n

Mas e voc\u00ea, j\u00e1 utiliza alguns destes recursos ou bibliotecas? Na sua opini\u00e3o, como est\u00e1 indo o projeto Gutenberg? Deixe sua opini\u00e3o nos coment\u00e1rios e ajude outras pessoas!<\/strong><\/p>\n\n\n\n

Gostou deste post? Compartilhe com seus amigos em suas redes sociais! At\u00e9 mais!<\/p>\n

\n