{"id":16225,"date":"2020-12-04T09:07:05","date_gmt":"2020-12-04T12:07:05","guid":{"rendered":"https:\/\/soloweb.com.br\/blog\/?p=16225"},"modified":"2020-12-04T09:07:05","modified_gmt":"2020-12-04T12:07:05","slug":"novo-wordpress-5-6-o-que-vem-por-ai-acessibilidade-desempenho-seguranca","status":"publish","type":"post","link":"https:\/\/soloweb.com.br\/blog\/2020\/12\/04\/novo-wordpress-5-6-o-que-vem-por-ai-acessibilidade-desempenho-seguranca\/","title":{"rendered":"Novo WordPress 5.6 – O que vem por ai? (acessibilidade, desempenho, seguran\u00e7a, …)"},"content":{"rendered":"

WordPress 5.6 \u00e9 o pr\u00f3ximo grande lan\u00e7amento do WordPress que est\u00e1 programado para ser lan\u00e7ado em 8 de dezembro de 2020.<\/p>\n

Est\u00e1 precisando de um site novo, moderno e que atraia visitantes e mais clientes? A SoloWeb<\/a> tem o que precisa e com um pre\u00e7o justo, entre em contato conosco. acesse www.soloweb.com.br<\/a><\/p>\n

No WordPress 5.6 inclui v\u00e1rias novidades do Editor de Bloco, aprimorando a experi\u00eancia de edi\u00e7\u00e3o para usu\u00e1rios do WordPress com\u00a0 o plugin Gutenberg.<\/p>\n

Por\u00e9m, nem tudo \u00e9 sobre o Editor de bloco.\u00a0V\u00e1rios recursos foram adicionados ao Core do WordPress, como um novo tema padr\u00e3o Twenty Twenty-One, atualiza\u00e7\u00f5es autom\u00e1ticas para vers\u00f5es principais, melhor suporte para PHP 8.0, API REST.<\/p>\n

E h\u00e1 muito mais no WordPress 5.6.\u00a0Veremos melhorias de acessibilidade, melhorias de IU, toneladas de corre\u00e7\u00f5es de bugs e uma enorme lista de mudan\u00e7as para desenvolvedores.<\/p>\n

O que h\u00e1 de novo com o Editor de bloco<\/span><\/h2>\n

Com o WordPress 5.6, v\u00e1rias vers\u00f5es do\u00a0plugin Gutenberg\u00a0foram mescladas no n\u00facleo, ent\u00e3o os\u00a0usu\u00e1rios e escritores do WordPress\u00a0devem notar v\u00e1rias melhorias no editor.\u00a0Veremos padr\u00f5es de bloco aprimorados, contagem de palavras no painel de informa\u00e7\u00f5es, navega\u00e7\u00e3o de teclado aprimorada, interface de usu\u00e1rio de arrastar e soltar aprimorada e muito mais.<\/p>\n

Vamos mergulhar nas mudan\u00e7as mais interessantes que veremos no editor de bloco.<\/p>\n

Blocos, padr\u00f5es e melhorias na IU<\/span><\/h3>\n

Novos recursos de bloqueio, aprimoramentos e corre\u00e7\u00f5es de bugs ir\u00e3o melhorar a experi\u00eancia geral de edi\u00e7\u00e3o.\u00a0Al\u00e9m disso, um \u00f3timo trabalho foi feito na\u00a0acessibilidade\u00a0.\u00a0Abaixo, voc\u00ea encontrar\u00e1 nossa sele\u00e7\u00e3o escolhida a dedo dos recursos mais interessantes que ver\u00e1 no editor de blocos assim que atualizar seu site para o WordPress 5.6.<\/p>\n

Controles de posi\u00e7\u00e3o para v\u00eddeos em Cover Block<\/span><\/h4>\n

Adicionados ao Cover Blocks desde\u00a0Gutenberg 8.6\u00a0, os controles de posi\u00e7\u00e3o para v\u00eddeos permitem que os usu\u00e1rios movam o ponto focal e definam uma posi\u00e7\u00e3o personalizada para os\u00a0v\u00eddeos\u00a0.\u00a0Essa funcionalidade estava dispon\u00edvel anteriormente apenas para fundos de imagem.<\/p>\n

\n

\"Controles<\/p>\n

Controles de posi\u00e7\u00e3o de v\u00eddeo para Cover Block<\/p>\n<\/div>\n

Os valores de posi\u00e7\u00e3o s\u00e3o definidos clicando em qualquer lugar no seletor de ponto focal e \/ ou usando as setas do teclado.\u00a0Voc\u00ea pode pular os valores em 10 mantendo a tecla shift pressionada.<\/p>\n

Atualiza\u00e7\u00f5es de padr\u00f5es de blocos<\/span><\/h4>\n

O WordPress 5.6 tamb\u00e9m inclui v\u00e1rias\u00a0melhorias de\u00a0padr\u00e3o de bloco\u00a0adicionadas com o\u00a0Gutenberg 8.6<\/p>\n

O layout, texto e cor do\u00a0cabe\u00e7alho e par\u00e1grafo grandes<\/strong> foram atualizados.<\/p>\n

O t\u00edtulo em\u00a0Duas colunas de texto<\/strong> foi movido para fora do bloco de texto e colocado acima das colunas.<\/p>\n

O\u00a0padr\u00e3o\u00a0Cita\u00e7\u00e3o<\/strong>\u00a0agora inclui uma imagem na parte superior e um separador na parte inferior.<\/p>\n

\"Padr\u00e3o<\/div>\n
O novo padr\u00e3o de cota\u00e7\u00e3o inclui uma imagem e um separador<\/div>\n
<\/div>\n

Um novo padr\u00e3o de t\u00edtulo e par\u00e1grafo foi adicionado com\u00a0Gutenberg 8.7<\/p>\n

\n

\"Padr\u00e3o<\/p>\n

Padr\u00e3o de t\u00edtulo e par\u00e1grafo no WordPress 5.6<\/p>\n<\/div>\n

Uma boa melhoria de usabilidade para o insersor de bloco \u00e9 a\u00a0lista suspensa de categoria de padr\u00e3o de bloco\u00a0, que permite filtrar padr\u00f5es por\u00a0categoria\u00a0.\u00a0Isso \u00e9 extremamente \u00fatil quando voc\u00ea tem muitos padr\u00f5es para escolher.<\/p>\n

\n

\"A<\/p>\n

A lista suspensa de categoria de padr\u00e3o de bloco<\/p>\n<\/div>\n

Suporte para legendas de v\u00eddeo<\/span><\/h4>\n

Os blocos de v\u00eddeo agora oferecem suporte a\u00a0legendas de v\u00eddeo\u00a0.<\/p>\n

\n

\"legendas<\/p>\n

Adicionar legendas de v\u00eddeo no bloco de v\u00eddeo<\/p>\n<\/div>\n

Editores e criadores de conte\u00fado devem fornecer legendas de v\u00eddeo no\u00a0formato WebVTT\u00a0(Web Video Text Tracks Format), que \u00e9 \u201cum formato para exibir trilhas de texto cronometradas (como legendas ou legendas) usando o\u00a0<track><\/code>elemento\u201d<\/p>\n

\n

\"elementos<\/p>\n

Rastrear elementos com links para legendas em diferentes idiomas<\/p>\n<\/div>\n

Depois de carregar seus\u00a0arquivos\u00a0.vtt<\/em>\u00a0, os visualizadores do site ter\u00e3o permiss\u00e3o para habilitar as legendas em seu idioma favorito.<\/p>\n

\n

\"Configura\u00e7\u00f5es<\/p>\n

Configura\u00e7\u00f5es do usu\u00e1rio de legendas de v\u00eddeo<\/p>\n<\/div>\n

\n
\n
<\/figure>\n

Informa\u00e7\u00f5es<\/span><\/p>\n<\/div>\n

Por falar em v\u00eddeos, certifique-se de se inscrever no\u00a0canal do Kinsta no YouTube\u00a0para obter novos v\u00eddeos todas as semanas!<\/p>\n<\/div>\n

Transforme v\u00e1rios blocos em um bloco de colunas<\/span><\/h4>\n

Uma melhoria de usabilidade interessante \u00e9 a capacidade de converter v\u00e1rios blocos selecionados em um Bloco de Colunas.<\/p>\n

\n

\"Selecione<\/p>\n

Selecione v\u00e1rios blocos<\/p>\n<\/div>\n

Voc\u00ea s\u00f3 precisa selecionar os blocos que deseja mostrar nas colunas e clicar no bot\u00e3o superior direito da barra de ferramentas do bloco.<\/p>\n

Cada bloco selecionado ser\u00e1 convertido em uma coluna de um Bloco de Colunas.<\/p>\n

\n

\"bloco<\/p>\n

Tr\u00eas blocos convertidos em tr\u00eas colunas<\/p>\n<\/div>\n

Padr\u00f5es de fundo no bloco de cobertura<\/span><\/h4>\n

Blocos de cobertura agora podem exibir padr\u00f5es de fundo.<\/p>\n

\n

\"Um<\/p>\n

Um bloco de cobertura com um padr\u00e3o de fundo<\/p>\n<\/div>\n

Para adicionar um padr\u00e3o de fundo, carregue uma imagem de padr\u00e3o e, em seguida, ative a\u00a0op\u00e7\u00e3o\u00a0Fundo repetido<\/strong>\u00a0(aqui est\u00e1 tudo o que voc\u00ea precisa saber sobre a\u00a0Biblioteca de m\u00eddia no WordPress\u00a0).<\/p>\n

Quando terminar, ajuste o seletor de ponto focal de acordo com suas necessidades e experimente diferentes combina\u00e7\u00f5es com fundos fixos.<\/p>\n

Controle de tamanho de imagem adicionado \u00e0 m\u00eddia e bloco de texto<\/span><\/h4>\n

Com o\u00a0Gutenberg 9.1\u00a0, um novo controle de tamanho de imagem foi adicionado \u00e0s imagens em Media & Text Block.<\/p>\n

Os usu\u00e1rios agora podem escolher entre todos os tamanhos de imagem dispon\u00edveis.<\/p>\n

\n

\"Controle<\/p>\n

Controle de tamanho de imagem em m\u00eddia e bloco de texto<\/p>\n<\/div>\n

Bloco API V2<\/span><\/h3>\n

Uma nova\u00a0vers\u00e3o da API Block\u00a0permite que os blocos renderizem seu elemento de inv\u00f3lucro.\u00a0O objetivo da nova vers\u00e3o da API \u00e9 iluminar o DOM do editor e torn\u00e1-lo compat\u00edvel com o conte\u00fado da p\u00e1gina inicial. De acordo com Ella van Durpe: O maior benef\u00edcio disso \u00e9 que temas e plug-ins podem estilizar mais facilmente o conte\u00fado do bloco se a marca\u00e7\u00e3o for a mesma no editor.<\/p>\n

A nova vers\u00e3o requer a declara\u00e7\u00e3o da\u00a0apiVersion<\/code>propriedade no registro do tipo de bloco:<\/p>\n

A nova API tamb\u00e9m requer o\u00a0useBlockProps<\/code>\u00a0gancho\u00a0na\u00a0Edit<\/code>fun\u00e7\u00e3o de\u00a0bloco\u00a0.\u00a0Este gancho marca o elemento wrapper de um bloco como um elemento de bloco.<\/p>\n

Recursos e melhorias adicionais para desenvolvedores de bloco<\/span><\/h3>\n

Al\u00e9m da Block API Vers\u00e3o 2, aqui est\u00e1 uma lista de adi\u00e7\u00f5es para os\u00a0desenvolvedores\u00a0analisarem.<\/p>\n

Block suporta API<\/span><\/h4>\n

A API Block Support\u00a0permite que os desenvolvedores de blocos adicionem recursos aos seus blocos.\u00a0Cores\u00a0, planos de fundo,\u00a0tamanhos de fonte\u00a0s\u00e3o apenas alguns dos muitos recursos que podem ser adicionados aos blocos por meio da API de suporte de bloco.<\/p>\n

O WordPress 5.6 tamb\u00e9m introduz\u00a0v\u00e1rios novos suportes de bloco\u00a0\u201cpara aumentar a consist\u00eancia e tornar mais f\u00e1cil introduzir essas op\u00e7\u00f5es em blocos\u201d.<\/p>\n

Os desenvolvedores podem usar os novos suportes de bloco adicionando as chaves correspondentes \u00e0\u00a0supports<\/code>propriedade do\u00a0arquivo\u00a0block.json<\/em>\u00a0ou diretamente na\u00a0registerBlockType<\/code>\u00a0fun\u00e7\u00e3o.<\/p>\n

O valor do estilo ser\u00e1 automaticamente anexado ao elemento wrapper por meio da\u00a0has-<value>-<preset-category><\/code>classe (para valores predefinidos) ou com um\u00a0style<\/code>elemento (para valores personalizados).<\/p>\n

Por esse motivo, os Block Supports devem ser usados \u200b\u200bcom o novo\u00a0Block API V2\u00a0.<\/p>\n

Os suportes de bloco tamb\u00e9m podem ser usados \u200b\u200bcom\u00a0blocos din\u00e2micos\u00a0.<\/p>\n

API createBlocksFromInnerBlocksTemplate<\/span><\/h4>\n

Os desenvolvedores podem usar o\u00a0componente InnerBlocks\u00a0para criar blocos personalizados contendo outros blocos.\u00a0Exemplos s\u00e3o o bloco Colunas e o bloco Links Sociais.<\/p>\n

A nova\u00a0createBlocksFromInnerBlocksTemplate<\/code>API de bloco permite que voc\u00ea crie blocos a partir do modelo InnerBlocks.<\/p>\n

Consulte as\u00a0notas do desenvolvedor\u00a0para obter uma vis\u00e3o do depper e um exemplo de c\u00f3digo.<\/p>\n

Componentes da Barra de Ferramentas<\/span><\/h4>\n

Algumas mudan\u00e7as tamb\u00e9m afetam os\u00a0componentes\u00a0da\u00a0Barra de Ferramentas\u00a0:<\/p>\n

1. Componente ToolbarGroup<\/h5>\n

Antes do WordPress 5.6, o\u00a0componente\u00a0Barra de ferramentas\u00a0permitia que os desenvolvedores agrupassem op\u00e7\u00f5es relacionadas em um cont\u00eainer comum.\u00a0Agora, um novo\u00a0componente\u00a0ToolbarGroup\u00a0deve ser usado.<\/p>\n

2. Componentes ToolbarButton e ToolbarItem<\/h5>\n

Usar elementos tabul\u00e1veis \u200b\u200bdiretamente como itens da barra de ferramentas (ou seja\u00a0<button><\/code>) foi descontinuado.\u00a0Visando melhorar a acessibilidade, itens da barra de ferramentas podem ser adicionados usando\u00a0ToolbarButton\u00a0para bot\u00f5es e\u00a0ToolbarItem\u00a0para outros controles.\u00a0O exemplo abaixo mostra um bot\u00e3o e um\u00a0menu suspenso\u00a0:<\/p>\n

Desativando padr\u00f5es de bloco central<\/span><\/h4>\n

Os padr\u00f5es principais agora podem ser desativados usando o\u00a0core-block-patterns<\/code>sinalizador de suporte<\/p>\n

Desativando Editor de Imagens Inline<\/span><\/h4>\n

Gutenberg 8.4 adicionou um\u00a0recurso de\u00a0edi\u00e7\u00e3o de imagem embutida que\u00a0permite aos usu\u00e1rios editar imagens diretamente do Editor de bloco.<\/p>\n

\n

\"Edi\u00e7\u00e3o<\/p>\n

Edi\u00e7\u00e3o de imagem embutida<\/p>\n<\/div>\n

Os desenvolvedores agora podem desativar o Editor de imagens usando o\u00a0block_editor_settings<\/code>filtro<\/p>\n

\n

\"Edi\u00e7\u00e3o<\/p>\n

Edi\u00e7\u00e3o de imagem embutida desativada<\/p>\n<\/div>\n

Blocos reutiliz\u00e1veis \u200b\u200bmovidos para um pacote separado<\/span><\/h4>\n

Os blocos reutiliz\u00e1veis, anteriormente parte do\u00a0@wordpress\/editor<\/code>pacote, foram\u00a0movidos para\u00a0o\u00a0@wordpress\/reusable-blocks<\/code>pacote para torn\u00e1-los dispon\u00edveis em outros editores.<\/p>\n

Um novo tema padr\u00e3o: Twenty Twenty-One<\/span><\/h2>\n

WordPress 5.6 inclui um novo tema padr\u00e3o.\u00a0Twenty Twenty-One\u00a0\u00e9 um\u00a0tema WordPress\u00a0minimalista e altamente acess\u00edvel\u00a0com um layout de coluna \u00fanica e uma barra lateral de rodap\u00e9.<\/p>\n

O novo tema usa uma pilha de fontes do sistema e uma paleta de cores m\u00ednima baseada em cores de fundo pastel.<\/p>\n

\n

\"Vinte<\/p>\n

Visualiza\u00e7\u00e3o do tema Twenty Twenty-One (fonte da imagem: Make WordPress Core)<\/p>\n<\/div>\n

Voc\u00ea pode ler muito mais sobre Twenty Twenty-One em nosso post detalhado no blog:\u00a0Twenty Twenty-One: Um Mergulho Profundo no Novo Tema Padr\u00e3o do WordPress\u00a0.<\/p>\n

Atualiza\u00e7\u00f5es autom\u00e1ticas para lan\u00e7amentos importantes<\/span><\/h2>\n

As atualiza\u00e7\u00f5es autom\u00e1ticas s\u00e3o um recurso central introduzido no WordPress 3.7 com o objetivo de melhorar a\u00a0seguran\u00e7a do site\u00a0e tornar mais f\u00e1cil para os administradores do site\u00a0manterem seus sites WordPress atualizados\u00a0.<\/p>\n

Embora as atualiza\u00e7\u00f5es de n\u00facleo secund\u00e1rias autom\u00e1ticas tenham sido implementadas em vers\u00f5es anteriores, com o WordPress 5.6, os administradores de sites agora podem habilitar manualmente as atualiza\u00e7\u00f5es autom\u00e1ticas para lan\u00e7amentos principais (mais sobre isso em um segundo).<\/p>\n

Infelizmente, essa tarefa de manuten\u00e7\u00e3o crucial ainda pode ser um pouco confusa para usu\u00e1rios n\u00e3o t\u00e9cnicos.\u00a0Voc\u00ea pode ler mais sobre como as atualiza\u00e7\u00f5es autom\u00e1ticas funcionam em nossa\u00a0postagem no blog\u00a0Deep Dive Into WordPress Automatic Updates\u00a0.<\/p>\n

Portanto, o\u00a0WordPress 5.6 apresenta uma nova interface\u00a0que permite que os administradores do site habilitem atualiza\u00e7\u00f5es autom\u00e1ticas para os principais lan\u00e7amentos.<\/p>\n

O escopo desse recurso mudou durante o ciclo beta do WordPress 5.6 e a\u00a0nota do\u00a0desenvolvedor original foi substitu\u00edda.\u00a0Nas palavras de\u00a0Jb Audras\u00a0,<\/p>\n

O escopo inicial das atualiza\u00e7\u00f5es autom\u00e1ticas do Core mudou para:<\/p>\n