{"id":38,"date":"2025-05-15T12:36:06","date_gmt":"2025-05-15T15:36:06","guid":{"rendered":"http:\/\/blog.brisatechub.com.br:8080\/?p=38"},"modified":"2025-05-20T12:33:56","modified_gmt":"2025-05-20T15:33:56","slug":"bem-vindo-ao-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/blog.brisatechub.com.br\/index.php\/2025\/05\/15\/bem-vindo-ao-editor-gutenberg\/","title":{"rendered":"Bem-vindo ao editor Gutenberg"},"content":{"rendered":"\n<div class=\"wp-block-cover alignwide is-light\"><img decoding=\"async\" class=\"wp-block-cover__image-background\" alt=\"\" src=\"https:\/\/cldup.com\/Fz-ASbo2s3.jpg\" data-object-fit=\"cover\"\/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-white-color has-text-color has-large-font-size wp-block-paragraph\">Sobre montanhas e primeiras impress\u00f5es<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"is-style-default wp-block-paragraph\">O objetivo deste novo editor \u00e9 tornar a inclus\u00e3o de conte\u00fado rico no WordPress simples e agrad\u00e1vel. Este post \u00e9 todo composto de <em>peda\u00e7os de conte\u00fado<\/em> \u2014 algo parecido com os blocos LEGO \u2014 que voc\u00ea pode movimentar e com eles, interagir. Movimente o cursor pela tela e voc\u00ea vai notar que os v\u00e1rios blocos s\u00e3o ressaltados por linhas e setas. Clique nas setas para reposicionar os blocos rapidamente, sem o medo de perder alguma coisa no processo de copiar e colar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O que voc\u00ea est\u00e1 lendo agora \u00e9 um <strong>bloco de texto<\/strong>, o bloco mais b\u00e1sico de todos. O bloco de texto tem seus pr\u00f3prios controles para que seja movimentado livremente pelo post&#8230;<\/p>\n\n\n\n<p class=\"has-text-align-right wp-block-paragraph\">&#8230;como este aqui, que \u00e9 alinhado \u00e0 direita.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os t\u00edtulos tamb\u00e9m s\u00e3o blocos separados, o que ajuda no esbo\u00e7o e organiza\u00e7\u00e3o do seu conte\u00fado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Uma imagem vale por mil palavras<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lidar com imagens e m\u00eddias com todo o cuidado \u00e9 um dos focos b\u00e1sicos do novo editor. Esperamos que voc\u00ea ache bem mais f\u00e1cil do que antes a maneira de adicionar legendas ou exibir as imagens em tela cheia.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/cXyG__fTLN.jpg\" alt=\"Linda paisagem\"\/><figcaption class=\"wp-element-caption\">Se o seu tema permitir, voc\u00ea ver\u00e1 um bot\u00e3o &#8220;largo&#8221; na barra de ferramentas da imagem. Experimente.<\/figcaption><\/figure><\/div>\n\n\n<p class=\"wp-block-paragraph\">Tente selecionar e remover ou editar a legenda. Agora voc\u00ea n\u00e3o precisa se preocupar com selecionar por engano a imagem ou outro texto e com isso estragar a apresenta\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A ferramenta de <em>adi\u00e7\u00e3o<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine tudo o que o WordPress pode fazer, est\u00e1 dispon\u00edvel para voc\u00ea rapidamente e no mesmo lugar na interface. Sem necessidade de lembrar sobre tags de HTML, classes ou lembrar da sintaxe complicada de shortcodes. Esse \u00e9 o esp\u00edrito por tr\u00e1s do adicionador, o bot\u00e3o <code>(+)<\/code> que voc\u00ea ver\u00e1 pelo editor, que permite navegar em todos os blocos de conte\u00fado dispon\u00edveis e adicion\u00e1-los ao seu post. Plugins e temas s\u00e3o capazes de registrar os seus pr\u00f3prios, abrindo todo o tipo de possibilidades para edi\u00e7\u00e3o e publica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Experimente, voc\u00ea pode descobrir coisas que o WordPress j\u00e1 \u00e9 capaz de adicionar nos seus posts e que voc\u00ea nem sabia. Aqui vai uma lista do que voc\u00ea j\u00e1 pode encontrar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Textos &amp; t\u00edtulos<\/li>\n\n\n\n<li>Imagens &amp; v\u00eddeos<\/li>\n\n\n\n<li>Galerias<\/li>\n\n\n\n<li>Incorporados, como YouTube, Tweets ou outros posts do WordPress.<\/li>\n\n\n\n<li>Blocos de layout, bot\u00f5es de curtir, imagens em destaque, separadores etc.<\/li>\n\n\n\n<li>E <em>listas<\/em> como esta aqui, \u00e9 claro \ud83d\ude42<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Edi\u00e7\u00e3o visual<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Uma enorme vantagem dos blocos \u00e9 que voc\u00ea consegue edit\u00e1-los no lugar e manipular o conte\u00fado deles diretamente. Em vez de ter campos para editar, por exemplo, o c\u00f3digo de uma cita\u00e7\u00e3o ou o texto de um bot\u00e3o, voc\u00ea pode alterar o conte\u00fado diretamente. Experimente editar a seguinte cita\u00e7\u00e3o:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">O editor se prop\u00f5e a criar uma nova experi\u00eancia de constru\u00e7\u00e3o de posts e p\u00e1ginas, facilitando a cria\u00e7\u00e3o conte\u00fados mais elaborados. Ele tem &#8220;blocos&#8221; para facilitar aquilo que atualmente envolveria shortcodes, HTML personalizados ou uma confus\u00e3o de elementos incorporados.<\/p>\n<cite>Matt Mullenweg, 2017<\/cite><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">A informa\u00e7\u00e3o que corresponde \u00e0 origem da cita\u00e7\u00e3o \u00e9 um campo separado, similar \u00e0s legendas sob as imagens, de forma que a estrutura da cita\u00e7\u00e3o esteja sempre certa, mesmo que voc\u00ea selecione, modifique ou remova essa origem. Tamb\u00e9m fica f\u00e1cil adicion\u00e1-la de volta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os blocos podem ser qualquer coisa que voc\u00ea precisar. Por exemplo, voc\u00ea pode querer adicionar uma cita\u00e7\u00e3o t\u00edmida como parte da composi\u00e7\u00e3o do texto, ou talvez prefira exibir uma em estilo gigante. Todas essas op\u00e7\u00f5es est\u00e3o dispon\u00edveis no adicionador.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/n0g6ME5VKC.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/ZjESfxPI3R.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/EKNF8xD2UM.jpg\" alt=\"\"\/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode mudar a quantidade de colunas em suas galerias mexendo no controle deslizante do inspetor de bloco da barra lateral.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Rico em m\u00eddia<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea combinar os novos alinhamentos <strong>largura ampla<\/strong> e <strong>largura total<\/strong> com galerias, voc\u00ea pode criar uma boa apresenta\u00e7\u00e3o visual muito rapidamente:<\/p>\n\n\n\n<figure class=\"wp-block-image alignfull\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/8lhI-gKnI2.jpg\" alt=\"A acessibilidade \u00e9 importante \u2014 n\u00e3o se esque\u00e7a dos atributos alt de imagem\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 claro que uma imagem ocupando a largura total pode ficar muito grande. Mas \u00e0s vezes a imagem vale a pena.<\/p>\n\n\n\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/_rSwtEeDGD.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cldup.com\/L-cC3qX2DN.jpg\" alt=\"\"\/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A galeria acima tem somente duas imagens. \u00c9 uma maneira mais f\u00e1cil de ter um visual atraente, sem ter que lidar com floats, um c\u00f3digo CSS que pode ser bem complicado. Voc\u00ea tamb\u00e9m pode facilmente converter a galeria de volta a imagens individuais, usando o bot\u00e3o de transforma\u00e7\u00e3o de blocos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Qualquer bloco pode usar estes alinhamentos, at\u00e9 o bloco de m\u00eddias incorporadas, que j\u00e1 \u00e9 responsivo por padr\u00e3o:<\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-vimeo wp-block-embed-vimeo wp-has-aspect-ratio wp-embed-aspect-16-9\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The Mountain\" src=\"https:\/\/player.vimeo.com\/video\/22439234?dnt=1&amp;app_id=122963\" width=\"500\" height=\"281\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea consegue montar o bloco que quiser, est\u00e1tico ou din\u00e2mico, decorativo ou simples. Aqui vai um bloco com cita\u00e7\u00e3o destacada:<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>C\u00f3digo \u00e9 poesia<\/p><cite>A comunidade WordPress<\/cite><\/blockquote><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">\n\t<em>\n\t\tSe voc\u00ea quiser saber mais sobre como criar blocos adicionais ou se estiver interessado em ajudar no projeto, acesse o <a href=\"https:\/\/github.com\/WordPress\/gutenberg\">reposit\u00f3rio do GitHub<\/a>.\t<\/em>\n<\/p>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/WordPress\/gutenberg\">Ajude a construir o Gutenberg<\/a><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Obrigado por testar o Gutenberg!<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">\ud83d\udc4b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O objetivo deste novo editor \u00e9 tornar a inclus\u00e3o de conte\u00fado rico no WordPress simples e agrad\u00e1vel. Este post \u00e9 todo composto de peda\u00e7os de conte\u00fado \u2014 algo parecido com os blocos LEGO \u2014 que voc\u00ea pode movimentar e com eles, interagir. Movimente o cursor pela tela e voc\u00ea vai notar que os v\u00e1rios blocos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-sem-categoria"],"_links":{"self":[{"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/posts\/38\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.brisatechub.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}