{"id":41829,"date":"2021-03-10T08:52:30","date_gmt":"2021-03-10T07:52:30","guid":{"rendered":"https:\/\/kinsta.com\/?p=90307"},"modified":"2023-08-22T06:02:09","modified_gmt":"2023-08-22T09:02:09","slug":"wordpress-5-7","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-7\/","title":{"rendered":"O Que h\u00e1 de Novo no WordPress 5.7 (lazy-loading, HTTPS, Atualiza\u00e7\u00f5es UI, Novas APIs, e Muito Mais)"},"content":{"rendered":"

Estamos acostumados a ver pequenas e n\u00e3o t\u00e3o pequenas mudan\u00e7as e novas caracter\u00edsticas adicionadas ao WordPress Core<\/a> toda vez que uma nova vers\u00e3o \u00e9 lan\u00e7ada. WordPress 5.7 n\u00e3o \u00e9 exce\u00e7\u00e3o, e \u00e9 \u00f3timo ver como cada novo lan\u00e7amento nos aproxima um pouco mais do Big Picture<\/a>.<\/p>\n

Com v\u00e1rias vers\u00f5es do Block Editor fundidas no Core, o novo lan\u00e7amento melhora a experi\u00eancia geral de edi\u00e7\u00e3o e permite aos desenvolvedores construir blocos mais avan\u00e7ados e adicionar personaliza\u00e7\u00f5es mais poderosas ao editor de blocos.<\/p>\n

Al\u00e9m do editor, o WordPress 5.7 tamb\u00e9m introduz toneladas de mudan\u00e7as e grandes recursos, incluindo iframes de carregamento pregui\u00e7oso, atualiza\u00e7\u00f5es da interface de login e registro, redefini\u00e7\u00e3o de links de senha, um grande n\u00famero de corre\u00e7\u00f5es de bugs e muito mais.<\/p>\n

Fizemos nossos testes no DevKinsta<\/a>, e estamos prontos para compartilhar com voc\u00ea mudan\u00e7as favoritas que est\u00e3o vindo com o WordPress 5.7-completo, \u00e9 claro, com toneladas de capturas de tela e trechos de c\u00f3digo.<\/p>\n

Se voc\u00ea quiser ir mais al\u00e9m no primeiro grande lan\u00e7amento de 2021, confira o WordPress 5.7 Development Cycle<\/a>, Planning Roundup<\/a>, e o Field Guide<\/a>.<\/p>\n

Portanto, enquanto continuamos a esperar pela edi\u00e7\u00e3o completa do site<\/a> (em Core by WordPress 5.8), vamos ficar confort\u00e1veis e aproveitar o que h\u00e1 de novo no WordPress 5.7!<\/p>\n\n

<\/div><\/kinsta-auto-toc>\n

O que h\u00e1 de novo no editor de blocos<\/h2>\n

O WordPress 5.7 traz muitas vers\u00f5es do plugin Gutenberg<\/a> para o Core. Seria imposs\u00edvel mencionar todas essas adi\u00e7\u00f5es aqui em cima das muitas mudan\u00e7as e corre\u00e7\u00f5es de bugs adicionados ao editor, mas voc\u00ea pode visitar os seguintes links para se aprofundar em cada vers\u00e3o: 9.3<\/a>, 9.4<\/a>, 9.5<\/a>, 9.6<\/a>, 9.7<\/a>, 9.8<\/a>, 9.9<\/a>.<\/p>\n

As corre\u00e7\u00f5es de erros e melhorias de desempenho do Gutenberg 10.0 e 10.1 tamb\u00e9m fazem parte do WordPress 5.7.<\/p>\n

Dito isto, vamos percorrer nossa lista de caracter\u00edsticas e mudan\u00e7as escolhidas a dedo adicionadas ao editor de blocos com o WordPress 5.7:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Caracter\u00edsticas de Varia\u00e7\u00f5es de Bloco, Melhorias, e APIs<\/h3>\n

Introduzidas com o WordPress 5.4, as varia\u00e7\u00f5es de blocos<\/a> proporcionam uma forma de o usu\u00e1rio selecionar uma inst\u00e2ncia diferente do mesmo bloco.<\/p>\n

Este recurso funciona em conjunto com a Varia\u00e7\u00f5es de Blocos <\/a>API <\/a>s<\/a>, uma ferramenta poderosa que permite aos desenvolvedores adicionar, gerenciar ou remover varia\u00e7\u00f5es de blocos.<\/p>\n

O WordPress 5.7 introduz v\u00e1rias melhorias, recursos e novas APIs para varia\u00e7\u00f5es de blocos, fornecendo uma melhor interface de usu\u00e1rio e ferramentas mais poderosas para desenvolvedores. Vamos mergulhar.<\/p>\n

Transforma\u00e7\u00f5es de varia\u00e7\u00e3o de blocos<\/h4>\n

Apresentado inicialmente com Gutenberg 9.4<\/a> e agora adicionado ao WordPress 5.7, um comutador de transforma\u00e7\u00e3o para varia\u00e7\u00e3o <\/strong>aparece abaixo do cart\u00e3o de blocos para blocos que suportam este recurso.<\/p>\n

\"O
O comutador Transformar em varia\u00e7\u00e3o para um bloco de Bot\u00f5es<\/figcaption><\/figure>\n

Ao registrar uma nova varia\u00e7\u00e3o de bloco, os desenvolvedores de blocos podem adicionar o comutador de varia\u00e7\u00e3o ao inspetor de bloco, adicionando a nova op\u00e7\u00e3o de transform<\/code> ao campo de scope<\/code> varia\u00e7\u00e3o de bloco, como mostrado no exemplo a seguir (somente c\u00f3digo JS):<\/p>\n

wp.blocks.registerBlockVariation( 'core\/heading', { \n\tname: 'green-text', \n\ttitle: 'Green Text', \n\tdescription: 'This block has green text. It overrides the default description.',  \n\tattributes: { \n\t\tcontent: 'Green Text', \n\t\ttextColor: 'vivid-green-cyan' \n\t}, \n\ticon: 'palmtree', \n\tscope: [ 'inserter', 'transform' ] \n} );<\/code><\/pre>\n
Neste exemplo, uma varia\u00e7\u00e3o de bloco aparece em duas \u00e1reas da IU do editor – o inseridor de blocos e o inspetor de blocos.<\/p>\n
\"Exemplo
Exemplo de varia\u00e7\u00e3o de bloco com escopo de transforma\u00e7\u00e3o<\/figcaption><\/figure>\n
Para uma vis\u00e3o aprofundada das Transforma\u00e7\u00f5es de Varia\u00e7\u00e3o de Bloco, veja tamb\u00e9m o PR #26687<\/a>.<\/p>\n
Informa\u00e7\u00e3o de bloco agora combina com as varia\u00e7\u00f5es de bloco<\/h4>\n
Desde o WordPress 5.7 (e Gutenberg 9.7<\/a>), a IU mostra informa\u00e7\u00f5es mais espec\u00edficas sobre varia\u00e7\u00f5es de blocos, enquanto anteriormente mostrava apenas informa\u00e7\u00f5es gen\u00e9ricas.<\/p>\n
\"Antes
Antes do WordPress 5.7, os elementos da interface mostravam informa\u00e7\u00f5es gen\u00e9ricas sobre varia\u00e7\u00f5es de blocos<\/figcaption><\/figure>\n
Os blocos incorporados e os \u00edcones sociais s\u00e3o constru\u00eddos como varia\u00e7\u00f5es de blocos; eles fornecem bons exemplos de correspond\u00eancia entre as informa\u00e7\u00f5es de blocos do WordPress e as varia\u00e7\u00f5es de blocos.<\/p>\n
\"Agora
Agora os elementos de interface mostram informa\u00e7\u00f5es espec\u00edficas para bloquear varia\u00e7\u00f5es<\/figcaption><\/figure>\n
Estas mudan\u00e7as afetam o inspetor de bloco, a barra de navega\u00e7\u00e3o de bloco e o p\u00e3o ralado. Desde Gutenberg 9.8<\/a>, este aprimoramento da IU tamb\u00e9m se aplica ao interruptor de bloco.<\/p>\n
\"Melhoria
Melhoria da IU para varia\u00e7\u00f5es de bloco no comutador de bloco<\/figcaption><\/figure>\n
Novas varia\u00e7\u00f5es de blocos APIs<\/h4>\n
O WordPress 5.7 tamb\u00e9m introduz novas APIs<\/a> que os desenvolvedores podem usar no registro de varia\u00e7\u00e3o de bloco para mostrar as informa\u00e7\u00f5es corretas de uma varia\u00e7\u00e3o de bloco (Gutenberg 9.7<\/a>).<\/p>\n
A nova propriedade isActive<\/code> \u00e9 uma fun\u00e7\u00e3o que aceita os atributos de um bloco. Voc\u00ea pode usar os atributos da varia\u00e7\u00e3o para determinar se uma varia\u00e7\u00e3o est\u00e1 ativa (ver tamb\u00e9m Refer\u00eancia API do bloco<\/a>).<\/p>\n
Os desenvolvedores de blocos podem usar esta fun\u00e7\u00e3o para exibir informa\u00e7\u00f5es de varia\u00e7\u00e3o ao inv\u00e9s de informa\u00e7\u00f5es de bloco. Um exemplo poderia ser o bloco embed<\/code>, onde podemos alterar o valor do atributo providerNameSlug<\/code> (um exemplo da nota do dev<\/a>):<\/p>\n
const variations = [\n{\n\tname: 'wordpress',\n\ttitle: 'WordPress',\n\tkeywords: [ __( 'post' ), __( 'blog' ) ],\n\tdescription: __( 'Embed a WordPress post.' ),\n\tattributes: { providerNameSlug: 'wordpress' },\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n},\n];<\/code><\/pre>\n
No exemplo a seguir, a propriedade isActive<\/code> \u00e9 utilizada para mudar o atributo de cor:<\/p>\n
variations: [\n{\n\tname: 'blue',\n\ttitle: __( 'Blue Quote' ),\n\tisDefault: true,\n\tattributes: { color: 'blue', className: 'is-style-blue-quote' },\n\ticon: 'format-quote',\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.color === variationAttributes.color\n},\n],<\/code><\/pre>\n
O novo usoBlockDisplayInformation<\/code> hook retorna informa\u00e7\u00f5es sobre um determinado bloco. O novo hook leva em conta a propriedade isActive<\/code> de uma varia\u00e7\u00e3o de bloco e retorna o title<\/code>, icon<\/code> e description<\/code> do bloco.<\/p>\n
Estas mudan\u00e7as afetam o Cart\u00e3o de Bloco (Ferramentas do Inspetor), Vista da Lista de Navega\u00e7\u00e3o (barra superior), e Breadcrumbs (ver tamb\u00e9m PR #27469<\/a>).<\/p>\n
Caracter\u00edsticas dos Novos Bot\u00f5es de Bloqueio<\/h3>\n
Algumas caracter\u00edsticas novas melhoram a funcionalidade e a interface dos bot\u00f5es de bloqueio.<\/p>\n
Dimens\u00f5es dos bot\u00f5es<\/h4>\n
Um novo controle dispon\u00edvel em Settings Sidebar agora nos permite definir uma largura percentual para bot\u00f5es alojados em blocos de bot\u00f5es (Gutenberg 9.4<\/a>).<\/p>\n
\"Ajustes
Ajustes de largura para bot\u00f5es<\/figcaption><\/figure>\n
Basta selecionar um bot\u00e3o e escolher 25%, 50%, 75%, ou 100%. As porcentagens se referem ao recipiente pai. A imagem abaixo mostra diferentes combina\u00e7\u00f5es de dimens\u00f5es de bot\u00f5es.<\/p>\n
\"Combina\u00e7\u00f5es
Combina\u00e7\u00f5es de bot\u00f5es com diferentes valores de largura<\/figcaption><\/figure>\n
Para obter mais informa\u00e7\u00f5es t\u00e9cnicas, confira os pedidos de retirada #25999<\/a> e #26781<\/a>.<\/p>\n
Layout Vertical<\/h4>\n
Esta nova caracter\u00edstica acrescenta varia\u00e7\u00f5es para orienta\u00e7\u00e3o vertical ao bloco de bot\u00f5es. Os usu\u00e1rios podem mudar de um layout horizontal para um vertical usando o comutador de Transforma\u00e7\u00f5es dispon\u00edvel no painel de ajustes do bloco (Gutenberg 9.6<\/a>).<\/p>\n
\"Bot\u00f5es
Bot\u00f5es de bloqueio com orienta\u00e7\u00e3o vertical<\/figcaption><\/figure>\n
Melhorias nos \u00cdcones Sociais<\/h3>\n
WordPress 5.7 adiciona novas op\u00e7\u00f5es de personaliza\u00e7\u00e3o aos \u00cdcones Sociais<\/a>: suporte a tamanho personalizado e cores personalizadas.<\/p>\n
Tamanho dos \u00cdcones Sociais<\/h4>\n
Com o bloco de \u00edcones sociais selecionado, a barra de ferramentas do bloco agora fornece um menu de op\u00e7\u00f5es de tamanho <\/strong>com tamanhos dispon\u00edveis (Gutenberg 9.4<\/a>).<\/p>\n
\"Tamanho
Tamanho “enorme” para \u00edcones sociais<\/figcaption><\/figure>\n
Cores Personalizadas em \u00cdcones Sociais<\/h4>\n
O mesmo bloco agora suporta configura\u00e7\u00f5es de cores, permitindo-nos definir diferentes cores personalizadas para \u00edcones e fundos (Gutenberg 9.9<\/a>).<\/p>\n
\"\u00cdcones
\u00cdcones sociais com cor de fundo preta<\/figcaption><\/figure>\n
Agora voc\u00ea pode usar a paleta de cores do tema para \u00cdcones Sociais, evitando que as cores dos \u00edcones entrem em conflito com o esquema de cores de seu site<\/a> (ver tamb\u00e9m PR #28084<\/a>).<\/p>\n
Suporte ao tamanho da fonte<\/h3>\n
O WordPress 5.7 adiciona suporte ao tamanho da fonte<\/a> tanto para blocos de Lista como de C\u00f3digo.<\/p>\n
Tamanho da fonte no bloco de lista<\/h4>\n
Uma placa tipogr\u00e1fica com controles para o tamanho da fonte foi adicionada \u00e0s configura\u00e7\u00f5es de blocos de Lista (Gutenberg 9.4<\/a>).<\/p>\n
\"Tamanho
Tamanho da fonte em Configura\u00e7\u00f5es de blocos de listagem<\/figcaption><\/figure>\n
Os usu\u00e1rios podem escolher um dos tamanhos de fonte dispon\u00edveis para itens da lista ou definir um tamanho de fonte personalizado expresso em pixels. O bot\u00e3o “Reset” restaura os valores padr\u00e3o.<\/p>\n
Suporte ao tamanho da fonte em bloco de c\u00f3digo<\/h4>\n
O WordPress 5.7 tamb\u00e9m adiciona suporte ao gerenciamento do tamanho da fonte dentro de blocos de c\u00f3digo. Com um bloco de C\u00f3digo selecionado, a barra lateral de configura\u00e7\u00f5es do bloco exibe um novo controle do tamanho da fonte. <\/strong>Este controle permite que voc\u00ea escolha um dos tamanhos predefinidos dispon\u00edveis em seu tema<\/a> ou defina um valor personalizado em pixels (Gutenberg 9.5<\/a>).<\/p>\n
\"Tamanhos
Tamanhos de fontes globais dispon\u00edveis em Twenty Twenty<\/figcaption><\/figure>\n
A implementa\u00e7\u00e3o deste recurso tamb\u00e9m permite utilizar vari\u00e1veis de estilo global no CSS de blocos de c\u00f3digo (ver tamb\u00e9m PR #27294<\/a>). A imagem abaixo mostra um bloco de C\u00f3digo no frontend com o tema Twenty Twenty<\/a> instalado.<\/p>\n
\"Estilos
Estilos globais de CSS em um bloco de c\u00f3digo<\/figcaption><\/figure>\n
Alinhamento em Altura Total em Bloco da Cobertura<\/h3>\n
WordPress 5.7 introduz um novo componente de Alinhamento da Barra de Ferramentas em Altura Total. Ele foi adicionado pela primeira vez ao editor de blocos com Gutenberg 9.5<\/a>. Agora, ele \u00e9 fundido no Core e implementado no bloco Cover.<\/p>\n
\"O
O Alinhamento em Altura Total foi implementado no bloco de Cobertura<\/figcaption><\/figure>\n
Se voc\u00ea alternar o bot\u00e3o da barra de ferramentas do bloco, mantendo um olho no controle de altura m\u00ednima, voc\u00ea ver\u00e1 que o alinhamento em altura total \u00e9 apenas um curto-circuito para 100vh<\/code> (leia mais sobre os comprimentos do viewport-percentage<\/a>).<\/p>\n
\"Alinhamento
Alinhamento em Altura Total em um Bloco de Cobertura<\/figcaption><\/figure>\n
Voc\u00ea pode usar Alinhamento em Altura Total em combina\u00e7\u00e3o com outros ajustes de controle como fundo fixo, posi\u00e7\u00e3o de conte\u00fado, e assim por diante. Voc\u00ea provavelmente ficar\u00e1 surpreso com o n\u00famero de efeitos impressionantes que voc\u00ea poder\u00e1 criar em suas p\u00e1ginas.<\/p>\n
Blocos e Padr\u00f5es de Arrastar e Soltar do inseridor<\/h3>\n
O inseridor de blocos agora suporta drag & drop para blocos e padr\u00f5es<\/a>. Os usu\u00e1rios podem pegar qualquer bloco ou padr\u00e3o do inseridor e coloc\u00e1-lo em qualquer lugar da tela do poste (Gutenberg 9.6<\/a> e 9.7<\/a>).<\/p>\n
\"Agora
Agora voc\u00ea pode arrastar blocos ou padr\u00f5es do inseridor para a tela do poste<\/figcaption><\/figure>\n
Note que o drag & drop s\u00f3 funciona se seu tema suportar padr\u00f5es de blocos.<\/p>\n
Bloco Espa\u00e7ador Semi-transparente<\/h3>\n
No lugar da antiga cor cinza opaca, o bloco Spacer agora tem um fundo semi-transparente (Gutenberg 9.8<\/a>).<\/p>\n
\"Um
Um bloco espa\u00e7ador opaco no WordPress 5.6<\/figcaption><\/figure>\n
Esta caracter\u00edstica deve facilitar a identifica\u00e7\u00e3o do bloco espa\u00e7ador em cima de qualquer cor de fundo.<\/p>\n
\"Um
Um bloco espa\u00e7ador semi-transparente no WordPress 5.7<\/figcaption><\/figure>\n
Melhorias adicionais no Editor de Blocos que merecem ser mencionadas<\/h3>\n
Nossa lista n\u00e3o cobrir\u00e1 todas as caracter\u00edsticas e melhorias fundidas no Core, portanto n\u00e3o deixe de verificar a documenta\u00e7\u00e3o oficial e as notas de desenvolvimento para um registro mais abrangente do que h\u00e1 de novo no editor de blocos com o WordPress 5.7.<\/p>\n
Mas s\u00f3 para citar alguns outros, em 5.7, voc\u00ea tamb\u00e9m vai encontrar:<\/p>\n