{"id":52728,"date":"2022-09-09T04:50:09","date_gmt":"2022-09-09T07:50:09","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=52728&preview=true&preview_id=52728"},"modified":"2023-08-22T06:01:57","modified_gmt":"2023-08-22T09:01:57","slug":"wordpress-6-1","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-6-1\/","title":{"rendered":"O Que H\u00e1 de Novo no WordPress 6.1: Tipografia de Fluidos, Sistema de Template Melhorado, Novo Site Health Checks, e Muito Mais!"},"content":{"rendered":"

WordPress 6.1 “Misha” foi lan\u00e7ado em 1 de novembro de 2022<\/a>.\u00a0A terceira grande atualiza\u00e7\u00e3o do ano segue o\u00a0WordPress 6.0 Arturo<\/a>, lan\u00e7ado em 24 de maio, e WordPress 5.9 Josephine<\/a>, lan\u00e7ado em 25 de janeiro.<\/p>\n

Como sempre acontece, novas vers\u00f5es do WordPress trazem novas funcionalidades, melhorias e corre\u00e7\u00f5es de bugs das \u00faltimas vers\u00f5es do plugin Gutenberg para o n\u00facleo. E o WordPress 6.1 n\u00e3o \u00e9 exce\u00e7\u00e3o, j\u00e1 que 11 vers\u00f5es do plugin Gutenberg<\/a> foram fundidas no n\u00facleo, de 13.1 a 14.1.<\/p>\n

Neste artigo, apresentaremos as novas funcionalidades que vir\u00e3o com o novo grande lan\u00e7amento do WordPress.<\/p>\n

Matias Ventura nos deu algumas ideias sobre o Roadmap para 6.1<\/a>, onde ele disse que o objetivo do 6.1 \u00e9 refinar as experi\u00eancias introduzidas com 5.9 e 6.0 e corrigir algumas coisas \u00e0 medida que nos aproximamos da fase 3 do Roadmap de Gutenberg.<\/p>\n\n

1. Melhorias no editor de templates<\/strong>: Uma das principais novidades \u00e9 o Editor de Template<\/a>. O WordPress 6.1 deve introduzir a capacidade de navegar, visualizar e editar a estrutura do site.<\/p>\n

2. Padr\u00f5es de templates<\/strong>: O objetivo \u00e9 dar aos padr\u00f5es de blocos um papel central<\/a> na cria\u00e7\u00e3o de templates e p\u00e1ginas, adaptando aos tipos de artigos<\/a> e tipos de blocos personalizados, melhorando o gerenciamento de padr\u00f5es salvos, etc.<\/p>\n

3. Estilos e blocos globais e ferramentas de design<\/strong>: O WordPress 6.1 permitir\u00e1 gerenciar webfonts, implementar tipografia responsiva, e expandir o conjunto de ferramentas dispon\u00edveis para blocos.<\/p>\n

Dito isso, daremos uma olhada mais de perto em alguns dos recursos mais poderosos que v\u00eam com o WordPress 6.1.<\/p>\n

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

Tipografia e espa\u00e7amento de fluidos<\/h2>\n

WordPress 6.1 adiciona suporte<\/a> para tipografia de fluidos<\/a> via calc<\/code><\/a>\/clamp<\/code><\/a> Fun\u00e7\u00f5es do CSS.<\/p>\n

A express\u00e3o Fluid tipografia<\/a> descreve a capacidade do texto de se adaptar \u00e0 largura do viewport, suavemente escalando de uma largura m\u00ednima para uma largura m\u00e1xima.<\/p>\n

\u00c9 algo diferente do que voc\u00ea pode conseguir com as consultas de m\u00eddia, pois as consultas de m\u00eddia permitem que os temas redimensionem o texto dependendo do tamanho espec\u00edfico do viewport, mas n\u00e3o fazem nada entre valores diferentes.<\/p>\n

Alguns temas j\u00e1 suportam tipografia fluida. Twenty Twenty-Two<\/a>, por exemplo, usam a fun\u00e7\u00e3o CSS clamp()<\/code> para v\u00e1rios tamanhos de fontes. Por exemplo, a fun\u00e7\u00e3o CSS :<\/p>\n

\"settings\": {\n\t...\n\t\"custom\": {\n\t\t\"spacing\": {\n\t\t\t\"small\": \"max(1.25rem, 5vw)\",\n\t\t\t\"medium\": \"clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))\",\n\t\t\t\"large\": \"clamp(4rem, 10vw, 8rem)\",\n\t\t\t\"outer\": \"var(--wp--custom--spacing--small, 1.25rem)\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"font-size\": {\n\t\t\t\t\"huge\": \"clamp(2.25rem, 4vw, 2.75rem)\",\n\t\t\t\t\"gigantic\": \"clamp(2.75rem, 6vw, 3.25rem)\",\n\t\t\t\t\"colossal\": \"clamp(3.25rem, 8vw, 6.25rem)\"\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n
Como voc\u00ea pode ver no c\u00f3digo acima, os valores do tamanho da fonte fluida s\u00e3o usados para cada tamanho de fonte.<\/p>\n
Agora, a partir do WordPress 6.1, os temas s\u00e3o habilitados para gerar automaticamente tamanhos de fontes fluidas<\/a>, declarando a nova propriedade typography.fluid<\/code> da seguinte forma:<\/p>\n
\"settings\": {\n\t....\n\t\"typography\": {\n\t\t\"fluid\": true,\n\t\t\"fontSizes\": [\n\t\t\t{\n\t\t\t\t\"size\": \"2rem\",\n\t\t\t\t\"fluid\": {\n\t\t\t\t\t\"min\": \"2rem\",\n\t\t\t\t\t\"max\": \"2.5rem\"\n\t\t\t\t},\n\t\t\t\t\"slug\": \"medium\",\n\t\t\t\t\"name\": \"Medium\"\n\t\t\t}\n\t\t]\n}<\/code><\/pre>\n
Usando typography.fluid<\/code> e typography.fontSizes[].fluid<\/code>, o valor de cada tamanho de fonte \u00e9 calculado automaticamente usando a seguinte f\u00f3rmula<\/a>:<\/p>\n
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});<\/code><\/pre>\n
Por exemplo:<\/p>\n
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});<\/code><\/pre>\n
Note que, no momento em que escrevemos este artigo, a Tipografia Fluida \u00e9 uma funcionalidade experimental. Voc\u00ea pode explorar os detalhes t\u00e9cnicos em Suportes de bloco: adicionar tipografia de fluidos<\/a>.<\/p>\n
Fluid typography is a significant improvement for building modern #WordPress<\/a> websites. We just updated @frostwp<\/a> to include this feature. Here\u2019s a great read from @richard_tabor<\/a> into what it is and why it matters. https:\/\/t.co\/Bq5YuHX3wi<\/a><\/p>— Brian Gardner (@bgardner) August 8, 2022<\/a><\/blockquote>