{"id":43387,"date":"2021-07-16T16:09:54","date_gmt":"2021-07-16T14:09:54","guid":{"rendered":"https:\/\/kinsta.com\/?p=98590"},"modified":"2023-08-22T06:02:06","modified_gmt":"2023-08-22T09:02:06","slug":"wordpress-5-8","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/","title":{"rendered":"O Que h\u00e1 de Novo no WordPress 5.8 (Full Site Editing, Imagens WebP, Estilos e Configura\u00e7\u00f5es Globais e Muito Mais)"},"content":{"rendered":"<p>O WordPress 5.8 &#8220;Tatum&#8221; <a href=\"https:\/\/wordpress.org\/news\/2021\/07\/tatum\/\">est\u00e1 aqui<\/a> e \u00e9 um lan\u00e7amento memor\u00e1vel. Al\u00e9m do incr\u00edvel n\u00famero de recursos, melhorias e corre\u00e7\u00f5es de bugs, o WP 5.8 introduz uma nova forma de construir sites, trazendo os primeiros recursos que se enquadram no projeto mais amplo conhecido como <strong>Full Site Editing (Edi\u00e7\u00e3o completa do site)<\/strong>.<\/p>\n<p>Al\u00e9m do Full Site Editing (Edi\u00e7\u00e3o completa do site), o WordPress 5.8 traz toneladas de mudan\u00e7as e melhorias em diversas \u00e1reas do <a href=\"https:\/\/kinsta.com\/pt\/wordpress-quota-mercado\/\">CMS<\/a>.<\/p>\n<p>Os usu\u00e1rios do WordPress que n\u00e3o usam o plugin Gutenberg encontrar\u00e3o recursos e melhorias provenientes de nove vers\u00f5es do Gutenberg ao todo (para um mergulho profundo em cada vers\u00e3o, veja Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/05\/whats-new-in-gutenberg-9-9-5-february\/\">9.9<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/17\/whats-new-in-gutenberg-10-0-february\/\">10.0<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">10.1<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">10.2<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">10.4<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">10.5<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">10.6<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">10.7<\/a>).<\/p>\n<p>Um novo recurso importante para os usu\u00e1rios s\u00e9rios sobre o desempenho de seus sites \u00e9 o suporte no formato WebP.<\/p>\n<p>Os desenvolvedores certamente adorar\u00e3o a remo\u00e7\u00e3o do IE11 da lista de navegadores suportados, o novo mecanismo de configura\u00e7\u00e3o e estilo de blocos baseado no <strong>theme.json<\/strong>, o sistema melhorado de registro de blocos baseado no <strong>block.json<\/strong>, e as muitas melhorias de API que vir\u00e3o com a segunda <a href=\"https:\/\/kinsta.com\/pt\/blog\/versao-wordpress\/\">vers\u00e3o do WordPress<\/a> de 2021.<\/p>\n<p>Portanto, fique sentado porque ser\u00e1 um longo conjunto de recursos e melhorias que pavimentam o caminho para novas e poderosas ferramentas de constru\u00e7\u00e3o de sites que dever\u00e3o ser lan\u00e7adas nos <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24551\">pr\u00f3ximos meses<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>H\u00e1 tantas mudan\u00e7as no WordPress 5.8. Para evitar qualquer risco de incorrer em conflitos inesperados com seu tema e plugins, recomendamos vivamente que voc\u00ea fa\u00e7a um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/backups-wordpress\/#wordpress-backup\">backup do seu site<\/a> e teste a nova vers\u00e3o em um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/ambiente-de-teste\/\">ambiente de teste<\/a> antes de atualizar seu site de produ\u00e7\u00e3o (ao vivo).<\/p>\n<\/aside>\n\n\n<h2>Recursos do Full Site Editing (Edi\u00e7\u00e3o completa do site) no WordPress 5.8<\/h2>\n<p>A vis\u00e3o por tr\u00e1s do Full Site Editing \u00e9 fornecer uma cole\u00e7\u00e3o de ferramentas e recursos que permitam aos usu\u00e1rios do WordPress <a href=\"https:\/\/wordpress.org\/news\/2021\/06\/gutenberg-highlights\/\">construir um site inteiro usando blocos<\/a>. Com o Full Site Editing, veremos muitos blocos dispon\u00edveis para criar qualquer elemento na p\u00e1gina, desde <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-menu-plugins\/\">menus de navega\u00e7\u00e3o<\/a> at\u00e9 a marca do site, widgets de barra lateral, templates e muito mais.<\/p>\n<p>Mesmo que o WordPress 5.8 introduza v\u00e1rios recursos que se enquadram no escopo do <strong>Full Site Editing (FSE)<\/strong>,\u00a0n\u00e3o espere ver um ambiente de constru\u00e7\u00e3o de site totalmente visual, e o lan\u00e7amento do WordPress 5.8 abre uma esp\u00e9cie de fase beta p\u00fablica. De acordo com <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/08\/full-site-editing-scope-for-wp5-8\/\">Josepha Haden Chomphosy<\/a>:<\/p>\n<blockquote><p><em>O Full Site Editing \u00e9 uma cole\u00e7\u00e3o de projetos e juntos eles representam uma grande mudan\u00e7a, indiscutivelmente demais para um \u00fanico lan\u00e7amento. O contexto mais importante a ser compartilhado \u00e9 que n\u00e3o \u00e9 o envio como a experi\u00eancia completa e padr\u00e3o para os usu\u00e1rios. Um dos coment\u00e1rios mais claros do processo de fus\u00e3o da Fase Um foi que n\u00e3o houve tempo suficiente para que nossos extensores (ag\u00eancias, autores de temas, desenvolvedores de plugins, construtores de sites, etc.) se preparassem para as pr\u00f3ximas mudan\u00e7as.<\/em><\/p>\n<p><em>Com isso em mente, este processo de fus\u00e3o n\u00e3o ser\u00e1 um interruptor de ligar\/desligar. O foco agora n\u00e3o \u00e9 uma experi\u00eancia completa e matizada do usu\u00e1rio, mas mais um beta p\u00fablico aberto dentro do WordPress 5.8.<\/em><\/p><\/blockquote>\n<p>Portanto, o WordPress 5.8 n\u00e3o apresenta uma experi\u00eancia FSE perfeita e completa neste momento. Em vez disso, veremos novos recursos sendo adicionadas e melhoradas com o tempo, come\u00e7ando logo a partir da vers\u00e3o 5.8. Pela mesma raz\u00e3o, podemos presumir que o WordPress 5.8 n\u00e3o ter\u00e1 um impacto dram\u00e1tico na forma como estamos acostumados a construir sites.<\/p>\n<p>Na \u00e9poca deste escrito, os propriet\u00e1rios e administradores do site ainda t\u00eam que optar conscientemente pelo FSE instalando um tema de bloco, como o <a href=\"https:\/\/wordpress.org\/themes\/tt1-blocks\/\">Twenty-Twenty One Blocks<\/a> (a <a href=\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#the-twenty-twentyone-blocks-experiment\">vers\u00e3o baseada em bloco<\/a> do Twenty-Twenty One), e ativando o plugin Gutenberg.<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=a1Sf7PxfmLQ\"><\/kinsta-video><\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/handbook\/full-site-editing\/\">O Full Site Editing<\/a> engloba uma gama de subprojetos separados, incluindo editor do site, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">estilos globais<\/a>, bloco query loop, bloco de navega\u00e7\u00e3o, templates, temas de blocos e muito mais.\u00a0Mas o que mais se aproxima da Edi\u00e7\u00e3o de Sites no WordPress 5.8 \u00e9 o <strong>Modo de Edi\u00e7\u00e3o de Templates<\/strong> e os <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#theme-blocks\">blocos de temas<\/a> correspondentes dispon\u00edveis para usar nesse modo, como veremos mais adiante neste artigo.<\/p>\n<p>A seguir, vamos mergulhar em alguns <strong>recursos FSE fundidas no Core com o WordPress 5.8<\/strong>.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Template editing mode<\/h3>\n<p>O <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/introducing-the-template-editor-in-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">Template editing mode<\/a> fornece uma maneira de criar templates de artigo\/p\u00e1gina usando blocos. \u00c9 uma \u00f3tima maneira de reduzir a complexidade da constru\u00e7\u00e3o do site, permitindo que os usu\u00e1rios aproveitem v\u00e1rios recursos de edi\u00e7\u00e3o do site de fora da interface do editor do site enquanto se acostumam a trabalhar com blocos. Isto tamb\u00e9m \u00e9 \u00f3timo para usu\u00e1rios que n\u00e3o usam temas baseados em blocos, mas ainda assim procuram uma maneira f\u00e1cil de criar e editar templates a partir da interface do editor de blocos.<\/p>\n<p>Personalizar temas nunca foi t\u00e3o f\u00e1cil no WordPress antes. Agora voc\u00ea n\u00e3o precisa mais <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">construir um child theme (tema filho)<\/a> para criar seus templates personalizados. Com o WordPress 5.8, a Edi\u00e7\u00e3o de Templates n\u00e3o est\u00e1 limitada a temas de bloqueio, mas tamb\u00e9m est\u00e1 <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\" target=\"_blank\" rel=\"noopener noreferrer\">dispon\u00edvel para voc\u00ea usar com temas cl\u00e1ssicos<\/a>, embora voc\u00ea tenha que optar por habilit\u00e1-los para temas cl\u00e1ssicos.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>A edi\u00e7\u00e3o de templates pode ser usada em temas cl\u00e1ssicos, incluindo um arquivo theme.json ou suporte <code>'block-templates'<\/code>. Ele n\u00e3o pode ser desativado para temas de bloco.<\/p>\n<\/aside>\n\n<figure style=\"width: 2873px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-the-template-editor.jpg\" alt=\"O editor de modelos.\" width=\"2873\" height=\"1385\"><figcaption class=\"wp-caption-text\">O editor de templates.<\/figcaption><\/figure>\n<p>Para criar um novo template, basta habilitar o template editing mode na barra lateral de <strong>configura\u00e7\u00f5es. <\/strong>Um novo painel de <strong>Template <\/strong>est\u00e1 agora dispon\u00edvel para os usu\u00e1rios mudarem o modo de edi\u00e7\u00e3o (veja a nota de lan\u00e7amento do <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">Gutenberg 10.5<\/a>).<\/p>\n<figure style=\"width: 1676px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-panel.jpg\" alt=\"Painel de modelos no editor de blocos Sidebar.\" width=\"1676\" height=\"942\"><figcaption class=\"wp-caption-text\">Painel template no editor de blocos Sidebar.<\/figcaption><\/figure>\n<p>A partir do painel <strong>template<\/strong>, voc\u00ea pode criar um novo template ou editar um template j\u00e1 existente.<\/p>\n<figure style=\"width: 1674px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/create-custom-template.jpg\" alt=\"Defini\u00e7\u00e3o de um nome modelo.\" width=\"1674\" height=\"938\"><figcaption class=\"wp-caption-text\">Defini\u00e7\u00e3o de um nome template.<\/figcaption><\/figure>\n<p>Para criar um novo template, clique em <strong>Novo<\/strong>. Em seguida, digite um nome do template no modal e clique em <strong>Criar<\/strong>, e voc\u00ea est\u00e1 pronto para ir.<\/p>\n<figure style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode.jpg\" alt=\"Modo de edi\u00e7\u00e3o de modelos no WordPress 5.8.\" width=\"2876\" height=\"1314\"><figcaption class=\"wp-caption-text\">Template editing mode no WordPress 5.8.<\/figcaption><\/figure>\n<p>No template editing mode, voc\u00ea pode construir seus templates usando todos os blocos dispon\u00edveis, incluindo blocos FSE como T\u00edtulo do Site, Site Tagline, Login\/out, e muitos mais.<\/p>\n<p>Uma vez satisfeito com suas edi\u00e7\u00f5es, voc\u00ea pode voltar ao modo Post Editing e salvar o template separadamente do conte\u00fado do artigo\/p\u00e1gina, como mostrado na imagem abaixo:<\/p>\n<figure style=\"width: 2076px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/save-template.jpg\" alt=\"As op\u00e7\u00f5es Save Template (Salvar modelo).\" width=\"2076\" height=\"994\"><figcaption class=\"wp-caption-text\">As op\u00e7\u00f5es Save Template (Salvar template).<\/figcaption><\/figure>\n<p>Os templates s\u00e3o armazenados em seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/banco-de-dados-wordpress\/\">banco de dados WordPress<\/a> como tipos de postagem personalizados nomeados <code>wp_template<\/code>. Isto n\u00e3o s\u00f3 permite que voc\u00ea edite um templateda interface do editor, mas tamb\u00e9m facilita a importa\u00e7\u00e3o ou exporta\u00e7\u00e3o \u00e0 vontade. Voc\u00ea tamb\u00e9m pode usar um template em diferentes sites (no momento da reda\u00e7\u00e3o, este recurso s\u00f3 est\u00e1 dispon\u00edvel se voc\u00ea ativar o plugin Gutenberg).<\/p>\n<figure style=\"width: 1566px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/export-templates.png\" alt=\"Exporta\u00e7\u00e3o de gabaritos e pe\u00e7as de gabaritos.\" width=\"1566\" height=\"1116\"><figcaption class=\"wp-caption-text\">Exporta\u00e7\u00e3o de gabaritos e pe\u00e7as de gabaritos.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Note que se voc\u00ea definir um template de bloco para uma p\u00e1gina ou um artigo de blog, o template PHP regular n\u00e3o ser\u00e1 mais usado para gerar a p\u00e1gina. O template de bloco ser\u00e1 usado em seu lugar.<\/p>\n<\/aside>\n\n<p>O template editing mode ainda tem um pequeno buggy no momento desta reda\u00e7\u00e3o, como relatado nesta <a href=\"https:\/\/make.wordpress.org\/test\/2021\/05\/26\/fse-program-testing-call-7-polished-portfolios\/\" target=\"_blank\" rel=\"noopener noreferrer\">chamada para testes<\/a> e <a href=\"https:\/\/wptavern.com\/fse-outreach-7-building-a-portfolio-in-the-upcoming-template-editing-mode\" target=\"_blank\" rel=\"noopener noreferrer\">nesta experi\u00eancia de Justin Tadlock<\/a>.<\/p>\n<figure style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode-issue.jpg\" alt=\"Problema de alinhamento de largura total em Twenty Twenty-One classic theme\" width=\"2314\" height=\"916\"><figcaption class=\"wp-caption-text\">Problema de alinhamento de largura total em Twenty Twenty-One classic theme<\/figcaption><\/figure>\n<p>Mas tudo o que \u00e9 preciso \u00e9 um pouco de paci\u00eancia e esperar que as <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Template%20Editing%20Mode\" target=\"_blank\" rel=\"noopener noreferrer\">principais quest\u00f5es<\/a> sejam resolvidas para entender completamente como o template editing mode mudar\u00e1 a maneira como voc\u00ea personaliza o visual e a sensa\u00e7\u00e3o de seus sites.<\/p>\n<p>Os usu\u00e1rios n\u00e3o precisar\u00e3o mais das habilidades dos desenvolvedores para obter controle completo sobre o layout e a apar\u00eancia geral do site.<\/p>\n<figure style=\"width: 2316px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/cover-block-in-template-editing-mode.jpg\" alt=\"A quest\u00e3o do alinhamento em largura total foi resolvida.\" width=\"2316\" height=\"1130\"><figcaption class=\"wp-caption-text\">A quest\u00e3o do alinhamento em largura total foi resolvida.<\/figcaption><\/figure>\n<p>O template editing mode estava inicialmente <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\">dispon\u00edvel tanto para temas de blocos quanto para temas cl\u00e1ssicos<\/a>. Ap\u00f3s uma discuss\u00e3o cuidadosa no canal 5.8, foi decidido fazer com que o editor de templates optasse por temas cl\u00e1ssicos e optasse por n\u00e3o editar os temas de blocos (veja tamb\u00e9m o n\u00famero n\u00ba <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32858\">32858<\/a>).<\/p>\n<p>De acordo com <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/07\/08\/summary-theme-features-in-wordpress-5-8\/\">Carolina Nymark<\/a>:<\/p>\n<blockquote><p>Inicialmente, o template editing mode estava habilitada para todos os temas. Os desenvolvedores de temas levantaram preocupa\u00e7\u00f5es de que eles n\u00e3o poderiam atualizar todos os temas cl\u00e1ssicos existentes para suportar este novo recurso. Com uma mudan\u00e7a tardia, o esquadr\u00e3o de lan\u00e7amento e a equipe de reda\u00e7\u00e3o optaram por alterar a template editing mode para optar pela edi\u00e7\u00e3o de temas cl\u00e1ssicos.<\/p><\/blockquote>\n<p>Para optar por temas cl\u00e1ssicos, agora os desenvolvedores devem adicionar suporte a temas:<\/p>\n<pre><code class=\"language-php\">add_theme_support( 'block-templates' );<\/code><\/pre>\n<p>Temas cl\u00e1ssicos usando o <em>theme.json <\/em>pode optar por n\u00e3o participar removendo o suporte a temas:<\/p>\n<pre><code class=\"language-php\">remove_theme_support(  'block-templates' );<\/code><\/pre>\n<p>Para uma vis\u00e3o mais detalhada de como o template editing mode funciona no WordPress 5.8 e alguns exemplos \u00fateis de uso, certifique-se de assistir a este v\u00eddeo de Anne McCarty:<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=Z571V_jlD-o\"><\/kinsta-video><\/p>\n<p>\u00a0<\/p>\n<h3>Blocos de temas<\/h3>\n<p>Como mencionado anteriormente, o FSE n\u00e3o \u00e9 um recurso \u00fanico, mas um conjunto completo de recursos de constru\u00e7\u00e3o do site n\u00e3o apenas relacionadas com o editor do site. O <a href=\"#template-editing-mode\">template editing mode<\/a> \u00e9 apenas um exemplo disso. Mas junto com a edi\u00e7\u00e3o de templates, o WordPress 5.8 tamb\u00e9m traz muitos <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/20\/full-site-editing-go-no-go-next-steps\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blocos de temas<\/a> que podem mostrar informa\u00e7\u00f5es dinamicamente recuperadas do banco de dados. Alguns destes blocos tamb\u00e9m podem ser usados em contextos n\u00e3o-FSE (ver edi\u00e7\u00e3o n\u00ba <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">28744<\/a>).<\/p>\n<figure style=\"width: 1124px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/fse-blocks.jpg\" alt=\"Blocos completos do editor do site dispon\u00edveis em contextos n\u00e3o-FSE desde o WordPress 5.8.\" width=\"1124\" height=\"1798\"><figcaption class=\"wp-caption-text\">Blocos completos do editor do site dispon\u00edveis em contextos n\u00e3o-FSE desde o WordPress 5.8.<\/figcaption><\/figure>\n<p><strong>Os blocos de temas trazem funcionalidades de etiquetas de template para temas cl\u00e1ssicos<\/strong>, e voc\u00ea pode us\u00e1-los da mesma forma que os blocos normais. Por exemplo, voc\u00ea pode adicionar tags do artigo ou a imagem em destaque do artigo em qualquer parte do conte\u00fado do artigo ou do template. Para ter uma id\u00e9ia do n\u00famero de blocos de temas adicionados ao n\u00facleo com o WordPress 5.8, basta digitar <strong>\/post <\/strong>no espa\u00e7o reservado aos blocos:<\/p>\n<figure style=\"width: 662px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/post-related-blocks.png\" alt=\"Blocos tem\u00e1ticos sugeridos.\" width=\"662\" height=\"864\"><figcaption class=\"wp-caption-text\">Blocos de temas sugeridos.<\/figcaption><\/figure>\n<p>Um \u00fatil bloco de tema dispon\u00edvel com o WordPress 5.8 \u00e9 o bloco <strong>Login\/out<\/strong>, que fornece links para login e logout. Opcionalmente, ele pode exibir o formul\u00e1rio de login em vez de um link. Os administradores do site tamb\u00e9m podem personalizar o redirecionamento do alvo (ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29766\">29766<\/a>).<\/p>\n<figure style=\"width: 1948px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/login-out-block.jpg\" alt=\"Login\/out bloqueiam suas configura\u00e7\u00f5es no editor de blocos.\" width=\"1948\" height=\"770\"><figcaption class=\"wp-caption-text\">Login\/out bloqueiam suas configura\u00e7\u00f5es no editor de blocos.<\/figcaption><\/figure>\n<p>Para uma vis\u00e3o mais pr\u00f3xima dos blocos FSE, veja a edi\u00e7\u00e3o &#8220;Enabling Full Site Editor blocks in classic themes&#8221; <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\" target=\"_blank\" rel=\"noopener noreferrer\">no Github<\/a>.<\/p>\n<h3>O bloco query loop<\/h3>\n<p>Quantas vezes voc\u00ea j\u00e1 se viu em uma situa\u00e7\u00e3o em que precisa exibir uma lista personalizada de postagens em blogs ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-publicacoes-personalizadas-wordpress\/\">tipos de postagens personalizadas<\/a>? Pense em produtos, eventos, bens im\u00f3veis&#8230; \u00c9 claro que voc\u00ea tem toneladas de plugins para escolher, mas a capacidade de criar consultas altamente personalizadas muitas vezes requer habilidades do desenvolvedor para lidar com o <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\">Loop do WordPress<\/a>.<\/p>\n<p>Com a introdu\u00e7\u00e3o do <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">bloco query loop<\/a> no WordPress Core, os propriet\u00e1rios e administradores do site podem criar listas de postagens e CPTs sem escrever c\u00f3digo complexo ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">contratar um desenvolvedor<\/a>, pelo menos nos casos mais comuns de uso.<\/p>\n<p>Ent\u00e3o, o que faz o bloco query loop?<\/p>\n<p>Em resumo, ele faz o mesmo trabalho que o WordPress Loop, mas no contexto visual do editor de blocos.<\/p>\n<p>O bloco query loop realiza uma consulta com base nas configura\u00e7\u00f5es do usu\u00e1rio sobre o banco de dados do WordPress, percorre cada postagem recuperada e exibe os dados na p\u00e1gina.<\/p>\n<p>Ap\u00f3s <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">intenso desenvolvimento<\/a>, este bloco atingiu sua estrutura atual e agora <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32283\">consiste em dois blocos aninhados<\/a>: os blocos <strong>Query <\/strong>e <strong>Post Template.<\/strong>.<\/p>\n<figure style=\"width: 2126px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/query-loop-list-view.jpg\" alt=\"Vista de lista de um bloco de consulta.\" width=\"2126\" height=\"1124\"><figcaption class=\"wp-caption-text\">Vista da lista de um bloco query loop.<\/figcaption><\/figure>\n<p>Sendo um recurso avan\u00e7ado, o bloco query loop requer algumas configura\u00e7\u00f5es.<\/p>\n<p>Primeiro, voc\u00ea pode escolher entre diferentes <a href=\"https:\/\/kinsta.com\/pt\/blog\/novo-wordpress-5-5\/#block-patterns\">padr\u00f5es de blocos<\/a> listados no Carrossel e Grid view. Depois de escolher seu padr\u00e3o, basta clicar em <strong>Escolher<\/strong>, e o bloco query loop gerar\u00e1 sua lista personalizada de postagens.<\/p>\n<figure style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block-grid-view.jpg\" alt=\"Consulta de padr\u00f5es de blocos de blocos em Grid view.\" width=\"1262\" height=\"1374\"><figcaption class=\"wp-caption-text\">Consulta de padr\u00f5es de blocos de blocos em Grid view.<\/figcaption><\/figure>\n<p>Se voc\u00ea clicar em <strong>Start blank<\/strong>, voc\u00ea ver\u00e1 uma lista de quatro varia\u00e7\u00f5es de blocos Core: <strong>T\u00edtulo e Data; T\u00edtulo e Excerto; T\u00edtulo, Data e Excerto; <\/strong>e <strong>Imagem, Data<\/strong> <strong>e T\u00edtulo <\/strong>(ver <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">Oferecendo Padr\u00f5es na Configura\u00e7\u00e3o do Bloco<\/a>).<\/p>\n<figure style=\"width: 1238px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-loop-variations-1.png\" alt=\"Varia\u00e7\u00f5es de blocos de blocos de consulta.\" width=\"1238\" height=\"662\"><figcaption class=\"wp-caption-text\">Varia\u00e7\u00f5es do bloco query loop.<\/figcaption><\/figure>\n<p>Uma vez no lugar, selecionando o bloco query loop exibir\u00e1 as configura\u00e7\u00f5es do bloco lateral, onde voc\u00ea pode construir sua consulta. Voc\u00ea pode herdar a consulta da <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-uma-url\/\">URL<\/a> ou personalizar os argumentos da consulta: o tipo de postagens a serem inclu\u00eddas na lista, a ordem de exibi\u00e7\u00e3o e se as postagens devem ou n\u00e3o ser pegajosas.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode definir v\u00e1rios filtros, escolhendo entre categorias, autores e palavras-chave.<\/p>\n<figure style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block.jpg\" alt=\"O bloco de consulta com ajustes da barra lateral.\" width=\"2876\" height=\"1380\"><figcaption class=\"wp-caption-text\">O bloco query loop com ajustes da barra lateral.<\/figcaption><\/figure>\n<p>Al\u00e9m disso, um bot\u00e3o <strong>Exibir configura\u00e7\u00f5es <\/strong>na barra de ferramentas do bloco fornece mais configura\u00e7\u00f5es para controlar o n\u00famero de itens por p\u00e1gina, o offset e o n\u00famero m\u00e1ximo de p\u00e1ginas a mostrar.<\/p>\n<figure style=\"width: 1252px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block-display-settings.jpg\" alt=\"Exibir configura\u00e7\u00f5es de blocos de consulta.\" width=\"1252\" height=\"1152\"><figcaption class=\"wp-caption-text\">Exibir configura\u00e7\u00f5es do bloco query loop.<\/figcaption><\/figure>\n<p>Sim, o bloco query loop \u00e9 uma ferramenta poderosa, permitindo que os propriet\u00e1rios de sites criem listas altamente personalizadas de postes e tipos de postes personalizados.<\/p>\n<p>Mas se voc\u00ea percorrer os par\u00e2metros da classe <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP_Query<\/a>, \u00e9 claro que o n\u00edvel de personaliza\u00e7\u00e3o poss\u00edvel usando o c\u00f3digo \u00e9 muito mais granular do que o que \u00e9 poss\u00edvel usando o bloco query loop.<\/p>\n<p>No entanto, \u00e9 de fato uma ferramenta valiosa e flex\u00edvel que se presta a muitos casos de uso e, muito provavelmente, veremos mais aperfei\u00e7oamentos no futuro.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O bloco query loop e Bloco Post Template foram renomeados v\u00e1rias vezes nas \u00faltimas semanas. O nome final foi alcan\u00e7ado com <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/24\/whats-new-in-gutenberg-10-9-23-june\/\">Gutenberg 10.9<\/a>.<\/p>\n<\/aside>\n\n<h3><strong>Persistent List View <\/strong>do Post Editor<\/h3>\n<p>Outro recurso do FSE estendida ao Post Editor \u00e9 a <strong>Persistent List View<\/strong>. Antes do WordPress 5.8 (e <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">Gutenberg 10.7<\/a>), a List View era exibida em um popover. Ao mover o foco para fora do popover, a lista desapareceria.<\/p>\n<p>Por outro lado, o Editor do Site exibiu a List View em uma barra lateral contendo toda a \u00e1rvore de blocos.<\/p>\n<p>Com o WordPress 5.8, a visualiza\u00e7\u00e3o de lista \u00e9 agora exibida em uma barra lateral no Post Editor, permitindo que os usu\u00e1rios naveguem na \u00e1rvore de blocos mais r\u00e1pida e precisa.<\/p>\n<p>.<\/p>\n<figure style=\"width: 698px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/persistent-list-view.png\" alt=\"A barra lateral de visualiza\u00e7\u00e3o da lista no WordPress 5.8.\" width=\"698\" height=\"1182\"><figcaption class=\"wp-caption-text\">A barra lateral de visualiza\u00e7\u00e3o da lista no WordPress 5.8.<\/figcaption><\/figure>\n<p>Clicando em um item da List View destaca o item da lista e move o foco para o bloco correspondente na tela do Post Editor. Al\u00e9m disso, se voc\u00ea pairar sobre os itens na List View, tanto o item como o bloco correspondente no Post Editor s\u00e3o real\u00e7ados.<\/p>\n<figure style=\"width: 2158px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-enhancement-1.jpg\" alt=\"Passando por cima dos itens da Lista View.\" width=\"2158\" height=\"1184\"><figcaption class=\"wp-caption-text\">Passando por cima dos itens da Lista View.<\/figcaption><\/figure>\n<p>Por \u00faltimo, a adi\u00e7\u00e3o de uma \u00e2ncora a um bloco tamb\u00e9m aparecer\u00e1 ao lado do item correspondente na visualiza\u00e7\u00e3o da lista.<\/p>\n<figure style=\"width: 2496px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-anchor-2.jpg\" alt=\"Adicionando uma \u00e2ncora aos blocos no WordPress 5.8.\" width=\"2496\" height=\"1156\"><figcaption class=\"wp-caption-text\">Adicionando uma \u00e2ncora aos blocos no WordPress 5.8.<\/figcaption><\/figure>\n<p>Com todos esses aprimoramentos na visualiza\u00e7\u00e3o de lista, a navega\u00e7\u00e3o em documentos complexos deve ser muito mais f\u00e1cil.<\/p>\n<h2>Editor de Widgets Baseados em Blocos e Bloco de Widgets no Customizer<\/h2>\n<p>O <strong>editor de widgets baseado em blocos <\/strong>\u00e9 um <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/projects\/27\">amplo projeto<\/a> que visa trazer a interface do <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">editor de blocos para os widgets de temas cl\u00e1ssicos<\/a>.<\/p>\n<p>O novo editor de widgets oferece muitas vantagens para a grande maioria ainda usando temas cl\u00e1ssicos. Ao mesmo tempo, ele permite que eles se familiarizem com a interface de bloco antes que ela se torne padr\u00e3o para todos os <a href=\"https:\/\/kinsta.com\/pt\/blog\/funcoes-usuario-wordpress\/\">usu\u00e1rios do WordPress<\/a>.<\/p>\n<figure style=\"width: 2150px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/block-widgets.jpg\" alt=\"Modal de blocos de widgets.\" width=\"2150\" height=\"1254\"><figcaption class=\"wp-caption-text\">Modal de blocos de widgets.<\/figcaption><\/figure>\n<p>Como <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">Anne McCarty aponta<\/a>, os widgets baseados em blocos oferecem v\u00e1rias vantagens, incluindo as seguintes:<\/p>\n<ul>\n<li>Agora voc\u00ea pode criar <strong>layouts em barras laterais<\/strong>, cabe\u00e7alhos e rodap\u00e9s usando colunas, separadores, espa\u00e7adores e outros blocos de design.<\/li>\n<li>Widgets agora suportam <strong>rich text editing\u00a0<\/strong>por padr\u00e3o, sem a necessidade dos usu\u00e1rios adicionarem c\u00f3digo personalizado ou incorporarem um editor HTML de terceiros com um plugin.<\/li>\n<li>Muitos widgets baseados em atalhos est\u00e3o agora <strong>dispon\u00edveis como blocos<\/strong>, simplificando a experi\u00eancia de edi\u00e7\u00e3o.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">Andrei Draganescu<\/a> tamb\u00e9m enfatiza as vantagens que podemos obter ao sermos capazes de editar widgets a partir de uma interface baseada em blocos:<\/p>\n<blockquote><p>O principal benef\u00edcio de atualizar a funcionalidade dos widgets para blocos vem da capacidade de editar diretamente os widgets usando a intera\u00e7\u00e3o familiar de blocos que voc\u00ea usa ao editar uma p\u00e1gina ou postar em seu site. Ser capaz de usar blocos abre toneladas de novas possibilidades criativas, desde mini layouts sem c\u00f3digo at\u00e9 o acesso \u00e0 vasta biblioteca de blocos centrais e de terceiros para criar conte\u00fado.<\/p><\/blockquote>\n<p>Voc\u00ea n\u00e3o precisa se preocupar que seus widgets possam parar de trabalhar com o WordPress 5.8 porque a <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">comunidade tem trabalhado duro<\/a> para <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/07\/whats-next-in-gutenberg-may-2021\/\">garantir a compatibilidade com vers\u00f5es anteriores<\/a> para que &#8220;os widgets existentes e os de terceiros continuem a funcionar e possam ser usados junto com os blocos&#8221; (ver <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">Editor de widgets baseados em blocos no WordPress 5.8<\/a>).<\/p>\n<p>Mas novamente, para evitar qualquer problema de compatibilidade em sua instala\u00e7\u00e3o WordPress existente, n\u00e3o se esque\u00e7a de testar a nova vers\u00e3o em um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/ambiente-de-teste\/\">ambiente de teste<\/a> antes de atualizar seu site ao vivo.<\/p>\n<p>Para aqueles que optarem por n\u00e3o usar o editor de widgets baseado em blocos agora mesmo, ainda \u00e9 poss\u00edvel restaurar a tela cl\u00e1ssica de <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\">widgets<\/a> de tr\u00eas maneiras diferentes:<\/p>\n<ol>\n<li>Voc\u00ea pode instalar o\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/classic-widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugin oficial Classic Widgets<\/a>, que restaura a interface anterior da tela dos widgets. O plugin \u201cser\u00e1 suportado e mantido at\u00e9 pelo menos 2022, ou pelo tempo que for necess\u00e1rio\u201d.<\/li>\n<li>Os desenvolvedores de temas podem desativar o editor de widgets baseados em blocos removendo o suporte a temas, como de costume::\n<pre><code class=\"language-php\">remove_theme_support( 'widgets-block-editor' );<\/code><\/pre>\n<\/li>\n<li>Um novo filtro de\u00a0<code>use_widgets_block_editor<\/code> tamb\u00e9m pode ser usado:\n<pre><code class=\"language-php\">add_filter( 'use_widgets_block_editor', '__return_false' );<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>Veja tamb\u00e9m <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/opting-out\/\">Restaurando o cl\u00e1ssico editor de widgets<\/a> em <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/overview\/\">Vis\u00e3o Geral do Editor de Blocos de Widgets<\/a>.<\/p>\n<h3>Bloco Widgets no Customizer<\/h3>\n<p>Como parte do mesmo projeto, o WordPress 5.8 tamb\u00e9m traz <strong>widgets de bloco no customizador<\/strong>.<\/p>\n<figure style=\"width: 598px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-block-widgets.jpg\" alt=\"Bloco de widgets no customizador.\" width=\"598\" height=\"1398\"><figcaption class=\"wp-caption-text\">Bloco de widgets no customizador.<\/figcaption><\/figure>\n<p>Adicionar um widget baseado em blocos no customizador \u00e9 bastante simples. Voc\u00ea pode abrir o <strong>painel de inser\u00e7\u00e3o de widget<\/strong> clicando no \u00edcone mais no canto superior direito do painel de widgets.<\/p>\n<figure style=\"width: 1706px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-inserter.jpg\" alt=\"O inseridor de widgets personalizado.\" width=\"1706\" height=\"1298\"><figcaption class=\"wp-caption-text\">O inseridor de widgets personalizado.<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode lan\u00e7ar o <strong>quick inserter<\/strong> a partir da parte inferior do painel de widgets, como mostrado na imagem a seguir.<\/p>\n<figure style=\"width: 1212px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-quick-inserter.jpg\" alt=\"O inseridor r\u00e1pido de widgets personalizados.\" width=\"1212\" height=\"886\"><figcaption class=\"wp-caption-text\">O inseridor r\u00e1pido de widgets personalizados.<\/figcaption><\/figure>\n<p>No momento desta reda\u00e7\u00e3o, a nova interface de edi\u00e7\u00e3o de widgets ainda requer <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Widgets%20Customizer\" target=\"_blank\" rel=\"noopener noreferrer\">melhorias e corre\u00e7\u00f5es de bugs<\/a>, mas as possibilidades de personaliza\u00e7\u00e3o s\u00e3o praticamente ilimitadas.<\/p>\n<p>Basicamente, a partir do WordPress 5.8, voc\u00ea ter\u00e1 o poder do <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor de blocos<\/a> no customizador, e poder\u00e1 construir barras laterais altamente personalizadas, sem complica\u00e7\u00f5es.<\/p>\n<figure style=\"width: 924px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/show-more-settings.jpg\" alt=\"Mostrar mais configura\u00e7\u00f5es.\" width=\"924\" height=\"1066\"><figcaption class=\"wp-caption-text\">Mostrar mais configura\u00e7\u00f5es.<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">editor de widgets baseado em blocos dev-note<\/a> fornece uma vis\u00e3o mais aprofundada do editor de widgets baseado em blocos, com exemplos e recursos para desenvolvedores.<\/p>\n<h2>Recursos e melhorias do Block Editor<\/h2>\n<p>Al\u00e9m da primeira implementa\u00e7\u00e3o do FSE, o WordPress 5.8 tamb\u00e9m traz novos recursos e melhorias a v\u00e1rios elementos do editor de blocos, que melhoram significativamente a experi\u00eancia geral de edi\u00e7\u00e3o.<\/p>\n<p>Estas mudan\u00e7as incluem:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"9\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Melhorias na m\u00eddia e blocos de texto<\/h3>\n<p>A transforma\u00e7\u00e3o de um bloco em um bloco de <strong>colunas <\/strong>j\u00e1 \u00e9 poss\u00edvel h\u00e1 algum tempo. No entanto, todos os blocos transformados em blocos de colunas com uma \u00fanica coluna. Isto poderia levar a resultados sub\u00f3timos para o bloco de<strong> m\u00eddia e texto<\/strong>, para o qual uma \u00fanica coluna geralmente n\u00e3o \u00e9 adequada.<\/p>\n<figure style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-transforms.jpg\" alt=\"Transforma\u00e7\u00f5es e estilos de m\u00eddia e de bloco de texto.\" width=\"2314\" height=\"1110\"><figcaption class=\"wp-caption-text\">Transforma\u00e7\u00f5es e estilos de m\u00eddia e de bloco de texto.<\/figcaption><\/figure>\n<p>A partir do WordPress 5.8 (e <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">Gutenberg 10.2<\/a>), a transforma\u00e7\u00e3o do bloco de<strong> m\u00eddia e texto <\/strong>em um bloco de<strong> colunas <\/strong>adiciona automaticamente duas colunas: uma para a imagem e outra para o texto.<\/p>\n<figure style=\"width: 2018px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-to-two-columns.jpg\" alt=\"Duas colunas transformadas para m\u00eddia e texto.\" width=\"2018\" height=\"652\"><figcaption class=\"wp-caption-text\">Duas colunas transformadas para m\u00eddia e texto.<\/figcaption><\/figure>\n<h3>Melhorias em blocos Reutiliz\u00e1veis<\/h3>\n<p>Os blocos reutiliz\u00e1veis permitem ao usu\u00e1rio salvar um bloco ou um grupo de blocos para reutilizar posteriormente em qualquer artigo ou p\u00e1gina de um site. Isto \u00e9 \u00fatil principalmente para usu\u00e1rios que incluem repetidamente o mesmo bloco ou grupo de blocos em diferentes artigos\/p\u00e1ginas.<\/p>\n<figure style=\"width: 1290px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-modal.jpg\" alt=\"Um modal para o fluxo de cria\u00e7\u00e3o de blocos reutiliz\u00e1veis.\" width=\"1290\" height=\"964\"><figcaption class=\"wp-caption-text\">Um modal para o fluxo de cria\u00e7\u00e3o de blocos reutiliz\u00e1veis.<\/figcaption><\/figure>\n<p>Com o WordPress 5.8, os blocos reutiliz\u00e1veis s\u00e3o visualmente mais claros, tornando-os mais f\u00e1ceis de serem gerenciados pelos usu\u00e1rios do WordPress.<\/p>\n<figure style=\"width: 2084px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block.jpg\" alt=\"Um bloco reutiliz\u00e1vel no WordPress 5.8.\" width=\"2084\" height=\"724\"><figcaption class=\"wp-caption-text\">Um bloco reutiliz\u00e1vel no WordPress 5.8.<\/figcaption><\/figure>\n<p>Aqui est\u00e1 uma lista r\u00e1pida de melhorias de blocos reutiliz\u00e1veis que os usu\u00e1rios encontrar\u00e3o ap\u00f3s atualizar seus sites para o WordPress 5.8:<\/p>\n<ul>\n<li>Ao criar um bloco reutiliz\u00e1vel, um modal agora permite que os usu\u00e1rios atribuam um nome ao bloco.<\/li>\n<li>O nome do bloco reutiliz\u00e1vel \u00e9 agora exibido na barra de ferramentas do bloco, na lista de navega\u00e7\u00e3o e no breadcrumb.<\/li>\n<li>Quando um bloco reutiliz\u00e1vel \u00e9 selecionado, os blocos reutiliz\u00e1veis s\u00e3o agora delineados. Isto marca uma melhoria significativa na usabilidade, pois permite identificar facilmente o bloco pai e seu conte\u00fado.<\/li>\n<li>Agora \u00e9 poss\u00edvel modificar o nome do bloco no inspetor da barra lateral.<\/li>\n<\/ul>\n<figure style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-outlines.jpg\" alt=\"Esbo\u00e7os de blocos reutiliz\u00e1veis.\" width=\"1262\" height=\"658\"><figcaption class=\"wp-caption-text\">Esbo\u00e7os de blocos reutiliz\u00e1veis.<\/figcaption><\/figure>\n<h3>Barras de ferramentas de blocos normalizadas<\/h3>\n<p>V\u00e1rias barras de ferramentas de blocos foram rearranjadas para fornecer uma <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\" target=\"_blank\" rel=\"noopener noreferrer\">IU consistente entre blocos<\/a> e melhorar a experi\u00eancia do usu\u00e1rio. Agora, os controles da barra de ferramentas s\u00e3o agrupados seguindo a ordem sem\u00e2ntica &#8220;meta, n\u00edvel de bloco, em linha&#8221;.<\/p>\n<figure style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/heading-block-toolbar.png\" alt=\"Barra de ferramentas do bloco de cabe\u00e7otes.\" width=\"950\" height=\"294\"><figcaption class=\"wp-caption-text\">Barra de ferramentas do bloco de cabe\u00e7otes.<\/figcaption><\/figure>\n<p>Desde <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg 10.1<\/a> e <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg 10.3<\/a>, todo um conjunto de barras de ferramentas de blocos foi normalizado. Estas incluem uma <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29205\" target=\"_blank\" rel=\"noopener noreferrer\">imagem<\/a>, bot\u00e3o, bot\u00f5es, lista, cabe\u00e7alho, par\u00e1grafo, cita\u00e7\u00e3o, \u00e1udio, arquivo, m\u00eddia e texto, v\u00eddeo e muito mais.<\/p>\n<p>De acordo com <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/25983\" target=\"_blank\" rel=\"noopener noreferrer\">Matias Ventura<\/a>:<\/p>\n<blockquote><p>Os agrupamentos sem\u00e2nticos que temos na barra de ferramentas &#8211; meta, n\u00edvel de bloco, em linha &#8211; tamb\u00e9m devem ter uma representa\u00e7\u00e3o visual com as bordas. Neste momento, controles separados de n\u00edvel de bloco t\u00eam representa\u00e7\u00f5es diferentes, incluindo casos como Navega\u00e7\u00e3o, onde cada um tem fronteiras.<\/p><\/blockquote>\n<figure style=\"width: 953px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar.png\" alt=\"Barra de ferramentas de blocos de imagem normalizada.\" width=\"953\" height=\"280\"><figcaption class=\"wp-caption-text\">Barra de ferramentas de blocos de imagem normalizada.<\/figcaption><\/figure>\n<p>Assim, desde o WordPress 5.8, os grupos da barra de ferramentas de bloco <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/designers\/block-design\/#group-block-toolbar-controls-with-related-items\" target=\"_blank\" rel=\"noopener noreferrer\">controlam em segmentos<\/a> cercados por bordas. Al\u00e9m disso, a barra de ferramentas de bloco<\/p>\n<ul>\n<li>O segmento da <strong>Meta <\/strong>cont\u00e9m controles do tipo bloco, como o interruptor de bloco, a al\u00e7a de arraste e o controle do movimentador.<\/li>\n<li>O segmento do <strong>n\u00edvel de bloco <\/strong>cont\u00e9m ferramentas de bloco espec\u00edficas que afetam todo o conte\u00fado, tais como alinhamento em um bloco de par\u00e1grafo ou vincula\u00e7\u00e3o em um bloco de imagem.<\/li>\n<li>O <strong>n\u00edvel Inline\/Outro <\/strong>segmento cont\u00e9m ferramentas de transforma\u00e7\u00e3o em linha, tais como a formata\u00e7\u00e3o em linha em um bloco de texto.<\/li>\n<li>O menu <strong>Mais <\/strong>inclui ferramentas adicionais.<\/li>\n<\/ul>\n<p>A imagem abaixo compara a barra de ferramentas de blocos de imagem no WordPress 5.7 e 5.8:<\/p>\n<figure style=\"width: 902px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar-before-after.png\" alt=\"Barra de ferramentas de blocos de imagem no WordPress 5.7 vs WordPress 5.8.\" width=\"902\" height=\"466\"><figcaption class=\"wp-caption-text\">Barra de ferramentas de blocos de imagem no WordPress 5.7 vs WordPress 5.8.<\/figcaption><\/figure>\n<h3>Melhorias na barra de ferramentas superior<\/h3>\n<p>Com o modo da barra de ferramentas superior ativado nas vers\u00f5es anteriores do WordPress, a barra de ferramentas superior e a barra de ferramentas de bloco eram exibidas lado a lado, como mostrado na imagem a seguir:<\/p>\n<figure style=\"width: 2880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/wordpress-57-top-toolbar.jpg\" alt=\"A barra de ferramentas superior em telas largas no WordPress 5.7.\" width=\"2880\" height=\"1332\"><figcaption class=\"wp-caption-text\">A barra de ferramentas superior em telas largas no WordPress 5.7.<\/figcaption><\/figure>\n<p>Com o WordPress 5.8, permitir a visualiza\u00e7\u00e3o da barra de ferramentas superior fixar\u00e1 a barra de ferramentas do bloco no topo do editor, logo abaixo da barra de ferramentas superior. Isto acontece independentemente da largura do navegador e deve melhorar significativamente a experi\u00eancia do usu\u00e1rio.<\/p>\n<figure style=\"width: 2880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/wordpress-58-top-toolbar.jpg\" alt=\"A barra de ferramentas superior em telas largas no WordPress 5.8.\" width=\"2880\" height=\"1324\"><figcaption class=\"wp-caption-text\">A barra de ferramentas superior em telas largas no WordPress 5.8.<\/figcaption><\/figure>\n<p>Esta melhoria tamb\u00e9m traz mudan\u00e7as para os desenvolvedores, pois unifica as APIs da barra de ferramentas sob o componente <code>&lt;BlockTools \/&gt;<\/code>.\u00a0(ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31134\">31134<\/a>).<\/p>\n<h3>PDFs incorporados<\/h3>\n<p>Quando um arquivo PDF \u00e9 adicionado ao documento atrav\u00e9s do bloco de arquivos, uma nova alavanca lateral permite ativar\/desativar uma <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\" target=\"_blank\" rel=\"noopener noreferrer\">vers\u00e3o PDF incorporada<\/a> (ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30857\">30857<\/a>).<\/p>\n<figure style=\"width: 2080px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/embedded-pdf.jpg\" alt=\"Um PDF embutido no WordPress 5.8.\" width=\"2080\" height=\"1054\"><figcaption class=\"wp-caption-text\">Um PDF embutido no WordPress 5.8.<\/figcaption><\/figure>\n<p>Voc\u00ea pode arrastar o arquivo diretamente para a tela do editor ou simplesmente selecion\u00e1-lo da biblioteca. Tamb\u00e9m \u00e9 poss\u00edvel ajustar manualmente a altura do visualizador de PDF ou usando o controle da barra lateral.<\/p>\n<p>Todos os principais navegadores da web suportam o visualizador de PDF, <a href=\"https:\/\/caniuse.com\/pdf-viewer\" target=\"_blank\" rel=\"noopener noreferrer\">exceto os navegadores m\u00f3veis<\/a>.<\/p>\n<h3>Suporte de blocos Duotone<\/h3>\n<p>Um dos recursos mais interessantes fundidas no Core com o WordPress 5.8 \u00e9 o filtro duotone, introduzido pela primeira vez com o <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">Gutenberg 10.6<\/a>.<\/p>\n<figure style=\"width: 1256px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image.jpg\" alt=\"A nova ferramenta de design duotone em um bloco de imagem.\" width=\"1256\" height=\"1186\"><figcaption class=\"wp-caption-text\">A nova ferramenta de design duotone em um bloco de imagem.<\/figcaption><\/figure>\n<p>Dispon\u00edvel como um <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26752\" target=\"_blank\" rel=\"noopener noreferrer\">recurso de &#8220;suporte de blocos&#8221;<\/a>, o filtro de dois tons \u00e9 habilitado por padr\u00e3o na <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26751\" target=\"_blank\" rel=\"noopener noreferrer\">imagem<\/a> central e nos blocos de cobertura. No bloco de cobertura, no entanto, n\u00e3o funciona com <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/31662\" target=\"_blank\" rel=\"noopener noreferrer\">fundos fixos<\/a>.<\/p>\n<figure style=\"width: 1268px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-picker.jpg\" alt=\"O novo colhedor duotone no WordPress 5.8.\" width=\"1268\" height=\"998\"><figcaption class=\"wp-caption-text\">O novo colhedor duotone no WordPress 5.8.<\/figcaption><\/figure>\n<p>As barras de ferramentas de imagem e de blocos de cobertura agora exibem um controle de <strong>filtro Apply duotone <\/strong>mostrando um seletor duotone com muitas predefini\u00e7\u00f5es para escolher.<\/p>\n<p>Dois subcontroles permitem a personaliza\u00e7\u00e3o de sombras e destaques separadamente. O efeito \u00e9 aplicado com um <a href=\"https:\/\/www.w3.org\/TR\/SVG11\/filters.html\">filtro SVG<\/a> escondido com estilos em linha e aplicado usando um nome de classe espec\u00edfico.<\/p>\n<figure style=\"width: 2142px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-source-code.jpg\" alt=\"Inspe\u00e7\u00e3o do filtro SVG duotone em DevTools cromados.\" width=\"2142\" height=\"1038\"><figcaption class=\"wp-caption-text\">Inspe\u00e7\u00e3o do filtro SVG duotone no Chrome DevTools.<\/figcaption><\/figure>\n<p>A nova ferramenta vem em par com uma nova propriedade <code>color.__experimentalDuotone<\/code>, permitindo aos desenvolvedores adicionar o filtro duotone aos blocos ou partes de blocos em seu arquivo <strong>block.json <\/strong>(mais sobre isso em <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color\">refer\u00eancia a objetos coloridos<\/a>):<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\t__experimentalDuotone: '&gt; .duotone-img, &gt; .duotone-video',\n\t\tbackground: false,\n\t\ttext: false\n\t}\n}<\/code><\/pre>\n<p>Quando um bloco declara suporte para <code>color.__experimentalDuotone<\/code>, um atributo de <code>style<\/code> pode ser usado para definir <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color-__experimentalduotone\">cores padr\u00e3o personalizadas<\/a>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tduotone: [\n\t\t\t\t\t'#FFF',\n\t\t\t\t\t'#000\n\t\t\t\t]\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Abaixo voc\u00ea pode ver a mesma imagem com dois efeitos duot\u00f4nicos diferentes aplicados:<\/p>\n<figure style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-blue.jpg\" alt=\"Filtro de cor Duotone aplicado sobre uma imagem.\" width=\"1250\" height=\"850\"><figcaption class=\"wp-caption-text\">Filtro de cor Duotone aplicado sobre uma imagem.<\/figcaption><\/figure>\n<figure style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-yellow.jpg\" alt=\"Um filtro de cor diferente de dois tons aplicado sobre uma imagem.\" width=\"1250\" height=\"850\"><figcaption class=\"wp-caption-text\">Um filtro de cor diferente de dois tons aplicado sobre uma imagem.<\/figcaption><\/figure>\n<p>Os desenvolvedores podem definir <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">predefini\u00e7\u00f5es<\/a> duot\u00f4nicas no arquivo <strong>theme.json <\/strong>(ver <a href=\"#block-settings-and-styles-with-themejso\">pr\u00f3xima se\u00e7\u00e3o<\/a>), como mostrado no seguinte trecho:<\/p>\n<pre><code class=\"language-javascript\">{\n\"version\": 1,\n\"settings\": {\n\t\"color\": {\n\t\t\"duotone\": [\n\t\t\t{\n\t\t\t\t\"colors\": [ \"#000\", \"#7f7f7f\" ],\n\t\t\t\t\"slug\": \"black-and-white\",\n\t\t\t\t\"name\": \"dark-grayscale\"\n\t\t\t}\n\t\t],\n\t...<\/code><\/pre>\n<p>Voc\u00ea pode ler mais sobre filtros Duotone em <a href=\"https:\/\/wordpress.org\/news\/2021\/05\/coloring-your-images-with-duotone-filters\/\" target=\"_blank\" rel=\"noopener noreferrer\">Colorir suas imagens com filtros Duotone<\/a>.<\/p>\n<h3>Cores e bordas no bloco da tabela<\/h3>\n<p>O WordPress 5.8 tamb\u00e9m traz um par de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\" target=\"_blank\" rel=\"noopener noreferrer\">melhorias ao bloco da tabela<\/a>, incluindo um melhor controle sobre o <a href=\"https:\/\/kinsta.com\/pt\/blog\/esquemas-de-cores-site\/\">fundo da tabela e as cores do primeiro plano<\/a>.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/table-block-color-settings.jpg\" alt=\"Bloco de cores da tabela melhorada.\" width=\"1618\" height=\"1144\"><figcaption class=\"wp-caption-text\">Bloco de cores da tabela melhorada.<\/figcaption><\/figure>\n<p>Outro acr\u00e9scimo ao bloco da tabela \u00e9 o <strong>suporte do bloco de borda<\/strong>, que d\u00e1 aos usu\u00e1rios a capacidade de controlar a cor, o estilo e a largura da borda.<\/p>\n<p>Se o tema ativo suportar o novo recurso, um novo painel de <strong>ajustes de borda <\/strong>fornece tr\u00eas novos controles para personaliza\u00e7\u00f5es do usu\u00e1rio.<\/p>\n<figure style=\"width: 1984px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/border-block-support.jpg\" alt=\"Controles de blocos de fronteira em WordPress 5.8 e TT1 Blocos.\" width=\"1984\" height=\"1224\"><figcaption class=\"wp-caption-text\">Controles de blocos de fronteira em WordPress 5.8 e TT1 Blocos.<\/figcaption><\/figure>\n<p>Os desenvolvedores podem adicionar <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31265\">suporte de blocos de fronteira<\/a> a seus temas, adicionando o seguinte c\u00f3digo ao arquivo <strong>theme.json:<\/strong><\/p>\n<pre><code class=\"language-javascript\">\"border\": {\n\t\"customColor\": true,\n\t\"customStyle\": true,\n\t\"customWidth\": true\n}<\/code><\/pre>\n<h3>Melhorias no block inserter<\/h3>\n<p>No WordPress 5.8, o block inserter foi melhorado com <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\" target=\"_blank\" rel=\"noopener noreferrer\">v\u00e1rias adi\u00e7\u00f5es<\/a> (PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26938\">26938<\/a> e #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/21080#issuecomment-649231549\">21080<\/a>):<\/p>\n<figure style=\"width: 1354px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/block-inserter-keyboard-navigation.jpg\" alt=\"Pressionar a seta para cima e para baixo move o foco da linha.\" width=\"1354\" height=\"840\"><figcaption class=\"wp-caption-text\">Pressionar a seta para cima e para baixo move o foco da linha.<\/figcaption><\/figure>\n<p><strong>1. <\/strong><strong> Navega\u00e7\u00e3o de teclado bidimensional no block inserter<\/strong>. Agora podemos navegar entre blocos de forma mais precisa e intuitiva.<\/p>\n<ul>\n<li>Pressionando a seta para cima (\u2191) e a seta para baixo (\u2193) move o foco para a linha acima ou abaixo.<\/li>\n<li>Pressionar a <strong>Tab <\/strong>ou <strong>Shift + Tab <\/strong>permite mover o foco entre a caixa de busca, a lista de aba, e o primeiro item de cada categoria.<\/li>\n<\/ul>\n<p><strong>2. <\/strong><strong>Uma nova categoria &#8220;Tema&#8221; para pe\u00e7as e varia\u00e7\u00f5es do template <\/strong>agora aparece no inseridor no Full Site Editing (ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30020\">30020<\/a>).<\/p>\n<p><strong>3.\u00a0<\/strong>Agora s\u00e3o permitidas <strong>m\u00faltiplas palavras no casador de frases autocompletas <\/strong>(ver PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29939\">29939<\/a>).<\/p>\n<h3>Melhorias adicionais no editor de blocos<\/h3>\n<p>O WordPress 5.8 traz toneladas de pequenas e m\u00e9dias mudan\u00e7as adicionais que valem algumas linhas aqui. Entre essas melhorias, citar\u00edamos as seguintes:<\/p>\n<h4>Suporte drag and drop em blocos de cobertura<\/h4>\n<p>Agora voc\u00ea pode arrastar e soltar imagens da sua \u00e1rea de trabalho para substituir o fundo de um bloco de cobertura (ver Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\" target=\"_blank\" rel=\"noopener noreferrer\">10.3<\/a> e PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29813\">29813<\/a>).<\/p>\n<figure style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/drag-and-drop-cover-background-image.gif\" alt=\"Imagens de fundo de arrastar e soltar no bloco de cobertura.\" width=\"558\" height=\"338\"><figcaption class=\"wp-caption-text\">Imagens de fundo de arrastar e soltar no bloco de cobertura.<\/figcaption><\/figure>\n<h4>Melhorias na interface de publica\u00e7\u00e3o<\/h4>\n<p>Desde o WordPress 5.8, a IU de publica\u00e7\u00e3o mostra o \u00edcone e o t\u00edtulo do site para torn\u00e1-lo mais claro onde voc\u00ea vai publicar seus artigos ou p\u00e1ginas (<a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg 10.4<\/a>).<\/p>\n<figure style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-57.png\" alt=\"Publica\u00e7\u00e3o UI no WordPress 5.7.\" width=\"562\" height=\"730\"><figcaption class=\"wp-caption-text\">Publica\u00e7\u00e3o UI no WordPress 5.7.<\/figcaption><\/figure>\n<figure style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-58.png\" alt=\"Publica\u00e7\u00e3o UI no WordPress 5.8.\" width=\"562\" height=\"730\"><figcaption class=\"wp-caption-text\">Publica\u00e7\u00e3o UI no WordPress 5.8.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30231\" target=\"_blank\" rel=\"noopener noreferrer\">Este aprimoramento<\/a> \u00e9 ben\u00e9fico se voc\u00ea estiver trabalhando em modo tela cheia ou em dispositivos m\u00f3veis.<\/p>\n<h2>Configura\u00e7\u00f5es e estilos de bloco com theme.json<\/h2>\n<p>Com o WordPress 5.8, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">o arquivo <strong>theme.json<\/strong><\/a> torna-se &#8220;um ponto central de configura\u00e7\u00e3o&#8221;, fornecendo uma nova maneira para os desenvolvedores de temas personalizarem as configura\u00e7\u00f5es e estilos do editor.<\/p>\n<p>Usando um arquivo <strong>theme.json<\/strong>, os temas podem definir predefini\u00e7\u00f5es personalizadas e\/ou adicionar suporte para novos recursos, tais como duotom e bordas de tabela (veja <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">Configura\u00e7\u00f5es e Estilos Globais<\/a>).<\/p>\n<p>De acordo com <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">Andr\u00e9 Maneiro<\/a>:<\/p>\n<blockquote><p>Este novo mecanismo visa assumir e consolidar todas as v\u00e1rias chamadas de <code>add_theme_support<\/code> que anteriormente eram necess\u00e1rias para controlar o editor.<\/p><\/blockquote>\n<p>Por exemplo, voc\u00ea pode definir globalmente uma pr\u00e9-configura\u00e7\u00e3o personalizada de du\u00f3tons com o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [ \"#000\", \"#0FF\" ],\n\t\t\t\t\t\"slug\": \"black-cyan\",\n\t\t\t\t\t\"name\": \"Black Cyan\"\n\t\t\t\t}\n\t\t\t],<\/code><\/pre>\n<p>Isto sobregravaria as predefini\u00e7\u00f5es padr\u00e3o, e voc\u00ea ver\u00e1 apenas uma op\u00e7\u00e3o duotone:<\/p>\n<figure style=\"width: 1264px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/custom-duotone-preset.jpg\" alt=\"Pr\u00e9-defini\u00e7\u00e3o personalizada de du\u00f3tons em theme.json.\" width=\"1264\" height=\"802\"><figcaption class=\"wp-caption-text\">Pr\u00e9-defini\u00e7\u00e3o personalizada de du\u00f3tons em theme.json.<\/figcaption><\/figure>\n<p>O novo mecanismo fornece uma maneira de controlar as configura\u00e7\u00f5es globalmente ou por bloco. Por exemplo, voc\u00ea pode adicionar um tamanho de fonte personalizado de 12px globalmente, adicionando o seguinte preset ao seu arquivo <strong>theme.json<\/strong>:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"customLineHeight\": true,\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t},\n\t\t\t\t{...}<\/code><\/pre>\n<p>Isto resulta em um novo tamanho de fonte dispon\u00edvel para os usu\u00e1rios utilizarem com <em>qualquer <\/em>texto em seu conte\u00fado.<\/p>\n<figure style=\"width: 560px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/extra-extra-small-font-size-settings.png\" alt=\"Um tamanho de fonte personalizado definido globalmente em theme.json.\" width=\"560\" height=\"754\"><figcaption class=\"wp-caption-text\">Um tamanho de fonte personalizado definido globalmente em theme.json.<\/figcaption><\/figure>\n<p>Se voc\u00ea quiser apenas personalizar o bloco de par\u00e1grafos, seu c\u00f3digo ser\u00e1 ligeiramente diferente:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/paragraph\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSizes\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-small\",\n\t\t\t\t\t\t\t\"size\": \"16px\",\n\t\t\t\t\t\t\t\"name\": \"Extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"small\",\n\t\t\t\t\t\t\t\"size\": \"18px\",\n\t\t\t\t\t\t\t\"name\": \"Small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"normal\",\n\t\t\t\t\t\t\t\"size\": \"20px\",\n\t\t\t\t\t\t\t\"name\": \"Normal\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"large\",\n\t\t\t\t\t\t\t\"size\": \"24px\",\n\t\t\t\t\t\t\t\"name\": \"Large\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>\u00c9 isso a\u00ed! Voc\u00ea acabou de definir suas predefini\u00e7\u00f5es de tamanho de fonte personalizadas para o bloco de par\u00e1grafos.<\/p>\n<figure style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/paragraph-block-custom-settings.png\" alt=\"Um bloco de par\u00e1grafos com predefini\u00e7\u00f5es personalizadas de tamanho de fonte.\" width=\"558\" height=\"1216\"><figcaption class=\"wp-caption-text\">Um bloco de par\u00e1grafos com predefini\u00e7\u00f5es personalizadas de tamanho de fonte.<\/figcaption><\/figure>\n<p>Os blocos principais foram atualizados para seguir o novo mecanismo, enquanto os blocos de terceiros podem se adaptar ao novo mecanismo usando o Hook React <code>useSetting<\/code> (leia mais sobre esta fun\u00e7\u00e3o na <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">nota de desenvolvimento<\/a> e na <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-editor\/#useSetting\">documenta\u00e7\u00e3o API<\/a>):<\/p>\n<pre><code class=\"language-javascript\">const isEnabled = useSetting( 'spacing.margin' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>The settings declared in <strong>theme.json<\/strong> will take precedence over settings declared via <code>add_theme_support<\/code>.<\/p>\n<\/aside>\n\n<p>O novo mecanismo baseado no arquivo <strong>theme.json <\/strong>n\u00e3o se aplica apenas a configura\u00e7\u00f5es de blocos. Na verdade, a partir do WordPress 5.8, n\u00e3o ser\u00e1 mais necess\u00e1rio criar estilos de editor e question\u00e1-los. Ser\u00e1 suficiente declarar predefini\u00e7\u00f5es dentro do arquivo <strong>theme.json<\/strong>; o mecanismo gerar\u00e1 as classes e as inquirir\u00e1 automaticamente tanto para o editor quanto para o frontend.<\/p>\n<p>O motor tamb\u00e9m ir\u00e1 gerar as correspondentes <a href=\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#styles-and-css-custom-properties\">propriedades personalizadas do CSS<\/a>.<\/p>\n<p>No exemplo anterior, estabelecemos cinco predefini\u00e7\u00f5es de <code>fontSizes<\/code> para o bloco de par\u00e1grafos. Para essas predefini\u00e7\u00f5es, ser\u00e3o geradas as seguintes propriedades personalizadas do CSS:<\/p>\n<pre><code class=\"language-css\">p {\n\t--wp--preset--font-size--extra-extra-small: 12px;\n\t--wp--preset--font-size--extra-small: 16px;\n\t--wp--preset--font-size--small: 18px;\n\t--wp--preset--font-size--normal: 20px;\n\t--wp--preset--font-size--large: 24px;\n}<\/code><\/pre>\n<p>Uma vez definido o tamanho da fonte do par\u00e1grafo em seu arquivo <strong>theme.json<\/strong>, o elemento <code>p<\/code> correspondente toma a classe <code>has-{preset-slug}-{preset-category}<\/code>.<\/p>\n<p>Isto significa que um par\u00e1grafo com um tamanho de fonte <code>extra-extra-small<\/code> receber\u00e1 a classe <code>has-extra-extra-small-font-size<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;p class=\"has-extra-extra-small-font-size\"&gt;Lorem ipsum dolor...&lt;\/p&gt;<\/code><\/pre>\n<p class=\"has-extra-extra-small-font-size\">E aqui est\u00e1 o bloco de declara\u00e7\u00e3o do CSS:<\/p>\n<pre><code class=\"language-css\">p.has-extra-extra-small-font-size {\n\tfont-size: var(--wp--preset--font-size--extra-extra-small) !important;\n}<\/code><\/pre>\n<p>Para uma vis\u00e3o mais pr\u00f3xima do cen\u00e1rio e estilos com o <strong>theme.json<\/strong>, certifique-se de verificar a <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">nota de desenvolvimento<\/a> e a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">documenta\u00e7\u00e3o API<\/a>.<\/p>\n<p>Verifique tamb\u00e9m o <a href=\"https:\/\/make.wordpress.org\/test\/2021\/06\/24\/call-for-testing-thrive-with-theme-json\/\">chamado FSE de Anne McCarty para testes<\/a> para uma leitura mais \u00fatil e um desafio emocionante para os desenvolvedores que querem explorar os recursos do novo <strong>tema.json.<\/strong><\/p>\n<h2>Melhorias do API do bloco<\/h2>\n<p>Os <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">aprimoramentos da API do bloco<\/a> que v\u00eam com o WordPress 5.8 merecem aten\u00e7\u00e3o especial por parte dos desenvolvedores de plugins.<\/p>\n<p>O uso do arquivo <strong>block.json \u00e9 <\/strong>agora encorajado como a forma can\u00f4nica de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\">registrar os tipos de blocos<\/a> e oferece v\u00e1rias vantagens:<\/p>\n<ul>\n<li>Com rela\u00e7\u00e3o ao desempenho, se o tema suportar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/lazy-load-no-wordpress\/\">carregamento pregui\u00e7oso de ativos<\/a>, o registro de tipos de blocos atrav\u00e9s do arquivo <strong>block.json <\/strong>otimizar\u00e1 automaticamente a consulta de recursos. Isso porque os recursos especificados pelo <code>style<\/code> e propriedades do <code>script<\/code> ser\u00e3o consultados no frontend somente quando o bloco for detectado. Isto permite o desenvolvimento de plugins mais eficientes, reduzindo o tamanho da p\u00e1gina e evitando v\u00e1rios dos problemas abordados <a href=\"https:\/\/kinsta.com\/pt\/blog\/desabilitar-wordpress-plugins\/\">neste artigo<\/a>.<\/li>\n<li>O arquivo <strong>block.json <\/strong>simplifica o registro do bloco do lado do servidor, permitindo que o <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\">Endpoint REST API<\/a> <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/block-types\/\">Tipos de Bloco<\/a> liste o bloco.<\/li>\n<li>O arquivo <strong>block.json <\/strong>tamb\u00e9m \u00e9 necess\u00e1rio se voc\u00ea decidir enviar seu plugin de bloco para o Diret\u00f3rio de Plugins do WordPress.<\/li>\n<\/ul>\n<h3>Mudan\u00e7as na fun\u00e7\u00e3o register_block_type<\/h3>\n<p>Desde o WordPress 5.8, a fun\u00e7\u00e3o <code>register_block_type<\/code> foi aprimorada para ler metadados do arquivo <strong>block.json. <\/strong>Agora, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\">o primeiro par\u00e2metro<\/a> aceita o caminho para a pasta onde se encontra o arquivo <strong>block.json.<\/strong><\/p>\n<p>A fun\u00e7\u00e3o pode ser usada como mostrado no exemplo a seguir:<\/p>\n<pre><code class=\"language-php\">function create_custom_block_init() {\n\tregister_block_type( __DIR__ );\n}\nadd_action( 'init', 'create_custom_block_init' );<\/code><\/pre>\n<p>Ele devolve o tipo de bloco registrado ou <code>false<\/code> em caso de falha.<\/p>\n<p>Como voc\u00ea pode notar, a fun\u00e7\u00e3o <code>register_block_type<\/code> agora \u00e9 usada da mesma forma que a fun\u00e7\u00e3o <code>register_block_type_from_metadata<\/code> que anteriormente era a \u00fanica fun\u00e7\u00e3o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type_from_metadata\/\">dispon\u00edvel para registrar um tipo de bloco<\/a> lendo os metadados do arquivo <strong>block.json. <\/strong>Como explicado por <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">Greg Zi\u00f3\u0142kowski<\/a>:<\/p>\n<blockquote><p>Decidimos consolidar a funcionalidade pr\u00e9-existente dispon\u00edvel com o m\u00e9todo <code>register_block_type_from_metadata<\/code> em <code>register_block_type<\/code> para evitar alguma confus\u00e3o que ele criou. Ainda \u00e9 poss\u00edvel usar ambas as fun\u00e7\u00f5es, mas planejamos usar apenas a vers\u00e3o mais curta nos documentos e ferramentas oficiais a partir de agora.<\/p><\/blockquote>\n<p>Uma vez registrado o bloco no servidor, s\u00f3 \u00e9 necess\u00e1rio <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/\">registrar as configura\u00e7\u00f5es<\/a> no cliente usando o mesmo nome de bloco em seu arquivo <strong>index.js.<\/strong><\/p>\n<p>Para uma vis\u00e3o mais aprofundada dos aprimoramentos do bloco API introduzidos pelo WordPress 5.8, certifique-se de verificar a <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">nota de desenvolvimento por Greg<\/a> Zi\u00f3\u0142kowski.<\/p>\n<h2>Suporte WebP no WordPress 5.8<\/h2>\n<p>Aqui em Kinsta, estamos obcecados com a velocidade do site e o desempenho do WordPress. \u00c9 por isso que o suporte ao formato <a href=\"https:\/\/kinsta.com\/pt\/blog\/webp\/\">WebP<\/a> no WordPress 5.8 \u00e9 uma not\u00edcia t\u00e3o excitante para n\u00f3s.<\/p>\n<p>Considerado um <a href=\"https:\/\/web.dev\/uses-webp-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">formato da pr\u00f3xima gera\u00e7\u00e3o<\/a>, o WebP \u00e9 um <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-arquivo-imagem\/\">formato de imagem<\/a> desenvolvido pelo Google que oferece &#8220;melhor compress\u00e3o do que PNG ou JPEG, o que significa downloads mais r\u00e1pidos e menor consumo de dados&#8221;.<\/p>\n<figure style=\"width: 1406px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/next-gen-image-formats-lighthouse.png\" alt=\"O Google Lighthouse sugere o uso de formatos de imagem de pr\u00f3xima gera\u00e7\u00e3o.\" width=\"1406\" height=\"338\"><figcaption class=\"wp-caption-text\">O Google Lighthouse sugere o uso de formatos de imagem de pr\u00f3xima gera\u00e7\u00e3o.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developers.google.com\/speed\/webp\" target=\"_blank\" rel=\"noopener noreferrer\">De acordo com o Google<\/a>:<\/p>\n<blockquote><p>WebP \u00e9 um <strong>formato moderno de imagem<\/strong> que fornece compress\u00e3o superior <strong>sem perdas e com perdas<\/strong> para imagens na web. Usando WebP, webmasters e desenvolvedores web podem criar imagens menores e mais ricas que tornam a web mais r\u00e1pida.<\/p>\n<p>As imagens sem perdas da WebP s\u00e3o 26% menores em tamanho em compara\u00e7\u00e3o com as PNGs. As imagens sem perdas WebP s\u00e3o 25-34% menores do que <a href=\"https:\/\/kinsta.com\/pt\/blog\/jpg-vs-jpeg\/\">imagens JPEG<\/a> compar\u00e1veis com \u00edndice de qualidade SSIM equivalente.<\/p><\/blockquote>\n<p>A partir do WordPress 5.8,voc\u00ea pode usar o formato de imagem WebP da mesma forma que os formatos JPEG, PNG, e GIF. Basta enviar suas imagens para sua <a href=\"https:\/\/kinsta.com\/pt\/blog\/biblioteca-midia-wordpress\/\">Biblioteca de M\u00eddia<\/a> e inclu\u00ed-las em seu conte\u00fado.<\/p>\n<p>Em um <a href=\"https:\/\/kinsta.com\/pt\/blog\/webp\/\">artigo anterior<\/a>, analisamos em profundidade o formato WebP e as ferramentas dispon\u00edveis para utiliz\u00e1-lo no WordPress. Agora, devido ao <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\" target=\"_blank\" rel=\"noopener noreferrer\">suporte a imagens WebP em WordPress 5.8<\/a>, as coisas podem mudar um pouco. Como o formato WebP \u00e9 suportado fora da caixa, voc\u00ea n\u00e3o precisa instalar plugins de terceiros para carregar imagens WebP no WordPress, pelo menos nos casos mais comuns de uso.<\/p>\n<p>Note que, mesmo que agora voc\u00ea possa carregar suas imagens WebP para o WordPress usando a Biblioteca de M\u00eddia, o WordPress n\u00e3o suporta a convers\u00e3o autom\u00e1tica de imagens para o formato WebP. Para ativar esse recurso em seu site, voc\u00ea precisar\u00e1 de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">plugin WebP WordPress<\/a> de terceiros.<\/p>\n<h3>Como usar imagens WebP no WordPress<\/h3>\n<p>Voc\u00ea pode converter suas imagens para WebP de muitas maneiras diferentes:<\/p>\n<ul>\n<li>Voc\u00ea pode usar os <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled\">utilit\u00e1rios WebP pr\u00e9-compilados do Google e a biblioteca<\/a> para Linux, Windows, ou Mac OS X.<\/li>\n<li>Os usu\u00e1rios Mac podem instalar um <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled#os_x_package_managers\">gerenciador de pacotes<\/a> como o <a href=\"https:\/\/formulae.brew.sh\/formula\/webp\">pacote Homebrew WebP<\/a> ou o <a href=\"https:\/\/ports.macports.org\/?search=webp&#038;search_by=name\">pacote Macports WebP<\/a>.<\/li>\n<li>Voc\u00ea pode usar uma ferramenta de edi\u00e7\u00e3o de imagem que suporta WebP, como o <a href=\"https:\/\/squoosh.app\/\">Squoosh<\/a> do <a href=\"https:\/\/github.com\/GoogleChromeLabs\/squoosh\">Google Chrome Labs<\/a>, o conversor de imagem em lote <a href=\"https:\/\/www.xnview.com\/en\/xnconvert\/\">XnConvert<\/a>, um editor de imagem popular como o <a href=\"https:\/\/www.gimp.org\/\">GIMP<\/a>, e muitos outros.<\/li>\n<li>Voc\u00ea pode instalar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">plugin WebP WordPress<\/a> para um melhor controle geral sobre as imagens WebP no WordPress.<\/li>\n<\/ul>\n<figure style=\"width: 582px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-export-settings-gimp.jpg\" alt=\"Exportar imagem como WebP no GIMP.\" width=\"582\" height=\"596\"><figcaption class=\"wp-caption-text\">Exportar imagem como WebP no GIMP.<\/figcaption><\/figure>\n<p>Se voc\u00ea optar por uma ferramenta de linha de comando, voc\u00ea pode codificar e decodificar suas imagens usando utilit\u00e1rios <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/cwebp\" target=\"_blank\" rel=\"noopener noreferrer\">cwebp<\/a> e <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/dwebp\" target=\"_blank\" rel=\"noopener noreferrer\">dwebp<\/a>. Por exemplo, o seguinte comando executa uma convers\u00e3o b\u00e1sica de JPEG para WebP:<\/p>\n<pre><code class=\"language-bash\">cwebp [options] original_image.jpg -o compressed_image.webp<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode fazer uma convers\u00e3o em massa de suas imagens usando Bash e cwebp (exemplo de <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/converting-images-to-webp\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jeremy Wagner<\/a>):<\/p>\n<pre><code class=\"language-bash\">find .\/ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o \"${1%.png}.webp\"' _ {} \\;\n<\/code><\/pre>\n<p>O comando acima converte todas as imagens <strong>.png <\/strong>para o formato <strong>.webp <\/strong>com um fator de compress\u00e3o de 75.<\/p>\n<figure style=\"width: 1269px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-quality-vs-file-size.jpg\" alt=\"Compara\u00e7\u00e3o entre o fator de compress\u00e3o e os tamanhos dos arquivos.\" width=\"1269\" height=\"870\"><figcaption class=\"wp-caption-text\">Compara\u00e7\u00e3o entre o fator de compress\u00e3o e os tamanhos dos arquivos.<\/figcaption><\/figure>\n<p>Uma vez que voc\u00ea tenha suas imagens WebP, voc\u00ea pode simplesmente carreg\u00e1-las usando a <a href=\"https:\/\/kinsta.com\/pt\/blog\/biblioteca-midia-wordpress\/\">Biblioteca de M\u00eddia<\/a> WordPress. Abaixo voc\u00ea pode ver uma imagem JPEG de 127 KB antes da convers\u00e3o na Biblioteca de M\u00eddia:<\/p>\n<figure style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/jpeg-image.jpg\" alt=\"O tamanho do arquivo comprimido JPEG \u00e9 de 127 KB.\" width=\"1960\" height=\"1280\"><figcaption class=\"wp-caption-text\">O tamanho do arquivo comprimido JPEG \u00e9 de 127 KB.<\/figcaption><\/figure>\n<p>O tamanho da imagem comprimida do WebP \u00e9 42% menor que a imagem original JPEG!<\/p>\n<figure style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-image.jpg\" alt=\"A mesma imagem no formato WebP \u00e9 de 74 KB.\" width=\"1960\" height=\"1280\"><figcaption class=\"wp-caption-text\">A mesma imagem no formato WebP \u00e9 de 74 KB.<\/figcaption><\/figure>\n<p>Por \u00faltimo, as imagens WebP t\u00eam os mesmos recursos de edi\u00e7\u00e3o das imagens JPEG, PNG e GIF. Voc\u00ea pode recortar, girar, virar e escalar as imagens e aplicar mudan\u00e7as nos tamanhos de imagem da sua escolha.<\/p>\n<h3>Caveats About WebP em WordPress 5.8<\/h3>\n<p>De acordo com Adam Silverstein:<\/p>\n<blockquote><p>As imagens WebP suportam compress\u00e3o com e sem perdas, assim como um formato animado e suporte para imagens transparentes. No WordPress, o formato sem perdas do WebP s\u00f3 \u00e9 suportado quando o servidor de hospedagem usa Imagick (a biblioteca PHP) at\u00e9 que a LibGD acrescente suporte. Al\u00e9m disso, os formatos animados e alfa ainda n\u00e3o s\u00e3o suportados para imagens redimensionadas (quando voc\u00ea carrega imagens nestes formatos s\u00e3o criadas imagens com perdas).<\/p><\/blockquote>\n<p>Se seu web host n\u00e3o suporta imagens WebP, voc\u00ea ver\u00e1 uma mensagem de erro ao tentar carreg\u00e1-las. Se voc\u00ea n\u00e3o tiver certeza se seu web host suporta a biblioteca Imagick, a guia Info da ferramenta Site Health inclui um campo da <strong>biblioteca Imagick <\/strong>que fornece essa informa\u00e7\u00e3o.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/site-health-tool-1.jpg\" alt=\"Kinsta ap\u00f3ia a biblioteca Imagick.\" width=\"1600\" height=\"1222\"><figcaption class=\"wp-caption-text\">Kinsta suporta a biblioteca Imagick.<\/figcaption><\/figure>\n<p>Com suporte WebP, o WordPress 5.8 tamb\u00e9m introduz dois campos adicionais \u00e0 se\u00e7\u00e3o de Manuseio de M\u00eddia no Site Health: <strong>Vers\u00e3o Imagick <\/strong>e <strong>formatos de arquivo compat\u00edveis com ImageMagick<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/site-health-media-handling.jpg\" alt=\"Campo da vers\u00e3o ImageMagick no site Heath.\" width=\"1600\" height=\"473\"><figcaption class=\"wp-caption-text\">Campo da vers\u00e3o ImageMagick no site Heath.<\/figcaption><\/figure>\n<p>Se o WebP n\u00e3o estiver listado entre os tipos de arquivos suportados, voc\u00ea precisar\u00e1 entrar em contato com seu web host para obter suporte.<\/p>\n<p>A <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\" target=\"_blank\" rel=\"noopener noreferrer\">nota de desenvolvimento<\/a> fornece <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/#comment-41376\" target=\"_blank\" rel=\"noopener noreferrer\">informa\u00e7\u00f5es adicionais<\/a> sobre suporte WebP no WordPress 5.8, FAQs \u00fateis e outros recursos.<\/p>\n<p>Se voc\u00ea estiver interessado na otimiza\u00e7\u00e3o de imagens, voc\u00ea tamb\u00e9m pode gostar dos seguintes tutoriais:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">Como otimizar imagens para Web e desempenho<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/compressao-com-perda\/\">Por que e como usar a compress\u00e3o com perda em suas imagens WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/webp\/\">Como usar imagens WebP no WordPress (e tamanhos de arquivo de imagem retr\u00e1til de at\u00e9 35%)<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-arquivo-imagem\/\">Os 15 melhores tipos de arquivos de imagem<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/tamanhos-imagem-wordpress\/\">Tudo o que voc\u00ea precisa saber sobre os tamanhos de imagem do WordPress<\/a><\/li>\n<\/ul>\n<h2>Recursos adicionais para os desenvolvedores<\/h2>\n<p>Voc\u00ea encontrar\u00e1 dezenas de recursos interessantes para desenvolvedores no WordPress 5.8. Neste artigo, prestamos mais aten\u00e7\u00e3o \u00e0quelas que devem ter o impacto mais significativo em seu trabalho de desenvolvimento. Mas h\u00e1 de fato muitos recursos novos que merecem aten\u00e7\u00e3o, incluindo as seguintes:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Block supports API<\/h3>\n<p>O WordPress 5.8 adiciona <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">novas bandeiras de suporte a blocos<\/a>, permitindo aos desenvolvedores personalizar os blocos registrados com os \u00faltimos recursos de blocos.<\/p>\n<p>Al\u00e9m do suporte experimental <a href=\"#duotone-block-support\">em bloco de dois tons<\/a> mencionado anteriormente (<code>color._experimentalDuotone<\/code>), o WordPress 5.8 tamb\u00e9m adiciona suporte para link color. Para aproveitar este recurso, basta adicionar a seguinte bandeira aos metadados do seu bloco:<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\tlink: true;\n\t}\n}<\/code><\/pre>\n<p>Voc\u00ea pode definir valores padr\u00e3o usando atributos, como mostrado no exemplo a seguir, ou definir suas predefini\u00e7\u00f5es no <em>theme.json<\/em>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tlink: '#FF0000',\n\t\t\t}\n\t\t}<\/code><\/pre>\n<p>As mudan\u00e7as adicionais de API do bloco incluem:<\/p>\n<ul>\n<li><code>fontSize<\/code> e <code>lineHeight<\/code> suportes se tornam est\u00e1veis.<\/li>\n<li>O suporte <code>spacing<\/code> foi expandido, e agora voc\u00ea pode controlar <code>margin<\/code> e <code>padding<\/code>, assim como controlar individualmente os tamanhos <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code> e\u00a0<code>left<\/code>.<\/li>\n<\/ul>\n<p>Voc\u00ea pode ler mais sobre Block Supports API em WordPress 5.8 em <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">Block supports API updates<\/a> dev-note.<\/p>\n<p>Para uma vis\u00e3o mais detalhada de como utilizar o Block Supports API, consulte a documenta\u00e7\u00e3o oficial do <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">Block Supports API<\/a>.<\/p>\n<h3>Abas personalizadas da sa\u00fade do site<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dois novos hooks<\/a> agora permitem que os desenvolvedores adicionem suas abas personalizadas \u00e0 interface do Site Health e personalizem as telas dispon\u00edveis.<\/p>\n<p>O <strong>filtro<\/strong>\u00a0<strong><code>site_health_navigation_tabs<\/code> <\/strong>\u00e9 um conjunto associativo de identifica\u00e7\u00f5es e r\u00f3tulos para registrar uma nova guia na tela de sa\u00fade do site. Voc\u00ea pode usar o filtro adicionando o seguinte c\u00f3digo de exemplo ao <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/#the-theme-editor-and-why-not-to-use-it\">arquivo de fun\u00e7\u00f5es do seu tema<\/a> ou plugin personalizado:<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_navigation_tabs( $tabs ) {\n\t$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );\n\n\treturn $tabs;\n}\nadd_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );<\/code><\/pre>\n<p>A imagem abaixo mostra a nova aba Sa\u00fade do Site:<\/p>\n<figure style=\"width: 1646px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/site-health-custom-tabs.png\" alt=\"Uma aba personalizada adicionada ao menu de navega\u00e7\u00e3o Site Health.\" width=\"1646\" height=\"1068\"><figcaption class=\"wp-caption-text\">Uma aba personalizada adicionada ao menu de navega\u00e7\u00e3o Site Health.<\/figcaption><\/figure>\n<p>Gra\u00e7as ao filtro <code>site_health_navigation_tabs<\/code> tamb\u00e9m \u00e9 poss\u00edvel reordenar abas ou remover um ou mais itens.<\/p>\n<p>A <strong>a\u00e7\u00e3o <\/strong><strong><code>site_health_tab_content<\/code> <\/strong>aciona quando um usu\u00e1rio visita a tela de Sa\u00fade do Site, exceto pela tela de <strong>Status <\/strong>padr\u00e3o. Voc\u00ea pode usar este hook como mostrado no seguinte trecho (exemplo da <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">nota do dev<\/a>):<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_tab_content( $tab ) {\n\t\/\/ Return if this is not your tab.\n\tif ( 'kinsta-site-health-tab' !== $tab ) {\n\t\treturn;\n\t}\n\n\t\/\/ Include the interface, kept in a separate file just to differentiate code from views.\n\tinclude trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views\/kinsta-site-health-tab.php';\n}\nadd_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );<\/code><\/pre>\n<p>Primeiro, ele detecta se a aba atual \u00e9 sua aba personalizada, depois carrega o conte\u00fado da sua tela Site Health a partir de um arquivo <strong>.php. <\/strong>A a\u00e7\u00e3o <code>site_health_tab_content<\/code> tamb\u00e9m permite aos desenvolvedores estender a aba <strong>Info <\/strong>padr\u00e3o adicionando informa\u00e7\u00f5es espec\u00edficas a seus plugins ou temas.<\/p>\n<h3>Mudan\u00e7as na API do editor de bloco para suportar m\u00faltiplas telas de administra\u00e7\u00e3o<\/h3>\n<p>Com o WordPress 5.8, o editor de artigos n\u00e3o \u00e9 mais a \u00fanica tela de administra\u00e7\u00e3o que utiliza o editor de blocos (a tela de widgets \u00e9 um exemplo).<\/p>\n<p>Os colaboradores principais encontraram v\u00e1rios hooks definidos no servidor, dependendo do objeto <code>$post<\/code>. Este objeto n\u00e3o est\u00e1 presente nas telas de edi\u00e7\u00e3o, widgets e navega\u00e7\u00e3o do site. Seguindo adiante, v\u00e1rios filtros foram depreciados e substitu\u00eddos por substitui\u00e7\u00f5es sens\u00edveis ao contexto.<\/p>\n<p>Al\u00e9m disso, uma nova classe <code>WP_Block_Editor_Context<\/code> representando o contexto atual do editor de blocos e v\u00e1rios m\u00e9todos foi introduzida.<\/p>\n<p>Estas mudan\u00e7as melhoram estas telas com novas capacidades e permitem que os desenvolvedores adicionem suas personaliza\u00e7\u00f5es.<\/p>\n<p>Para uma lista abrangente de mudan\u00e7as de API do Block Editor relacionadas \u00e0s telas administrativas, veja a <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/block-editor-api-changes-to-support-multiple-admin-screens-in-wp-5-8\/\" target=\"_blank\" rel=\"noopener noreferrer\">nota de desenvolvimento<\/a> de Greg Zi\u00f3\u0142kowski.<\/p>\n<h3>Caracter\u00edsticas adicionais e melhorias<\/h3>\n<p>H\u00e1 tantas novidades e mudan\u00e7as para os desenvolvedores trazidas pelo WordPress 5.8 que nos seria imposs\u00edvel mencion\u00e1-las todas neste artigo. Mas n\u00f3s coletamos uma lista de notas dedicadas n\u00e3o cobertas aqui para sua leitura posterior:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/news\/2021\/05\/dropping-support-for-internet-explorer-11\/\">Suporte para Internet Explorer 11<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/01\/block-styles-loading-enhancements-in-wordpress-5-8\/\">Melhorias no carregamento de estilos de bloco no WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/blocks-in-an-iframed-template-editor\/\">Blocos em um editor iframed (template)<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/on-layout-and-content-width-in-wordpress-5-8\/\">Sobre o layout e largura do conte\u00fado no WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/introducing-update-uri-plugin-header-in-wordpress-5-8\/\">Apresentando o cabe\u00e7alho do plugin &#8220;Update URI&#8221; no WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-editor-api-removals-58\/\">V\u00e1rias remo\u00e7\u00f5es de API do Editor de Blocos no WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/rest-api-changes-in-wordpress-5-8\/\">REST API Altera\u00e7\u00f5es no WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/28\/miscellaneous-developer-focused-changes-in-wordpress-5-8\/\">Mudan\u00e7as diversas com foco no desenvolvedor no WordPress 5.8<\/a><\/li>\n<\/ul>\n\n<h2>Resumo<\/h2>\n<p>O WordPress 5.8 marca um marco no caminho para o Full Site Editing. Mas a segunda vers\u00e3o do WordPress do ano traz muito mais do que o FSE. Usu\u00e1rios e desenvolvedores encontrar\u00e3o toneladas de melhorias para o editor de blocos, um novo mecanismo de <strong>tema.json<\/strong>, uma API de blocos mais poderosa, suporte ao formato de imagem WebP, e muito mais.<\/p>\n<p>Ficamos particularmente impressionados com as melhorias, tanto pequenas quanto grandes, para o editor do bloco e sua interface de usu\u00e1rio. Adoramos a melhor navegabilidade entre blocos, a barra de ferramentas de blocos renovada, a clareza enriquecida da interface e as melhorias em v\u00e1rios blocos.<\/p>\n<p>Estas pequenas mudan\u00e7as melhoram pouco a pouco a experi\u00eancia de edi\u00e7\u00e3o e, sem quase nos darmos conta, nos encontramos usando um software melhor e mais robusto. Isso \u00e9 <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-wordpress\/\">WordPress<\/a>!<\/p>\n<p><em>A partir de agora! O que voc\u00ea pensa sobre o Full Site Editing? E quais s\u00e3o suas mudan\u00e7as favoritas com o WordPress 5.8?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O WordPress 5.8 &#8220;Tatum&#8221; est\u00e1 aqui e \u00e9 um lan\u00e7amento memor\u00e1vel. Al\u00e9m do incr\u00edvel n\u00famero de recursos, melhorias e corre\u00e7\u00f5es de bugs, o WP 5.8 introduz &#8230;<\/p>\n","protected":false},"author":36,"featured_media":43402,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[74,30],"topic":[1038],"class_list":["post-43387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-cms","tag-wordpress","topic-atualizacoes-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O Que h\u00e1 de Novo no WordPress 5.8<\/title>\n<meta name=\"description\" content=\"Confira nossa revis\u00e3o detalhada do WordPress 5.8 e descubra todas os principais recursos que v\u00eam com o \u00faltimo lan\u00e7amento (h\u00e1 muitas)!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O Que h\u00e1 de Novo no WordPress 5.8 (Full Site Editing, Imagens WebP, Estilos e Configura\u00e7\u00f5es Globais e Muito Mais)\" \/>\n<meta property=\"og:description\" content=\"Confira nossa revis\u00e3o detalhada do WordPress 5.8 e descubra todas os principais recursos que v\u00eam com o \u00faltimo lan\u00e7amento (h\u00e1 muitas)!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-16T14:09:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T09:02:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/PT-Homepage-featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Confira nossa revis\u00e3o detalhada do WordPress 5.8 e descubra todas os principais recursos que v\u00eam com o \u00faltimo lan\u00e7amento (h\u00e1 muitas)!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"45 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"O Que h\u00e1 de Novo no WordPress 5.8 (Full Site Editing, Imagens WebP, Estilos e Configura\u00e7\u00f5es Globais e Muito Mais)\",\"datePublished\":\"2021-07-16T14:09:54+00:00\",\"dateModified\":\"2023-08-22T09:02:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/\"},\"wordCount\":7996,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/wordpress-5.8.jpeg\",\"keywords\":[\"CMS\",\"WordPress\"],\"articleSection\":[\"Not\u00edcias WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/\",\"name\":\"O Que h\u00e1 de Novo no WordPress 5.8\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/wordpress-5.8.jpeg\",\"datePublished\":\"2021-07-16T14:09:54+00:00\",\"dateModified\":\"2023-08-22T09:02:06+00:00\",\"description\":\"Confira nossa revis\u00e3o detalhada do WordPress 5.8 e descubra todas os principais recursos que v\u00eam com o \u00faltimo lan\u00e7amento (h\u00e1 muitas)!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/wordpress-5.8.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/wordpress-5.8.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Atualiza\u00e7\u00f5es WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/atualizacoes-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"O Que h\u00e1 de Novo no WordPress 5.8 (Full Site Editing, Imagens WebP, Estilos e Configura\u00e7\u00f5es Globais e Muito Mais)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"O Que h\u00e1 de Novo no WordPress 5.8","description":"Confira nossa revis\u00e3o detalhada do WordPress 5.8 e descubra todas os principais recursos que v\u00eam com o \u00faltimo lan\u00e7amento (h\u00e1 muitas)!","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:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/","og_locale":"pt_PT","og_type":"article","og_title":"O Que h\u00e1 de Novo no WordPress 5.8 (Full Site Editing, Imagens WebP, Estilos e Configura\u00e7\u00f5es Globais e Muito Mais)","og_description":"Confira nossa revis\u00e3o detalhada do WordPress 5.8 e descubra todas os principais recursos que v\u00eam com o \u00faltimo lan\u00e7amento (h\u00e1 muitas)!","og_url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2021-07-16T14:09:54+00:00","article_modified_time":"2023-08-22T09:02:06+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/PT-Homepage-featured-image.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Confira nossa revis\u00e3o detalhada do WordPress 5.8 e descubra todas os principais recursos que v\u00eam com o \u00faltimo lan\u00e7amento (h\u00e1 muitas)!","twitter_image":"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"45 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"O Que h\u00e1 de Novo no WordPress 5.8 (Full Site Editing, Imagens WebP, Estilos e Configura\u00e7\u00f5es Globais e Muito Mais)","datePublished":"2021-07-16T14:09:54+00:00","dateModified":"2023-08-22T09:02:06+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/"},"wordCount":7996,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/wordpress-5.8.jpeg","keywords":["CMS","WordPress"],"articleSection":["Not\u00edcias WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/","url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/","name":"O Que h\u00e1 de Novo no WordPress 5.8","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/wordpress-5.8.jpeg","datePublished":"2021-07-16T14:09:54+00:00","dateModified":"2023-08-22T09:02:06+00:00","description":"Confira nossa revis\u00e3o detalhada do WordPress 5.8 e descubra todas os principais recursos que v\u00eam com o \u00faltimo lan\u00e7amento (h\u00e1 muitas)!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/wordpress-5.8.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/07\/wordpress-5.8.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Atualiza\u00e7\u00f5es WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/atualizacoes-wordpress\/"},{"@type":"ListItem","position":3,"name":"O Que h\u00e1 de Novo no WordPress 5.8 (Full Site Editing, Imagens WebP, Estilos e Configura\u00e7\u00f5es Globais e Muito Mais)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=43387"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43387\/revisions"}],"predecessor-version":[{"id":58316,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43387\/revisions\/58316"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/dk"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/translations\/se"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43387\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/43402"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=43387"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=43387"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=43387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}