{"id":54873,"date":"2023-08-10T07:00:06","date_gmt":"2023-08-10T14:00:06","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54873"},"modified":"2025-05-26T12:55:46","modified_gmt":"2025-05-26T19:55:46","slug":"como-usar-blocos-do-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/","title":{"rendered":"Como Usar Blocos do WordPress (+ Como Criar os Seus Pr\u00f3prios!)"},"content":{"rendered":"\n<p>Seria um lugar estranho para mencionar como minha esposa est\u00e1 guardando um kit Lego Star Wars BB-8 em edi\u00e7\u00e3o limitada, sem abrir e em perfeito estado?<\/p>\n\n\n\n<p>Essas coisas est\u00e3o sendo vendidas por cerca de $500!<\/p>\n\n\n\n<p>Certo. Seria estranho. Entendi, alto e claro&#8230; Mas isso far\u00e1 um pouco mais de sentido em um segundo.<\/p>\n\n\n\n<p>Neste post, vamos cobrir tudo que voc\u00ea precisa saber sobre os blocos do WordPress. Se voc\u00ea \u00e9 um usu\u00e1rio antigo do WP como eu, ent\u00e3o provavelmente ainda pensa nos blocos como algo &#8220;novo&#8221; <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/o-que-e-wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> porque come\u00e7ou usando o editor cl\u00e1ssico.<\/p>\n\n\n\n<p>J\u00e1 se passaram mais de cinco anos desde que o WordPress introduziu blocos, mas eles ainda s\u00e3o uma das funcionalidades do CMS mais mal compreendidas e subutilizadas.<\/p>\n\n\n\n<p>Os blocos do WordPress s\u00e3o como uma esp\u00e9cie de Lego \u2014veja, eu <i>disse a voc\u00ea<\/i> que isso iria se conectar \u2014 eles permitem que voc\u00ea construa e personalize seu site de uma maneira que exigiria a contrata\u00e7\u00e3o de um designer profissional de sites e um desenvolvedor h\u00e1 apenas alguns anos atr\u00e1s.<\/p>\n\n\n\n<p>E essa \u00e9 uma das raz\u00f5es pelas quais as pessoas gostam tanto deles. Uma vez que as entendem, claro.<\/p>\n\n\n\n<p>Depois que eu explicar como eles funcionam, n\u00e3o h\u00e1 d\u00favida de que voc\u00ea tamb\u00e9m vai ador\u00e1-los.<\/p>\n\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">O que s\u00e3o Blocos do WordPress?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1052\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks.jpg\" alt=\"Blocos WordPress\" class=\"wp-image-41445 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1024x673.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-768x505.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1536x1010.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-600x395.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1200x789.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-730x480.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1460x960.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1568x1031.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-877x577.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1052;\" \/><\/figure>\n\n\n\n<p>Os blocos do WordPress s\u00e3o, como o nome sugere, como <i>blocos de constru\u00e7\u00e3o<\/i> empilh\u00e1veis que voc\u00ea pode adicionar a p\u00e1ginas e postagens no seu site do WordPress.<\/p>\n\n\n\n<p>Eles foram adicionados ao WordPress 5.0 juntamente com a inclus\u00e3o do editor Gutenberg com o qual a maioria de n\u00f3s j\u00e1 est\u00e1 familiarizada. Os blocos s\u00e3o agora o padr\u00e3o para personalizar seu site WordPress \u2014 e voc\u00ea pode usar blocos em todo o seu site, n\u00e3o apenas dentro de posts.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Gutenberg<\/h3>\n    <p>Gutenberg \u00e9 o nome do projeto do Editor de Blocos no WordPress. Muitos desenvolvedores e entusiastas do WordPress usam os termos Editor Gutenberg e Editor de Blocos de forma intercambi\u00e1vel.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Pense nisso como uma esp\u00e9cie de construtor de sites ou p\u00e1ginas. Voc\u00ea pode clicar no bot\u00e3o \u201c+\u201d para adicionar um bloco a uma p\u00e1gina ou postagem e, em seguida, selecionar entre v\u00e1rias op\u00e7\u00f5es de blocos. A vers\u00e3o atual do WordPress vem com mais de 90 op\u00e7\u00f5es dispon\u00edveis imediatamente.<\/p>\n\n\n\n<p>Cada bloco \u00e9 essencialmente um widget. Eles podem fazer v\u00e1rias coisas, como incorporar conte\u00fado de outro site ou servi\u00e7o, adicionar novas funcionalidades como calend\u00e1rios ou formul\u00e1rios de contato \u00e0 p\u00e1gina, ou at\u00e9 mesmo adicionar conte\u00fado espec\u00edfico com formata\u00e7\u00e3o predefinida.<\/p>\n\n\n\n<p>Al\u00e9m disso, a maioria dos blocos possui op\u00e7\u00f5es de personaliza\u00e7\u00e3o que permitem ajustar a forma como eles s\u00e3o exibidos ou funcionam em seu site.<\/p>\n\n\n\n<p>O editor de blocos do WordPress \u00e9 uma grande evolu\u00e7\u00e3o em rela\u00e7\u00e3o ao editor cl\u00e1ssico. Nos dias anteriores ao Gutenberg, os usu\u00e1rios do WordPress s\u00f3 podiam adicionar texto e imagens a uma publica\u00e7\u00e3o antes de terem que mergulhar em c\u00f3digo personalizado.<\/p>\n\n\n\n<p><b>Nota para nerds:<\/b> Se por algum motivo, voc\u00ea n\u00e3o tem acesso aos blocos do editor do WordPress, pode ser por uma de duas raz\u00f5es: Uma \u00e9 que sua <a href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/\" target=\"_blank\" rel=\"noopener\">instala\u00e7\u00e3o do WordPress<\/a> pode estar extremamente desatualizada (como h\u00e1 muitos e muitos anos). Em segundo lugar, \u00e9 poss\u00edvel que o editor de blocos tenha sido desativado pelo plugin Classic Editor. Quando ativo em um site WordPress, este plugin faz voc\u00ea voltar para a experi\u00eancia do editor cl\u00e1ssico. Verifique sua p\u00e1gina de plugins no wp-admin para descobrir se esse \u00e9 o caso para voc\u00ea.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"blocks\" class=\"wp-block-heading\">Quais Blocos o WordPress J\u00e1 Possui?<\/h2>\n\n\n\n<p>Por padr\u00e3o, o editor de blocos oferece um <i>enorme <\/i>n\u00famero de <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noopener\">blocos dispon\u00edveis<\/a>. Voc\u00ea pode usar esses blocos para personalizar seu tema WordPress, permitir que escritores e blogueiros adicionem conte\u00fado rico aos seus posts, incorporar conte\u00fado de m\u00eddias sociais e muito mais.<\/p>\n\n\n\n<p>Vamos olhar para alguns dos blocos Gutenberg padr\u00e3o mais populares e \u00fateis.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Blocos Mais Comuns<\/h3>\n\n\n\n<p>Adicionar qualquer tipo de texto ou imagem \u00e9 feito usando um bloco. Isso significa que os blocos mais comuns s\u00e3o geralmente os diferentes estilos e tipos de elementos de texto ou imagem que voc\u00ea pode adicionar a uma p\u00e1gina.<\/p>\n\n\n\n<p>Coisas como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bloco de Texto \u2014 Cada par\u00e1grafo que voc\u00ea escreve no editor de blocos reside em seu pr\u00f3prio bloco de texto, mas os blocos de texto n\u00e3o s\u00e3o limitados a par\u00e1grafos. Escreva um pouco ou escreva muito.<\/li>\n\n\n\n<li>Bloco de Imagem \u2014 Para quando voc\u00ea quer mostrar al\u00e9m de contar, adicione uma imagem \u00e0 mistura para um toque especial.<\/li>\n\n\n\n<li>Bloco de Lista \u2014 Precisa escrever um esbo\u00e7o? Que tal uma lista ordenada? Voc\u00ea pode fazer tudo com o bloco de lista!<\/li>\n\n\n\n<li>Bloco de Galeria de Imagens \u2014 Compartilhar fotos de f\u00e9rias ou fotos de produtos nunca foi t\u00e3o bom. ?<\/li>\n\n\n\n<li>Bloco de Tabela \u2014 Crie uma tabela de pre\u00e7os ou compartilhe dados de planilhas com facilidade.<\/li>\n\n\n\n<li>Bloco de Cita\u00e7\u00e3o Destacada \u2014 Quer chamar a aten\u00e7\u00e3o para uma observa\u00e7\u00e3o particular? Inspirado por uma cita\u00e7\u00e3o que \u00e9 relevante para o post que voc\u00ea est\u00e1 escrevendo? Destaque-a com o bloco de cita\u00e7\u00e3o destacada!<\/li>\n\n\n<\/ul>\n\n\n\n<p>Cada um desses \u00e9 um elemento que voc\u00ea pode adicionar ao seu site com o editor de blocos. Depois, voc\u00ea pode posicion\u00e1-los e estiliz\u00e1-los na se\u00e7\u00e3o de conte\u00fado da p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Blocos de Conte\u00fado Incorporado<\/h3>\n\n\n\n<p>Os blocos facilitam extremamente a incorpora\u00e7\u00e3o de conte\u00fado externo e widgets em seu site WordPress sem a necessidade de adicionar um novo plugin ou complemento de terceiros.<\/p>\n\n\n\n<p>Alguns dos tipos de blocos de incorpora\u00e7\u00e3o mais populares para puxar conte\u00fado externo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bloco Calendly<\/li>\n\n\n\n<li>Bloco HTML Personalizado<\/li>\n\n\n\n<li>Bloco Twitter<\/li>\n\n\n\n<li>Bloco YouTube<\/li>\n\n\n\n<li>Depoimentos<\/li>\n\n\n\n<li>WooCommerce<\/li>\n\n\n\n<li>Formul\u00e1rios de Contato<\/li>\n\n\n\n<li>Perguntas Frequentes<\/li>\n\n\n<\/ul>\n\n\n\n<p>Usando esses tipos de blocos, voc\u00ea pode ir al\u00e9m do editor de texto b\u00e1sico e criar conte\u00fados interativos que apresentam todos os tipos de funcionalidades e caracter\u00edsticas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Blocos Especiais<\/h3>\n\n\n\n<p>Aqui \u00e9 onde as coisas ficam realmente interessantes.<\/p>\n\n\n\n<p>Al\u00e9m dos conceitos b\u00e1sicos e do conte\u00fado incorporado, tamb\u00e9m existem um grande n\u00famero de blocos avan\u00e7ados que voc\u00ea pode usar para casos especiais. Talvez voc\u00ea queira melhorar a navega\u00e7\u00e3o e a UX do seu site, ou usar o WordPress como um construtor de sites completo.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Navega\u00e7\u00e3o<\/h3>\n    <p>Na web, o termo &#8216;navega\u00e7\u00e3o&#8217; representa a movimenta\u00e7\u00e3o de um site ou p\u00e1gina para outro. Navega\u00e7\u00e3o tamb\u00e9m \u00e9 um termo comum em desenvolvimento e design web. H\u00e1 uma \u00eanfase em facilitar para os usu\u00e1rios a localiza\u00e7\u00e3o das p\u00e1ginas que precisam.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/navigation\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Aqui est\u00e3o alguns para conferir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bloco de Bot\u00f5es<\/li>\n\n\n\n<li>Bloco de Colunas<\/li>\n\n\n\n<li>Bloco de Grupo<\/li>\n\n\n\n<li>Bloco de Carrossel de Posts<\/li>\n\n\n\n<li>Bloco de Conte\u00fado de Post<\/li>\n\n\n\n<li>Bloco de Loop de Consulta<\/li>\n\n\n\n<li>Bloco Reutiliz\u00e1vel<\/li>\n\n\n\n<li>Bloco de C\u00f3digo Curto<\/li>\n\n\n\n<li>Bloco de \u00cdndice de Conte\u00fados<\/li>\n\n\n<\/ul>\n\n\n\n<p>Com esses blocos, voc\u00ea pode inserir conte\u00fado personalizado diretamente do banco de dados do WordPress ou personalizar completamente o layout, o espa\u00e7amento e o fluxo de cada p\u00e1gina ou postagem no seu site.<\/p>\n\n\n\n<p>Isso \u00e9 tudo \u00f3timo e elegante.<\/p>\n\n\n\n<p><i>Mas e se voc\u00ea precisar de um bloco que n\u00e3o vem com o WordPress por padr\u00e3o?&nbsp;<\/i><\/p>\n\n\n\n<p>Felizmente, os blocos tamb\u00e9m s\u00e3o personaliz\u00e1veis. Assim como os widgets, voc\u00ea pode adicionar novos blocos e at\u00e9 criar os seus pr\u00f3prios para atender \u00e0s necessidades do design do seu site e do template.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Widget<\/h3>\n    <p>Os widgets do WordPress podem adicionar funcionalidades \u00e0s barras laterais, rodap\u00e9s ou outras \u00e1reas do seu site. Alguns widgets padr\u00e3o do WordPress s\u00e3o Categorias, Nuvem de Tags, Pesquisa, Menu de Navega\u00e7\u00e3o, Calend\u00e1rio e Posts Recentes.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">Como Criar Blocos Personalizados Com um Plugin do WordPress<\/h2>\n\n\n\n<p>De longe, a maneira mais f\u00e1cil de criar um bloco personalizado \u00e9 usar um plugin.<\/p>\n\n\n\n<p>O <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Genesis Custom Blocks plugin<\/a> facilita bastante a constru\u00e7\u00e3o e o lan\u00e7amento de seus pr\u00f3prios blocos personalizados. Voc\u00ea precisar\u00e1 ter um entendimento b\u00e1sico de <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> e <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> para criar e estilizar o bloco de acordo com suas necessidades.<\/p>\n\n\n\n<p>Com essas habilidades b\u00e1sicas, o plugin cuida de toda a configura\u00e7\u00e3o e configura\u00e7\u00e3o dif\u00edcil para implementar um novo bloco.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 1: Instale o Plugin Genesis Block<\/h3>\n\n\n\n<p>Primeiro as primeiras coisas: Passe pelo diret\u00f3rio de Plugins do WordPress e instale o <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Genesis Custom Block plugin<\/a>.<\/p>\n\n\n\n<p>(N\u00e3o se esque\u00e7a de ir \u00e0 aba de Plugins e ativ\u00e1-lo.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 2: Adicionar Um Novo Bloco<\/h3>\n\n\n\n<p>Uma vez instalado e ativado, voc\u00ea deve ver uma nova op\u00e7\u00e3o no painel administrativo do WP na navega\u00e7\u00e3o do lado esquerdo.<\/p>\n\n\n\n<p>Clique em Blocos Personalizados &gt; Adicionar Novo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 3: Personalize os Campos do Editor<\/h3>\n\n\n\n<p>Agora, estamos prontos para come\u00e7ar a construir o bloco personalizado.<\/p>\n\n\n\n<p>O primeiro passo ser\u00e1 configurar os campos e op\u00e7\u00f5es de personaliza\u00e7\u00e3o que aparecer\u00e3o quando voc\u00ea estiver usando o bloco no seu site.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg\" alt=\"Captura de tela mostrando a tela de configura\u00e7\u00e3o do Genesis Custom Blocks Plugin\" class=\"wp-image-41446 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode pensar nisso como uma vers\u00e3o mini do pr\u00f3prio editor de blocos. Voc\u00ea adicionar\u00e1 campos personalizados e dados que ser\u00e3o preenchidos previamente pelo pr\u00f3prio bloco ou coletados pelo editor ou usu\u00e1rio que est\u00e1 adicionando o bloco a uma p\u00e1gina ou postagem.<\/p>\n\n\n\n<p>Por exemplo, se voc\u00ea est\u00e1 construindo um bloco de chamada para a\u00e7\u00e3o (CTA), voc\u00ea pode adicionar campos como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Texto do t\u00edtulo<\/li>\n\n\n\n<li>Texto do subt\u00edtulo<\/li>\n\n\n\n<li>Texto do bot\u00e3o<\/li>\n\n\n\n<li>URL do bot\u00e3o CTA<\/li>\n\n\n<\/ul>\n\n\n\n<p>Cada campo ter\u00e1 um r\u00f3tulo, nome e tipo. Voc\u00ea pode at\u00e9 personalizar a largura ou adicionar texto de ajuda para facilitar o uso por editores ou escritores adicionais.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 4: Personalize o Markup e o CSS<\/h3>\n\n\n\n<p>Agora que configuramos o backend do bloco, precisamos informar ao WordPress como exibir realmente o conte\u00fado que est\u00e1 sendo adicionado.<\/p>\n\n\n\n<p>Aqui \u00e9 onde qualquer conhecimento pr\u00e9vio de HTML ou CSS que voc\u00ea possa ter ser\u00e1 \u00fatil.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS.jpg\" alt=\"Personalize o Markup e o CSS\" class=\"wp-image-41447 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n\n<p>Neste pr\u00f3ximo passo, voc\u00ea essencialmente estar\u00e1 escrevendo o bloco de c\u00f3digo que ser\u00e1 gerado dinamicamente a partir das entradas configuradas para o editor de blocos.<\/p>\n\n\n\n<p>Voc\u00ea pode escrever isso em HTML e CSS puros.<\/p>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode importar as vari\u00e1veis do editor de blocos usando chaves duplas e o nome do campo (slug) do editor. (Ex.: &#8220;{{button-text}}&#8221;)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 5: Adicionar o Bloco<\/h3>\n\n\n\n<p>Uma vez que voc\u00ea tenha configurado o bloco usando o Genesis plugin, ele deve aparecer na lista de blocos dispon\u00edveis no editor Gutenberg do WordPress.<\/p>\n\n\n\n<p>Basta clicar no \u201c+\u201d e ent\u00e3o encontrar o novo bloco pelo seu nome.<\/p>\n\n\n\n<p>Uma vez adicionado, voc\u00ea dever\u00e1 ver a tela do editor de blocos Gutenberg com os campos e op\u00e7\u00f5es que configurou.<\/p>\n\n\n\n<p>\u00c9 isso!<\/p>\n\n\n\n<p>Voc\u00ea pode agora usar seu bloco personalizado, adicionando-o a p\u00e1ginas, posts, barras laterais ou onde precisar.<\/p>\n\n\n\n<h2 id=\"custom\" class=\"wp-block-heading\">Como Criar Blocos Personalizados no WordPress Sem um Plugin<\/h2>\n\n\n\n<p>Se voc\u00ea deseja se aprofundar e realmente aprender a criar novos blocos do zero, precisar\u00e1 de um conhecimento mais avan\u00e7ado.<\/p>\n\n\n\n<p>Neste tutorial, vamos percorrer os passos b\u00e1sicos para usar a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener\">ferramenta create-block<\/a> que permitir\u00e1 que voc\u00ea crie blocos totalmente personalizados sem a necessidade de usar um plugin.<\/p>\n\n\n\n<p>Aviso justo: Este \u00e9 um fluxo de trabalho avan\u00e7ado. Ser\u00e1 necess\u00e1rio que voc\u00ea explore a linha de comando.<\/p>\n\n\n\n<p>Voc\u00ea precisar\u00e1 entender de PHP, JavaScript, HTML e CSS.<\/p>\n\n\n\n<p>N\u00e3o diga que n\u00e3o avisamos!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa #1: Configurar Node.js, NPM e Instala\u00e7\u00e3o Local do WordPress<\/h3>\n\n\n\n<p>Antes de podermos usar create-block, precisamos ter a configura\u00e7\u00e3o e o acesso corretos.<\/p>\n\n\n\n<p>Aqui est\u00e3o os pr\u00e9-requisitos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.wordpress.org\/tutorial\/local-wordpress-installations-for-beginners\/\" target=\"_blank\" rel=\"noopener\">Uma instala\u00e7\u00e3o local do WordPress<\/a><\/li>\n\n\n\n<li>Configura\u00e7\u00e3o de terminal ou linha de comando<\/li>\n\n\n\n<li><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">Node.js e npm<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode querer usar <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noopener\">nvm<\/a> (Gerenciador de vers\u00e3o do Node) para instalar ou atualizar uma vers\u00e3o compat\u00edvel do Node.js<\/p>\n\n\n\n<p>Com esta configura\u00e7\u00e3o, usaremos o comando \u201cnpx\u201d do NPM para executar o pacote create-block diretamente do seu diret\u00f3rio hospedado na nuvem.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passo #2: Execute o pacote create-block<\/h3>\n\n\n\n<p>Agora, a etapa f\u00e1cil.<\/p>\n\n\n\n<p>Do terminal, navegue at\u00e9 o diret\u00f3rio \/wp-content\/plugins do seu site na sua m\u00e1quina local.<\/p>\n\n\n\n<p>Em seguida, execute o pacote create-block usando NPX:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"693\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package.jpg\" alt=\"Execute o pacote create-block\" class=\"wp-image-41448 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-300x130.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1024x444.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-768x333.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1536x665.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-600x260.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1200x520.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-730x316.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1460x632.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-784x340.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1568x679.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-877x380.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/693;\" \/><\/figure>\n\n\n\n<p><code>npx @wordpress\/create-block {{block-name}}<\/code><\/p>\n\n\n\n<p>Este pacote executar\u00e1 o processo de configura\u00e7\u00e3o do que \u00e9 conhecido como &#8220;estrutura de blocos&#8221;. Ele registrar\u00e1 todos os elementos relevantes, criar\u00e1 a estrutura correta de arquivos e diret\u00f3rios, e gerar\u00e1 o c\u00f3digo padr\u00e3o para que todo o bloco seja edit\u00e1vel e utiliz\u00e1vel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa #3: Ative o Plugin<\/h3>\n\n\n\n<p>O novo bloco em si ter\u00e1 a forma de um Plugins\/plugin.<\/p>\n\n\n\n<p>Uma vez que o pacote create-block esteja completo, voc\u00ea precisar\u00e1 acessar o admin do WP.<\/p>\n\n\n\n<p>V\u00e1 at\u00e9 a p\u00e1gina de Plugins e ative o novo plugin que foi criado, que deve ter o nome do bloco que voc\u00ea usou no seu comando npx.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa #4: Personalizar o C\u00f3digo do Bloco<\/h3>\n\n\n\n<p>Voc\u00ea personalizar\u00e1 o conte\u00fado e a funcionalidade do bloco dentro da pasta <b>\/src\/<\/b> no diret\u00f3rio do plugin.<\/p>\n\n\n\n<p><b>Index.js<\/b> \u00e9 onde voc\u00ea vai registrar o bloco e codificar a sa\u00edda principal:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"871\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code.jpg\" alt=\"Personalize o C\u00f3digo do Bloco\" class=\"wp-image-41449 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-300x163.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1024x557.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-768x418.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1536x836.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-600x327.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1200x653.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-730x397.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1460x795.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-784x427.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1568x854.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-877x477.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/871;\" \/><\/figure>\n\n\n\n<p>Observe que a fun\u00e7\u00e3o registerBlockType \u00e9 configurada para lidar tanto com as entradas do editor de blocos (\u201cedit\u201d) quanto com a exibi\u00e7\u00e3o no frontend (\u201csave\u201d).<\/p>\n\n\n\n<p>Isso \u00e9 apenas o come\u00e7o da constru\u00e7\u00e3o de um bloco funcional.<\/p>\n\n\n\n<p>Voc\u00ea provavelmente vai querer explorar a documenta\u00e7\u00e3o completa para escrever blocos funcionais usando a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener\">API de Bloco do WordPress<\/a>.<\/p>\n\n\n\n<p>Depois de dominar os conceitos b\u00e1sicos, voc\u00ea pode adicionar depend\u00eancias adicionais, acessar fontes de dados externas e praticamente qualquer outra coisa que voc\u00ea desejar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passo #5: Adicione o Bloco a partir do Editor Gutenberg<\/h3>\n\n\n\n<p>Com o plugin ativado, voc\u00ea pode adicionar seu bloco a qualquer p\u00e1gina ou postagem a partir do editor Gutenberg.<\/p>\n\n\n\n<p>Acesse usando o bot\u00e3o \u201c+\u201d ou o comando \u201c\/\u201d, assim como qualquer outro bloco.<\/p>\n\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">O C\u00e9u \u00e9 o Limite<\/h2>\n\n\n\n<p>Certo, passamos do b\u00e1sico ao avan\u00e7ado com este, mas a boa not\u00edcia \u00e9 que agora voc\u00ea \u00e9 impar\u00e1vel.<\/p>\n\n\n\n<p>Entre as op\u00e7\u00f5es de blocos padr\u00e3o, o plugin Genesis e a capacidade de construir seus pr\u00f3prios blocos do zero \u2014 n\u00e3o h\u00e1 nada que voc\u00ea n\u00e3o possa fazer!<\/p>\n\n\n\n<p>E porque os blocos s\u00e3o incrivelmente poderosos e flex\u00edveis, n\u00e3o h\u00e1 praticamente nada que voc\u00ea n\u00e3o possa construir. Seu site WordPress agora possui funcionalidade quase infinita, e voc\u00ea pode criar o site, aplicativo ou projeto dos seus sonhos.<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      WordPress + DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nossas atualiza\u00e7\u00f5es autom\u00e1ticas e defesas de seguran\u00e7a robustas tiram o gerenciamento do servidor das suas m\u00e3os para que voc\u00ea possa se concentrar em criar um \u00f3timo site.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Confira os Planos                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Seria estranho mencionar aqui como minha esposa est\u00e1 guardando um kit Lego Star Wars BB-8 de edi\u00e7\u00e3o limitada, em condi\u00e7\u00f5es perfeitas e nunca aberto? Essas coisas est\u00e3o sendo vendidas por cerca de $500! Ok. Seria estranho. Entendido, alto e claro&#8230; Mas isso tudo far\u00e1 um pouco mais de sentido em um segundo. Neste post, [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":41439,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"O que s\u00e3o Blocos do WordPress?\"],[\"blocks\",\"Quais Blocos o WordPress J\u00e1 Possui?\"],[\"create\",\"Como Criar Blocos Personalizados Com um Plugin do WordPress\"],[\"custom\",\"Como Criar Blocos Personalizados no WordPress Sem um Plugin\"],[\"summary\",\"O C\u00e9u \u00e9 o Limite\"]]","hide_toc":false,"footnotes":""},"categories":[14474,14407,14409],"tags":[],"class_list":["post-54873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comecando-pt","category-design-de-sites-pt","category-wordpress-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Como Usar Blocos do WordPress (+ Como Criar os Seus Pr\u00f3prios!) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Usar Blocos do WordPress (+ Como Criar os Seus Pr\u00f3prios!)\" \/>\n<meta property=\"og:description\" content=\"Seria estranho mencionar aqui como minha esposa est\u00e1 guardando um kit Lego Star Wars BB-8 de edi\u00e7\u00e3o limitada, em condi\u00e7\u00f5es perfeitas e nunca aberto? Essas coisas est\u00e3o sendo vendidas por cerca de $500! Ok. Seria estranho. Entendido, alto e claro... Mas isso tudo far\u00e1 um pouco mais de sentido em um segundo. Neste post, [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-10T14:00:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:55:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Usar Blocos do WordPress (+ Como Criar os Seus Pr\u00f3prios!) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Como Usar Blocos do WordPress (+ Como Criar os Seus Pr\u00f3prios!)","og_description":"Seria estranho mencionar aqui como minha esposa est\u00e1 guardando um kit Lego Star Wars BB-8 de edi\u00e7\u00e3o limitada, em condi\u00e7\u00f5es perfeitas e nunca aberto? Essas coisas est\u00e3o sendo vendidas por cerca de $500! Ok. Seria estranho. Entendido, alto e claro... Mas isso tudo far\u00e1 um pouco mais de sentido em um segundo. Neste post, [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-08-10T14:00:06+00:00","article_modified_time":"2025-05-26T19:55:46+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Como Usar Blocos do WordPress (+ Como Criar os Seus Pr\u00f3prios!)","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-26T19:55:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/"},"wordCount":2293,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","articleSection":["Come\u00e7ando","Design de Sites","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/","name":"Como Usar Blocos do WordPress (+ Como Criar os Seus Pr\u00f3prios!) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-26T19:55:46+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","width":1460,"height":1095,"caption":"How To Use WordPress Blocks Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Como Usar Blocos do WordPress (+ Como Criar os Seus Pr\u00f3prios!)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"pt","translations":{"pt":54873,"es":41465,"en":41438,"de":52846,"pl":54880,"ru":54916,"uk":54919,"it":68363,"fr":70312,"nl":70333},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=54873"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54873\/revisions"}],"predecessor-version":[{"id":62241,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54873\/revisions\/62241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/41439"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=54873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=54873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=54873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}