{"id":304,"date":"2026-08-22T11:24:54","date_gmt":"2026-08-22T09:24:54","guid":{"rendered":"https:\/\/helloblog.io\/pt\/wordpress-7-1-mary-lou-estilos-responsivos-multimedia-apis\/"},"modified":"2026-08-22T11:24:54","modified_gmt":"2026-08-22T09:24:54","slug":"wordpress-7-1-mary-lou-estilos-responsivos-multimedia-apis","status":"publish","type":"post","link":"https:\/\/helloblog.io\/pt\/wordpress-7-1-mary-lou-estilos-responsivos-multimedia-apis\/","title":{"rendered":"WordPress 7.1 \u00abMary Lou\u00bb: estilos responsivos, multim\u00e9dia no navegador e novas APIs"},"content":{"rendered":"\n

O WordPress 7.1, com o nome de c\u00f3digo \u00abMary Lou\u00bb, est\u00e1 a concentrar-se no modo como trabalhas no painel, no editor e com outros utilizadores. A vers\u00e3o junta controlos de estilo responsivo, um editor de multim\u00e9dia renovado, notas mais completas, dois blocos novos e v\u00e1rias altera\u00e7\u00f5es relevantes para quem desenvolve temas, plugins ou interfaces de administra\u00e7\u00e3o.<\/p>\n\n\n\n <\/i><\/span>\n \n Descarregar o WordPress 7.1<\/span>\n wordpress-7.1.zip<\/span><\/span>\n <\/span>\n <\/i><\/span>\n <\/a>\n\n\n

Estilos responsivos diretamente no editor<\/h2>\n\n\n\n

O Editor do site passa a permitir definir o aspeto de um bloco para diferentes tamanhos de ecr\u00e3, quer atrav\u00e9s dos Estilos globais, quer nas defini\u00e7\u00f5es de cada bloco. Estes controlos complementam as op\u00e7\u00f5es existentes para mostrar ou ocultar blocos, dispensando CSS personalizado em muitos layouts responsivos.<\/p>\n\n\n\n

Enquanto est\u00e1s a editar, podes pr\u00e9-visualizar as altera\u00e7\u00f5es em v\u00e1rios tamanhos de viewport. Assim, torna-se mais simples confirmar que o layout se adapta \u00e0 forma como o s\u00edtio \u00e9 consultado em ecr\u00e3s distintos.<\/p>\n\n\n\n

\"Controlos
Os estilos de um bloco podem variar consoante o tamanho do ecr\u00e3. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Uma barra de administra\u00e7\u00e3o consistente<\/h2>\n\n\n\n

A barra de administra\u00e7\u00e3o acompanha agora todos os editores, mantendo vis\u00edveis as ferramentas familiares e o contexto de navega\u00e7\u00e3o quando passas do painel para a edi\u00e7\u00e3o de conte\u00fados ou do design do s\u00edtio. Recebe tamb\u00e9m pequenos ajustes visuais que tornam a experi\u00eancia mais uniforme.<\/p>\n\n\n\n

\"Barra
A barra de administra\u00e7\u00e3o mant\u00e9m-se dispon\u00edvel nos editores. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Edi\u00e7\u00e3o de imagens num \u00fanico fluxo<\/h2>\n\n\n\n

O bot\u00e3o Recortar<\/strong> mant\u00e9m-se como ponto de entrada, mas abre agora um modal dedicado para editar imagens. Nesse espa\u00e7o podes recortar livremente ou por propor\u00e7\u00e3o, inverter a imagem na horizontal ou na vertical, rod\u00e1-la com controlo preciso ou por incrementos predefinidos e editar os respetivos metadados.<\/p>\n\n\n\n

\"Novo
O novo modal re\u00fane as opera\u00e7\u00f5es de edi\u00e7\u00e3o de imagem. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Notas em linha para revis\u00e3o colaborativa<\/h2>\n\n\n\n

As Notas deixam de estar limitadas ao n\u00edvel do bloco. Podes associar uma nota a uma passagem espec\u00edfica de texto, manter v\u00e1rias conversas no mesmo bloco e recolher notas extensas para n\u00e3o sobrecarregar a margem do editor.<\/p>\n\n\n\n

As Notas suportam agora texto rico: negrito, it\u00e1lico, c\u00f3digo e liga\u00e7\u00f5es. Ao escreveres @<\/code>, podes mencionar um colaborador e notific\u00e1-lo, o que torna a revis\u00e3o de conte\u00fados mais direta.<\/p>\n\n\n\n

\"Notas
As notas podem ser associadas a texto concreto e incluir men\u00e7\u00f5es. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Processamento de multim\u00e9dia no navegador<\/h2>\n\n\n\n

A compress\u00e3o, o redimensionamento e a gera\u00e7\u00e3o de miniaturas passam a decorrer no navegador. O processamento usa uma compila\u00e7\u00e3o WebAssembly do libvips, reduzindo a carga do servidor e ajudando a evitar limites de mem\u00f3ria do PHP e timeouts em carregamentos de ficheiros grandes.<\/p>\n\n\n\n

O WordPress 7.1 acrescenta suporte nativo para AVIF, HEIC e mapas de ganho HDR, formatos que c\u00e2maras e telem\u00f3veis modernos j\u00e1 produzem. A convers\u00e3o opcional de GIF para v\u00eddeo gera habitualmente ficheiros menores; os indicadores de progresso e as repeti\u00e7\u00f5es autom\u00e1ticas tornam os carregamentos mais resilientes quando a liga\u00e7\u00e3o falha.<\/p>\n\n\n\n

\"Carregamento
O processamento no navegador reduz a depend\u00eancia de recursos do servidor. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Blocos e op\u00e7\u00f5es de apresenta\u00e7\u00e3o novos<\/h2>\n\n\n\n

A vers\u00e3o introduz os blocos Playlist e Separadores, al\u00e9m de mais op\u00e7\u00f5es para controlar o comportamento e o estilo dos conte\u00fados.<\/p>\n\n\n\n

Criar listas de reprodu\u00e7\u00e3o<\/h3>\n\n\n\n

O bloco Playlist permite reunir v\u00e1rias faixas de \u00e1udio numa lista de reprodu\u00e7\u00e3o. Pode incluir opcionalmente uma forma de onda, dando a quem ouve uma indica\u00e7\u00e3o visual de cada faixa durante a reprodu\u00e7\u00e3o.<\/p>\n\n\n\n

\"Bloco
As listas de reprodu\u00e7\u00e3o podem apresentar uma forma de onda opcional. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Definir breakpoints do tema<\/h3>\n\n\n\n

Os temas de blocos podem definir os pr\u00f3prios breakpoints para dispositivos m\u00f3veis e tablets no theme.json<\/code>. Estes valores substituem os valores predefinidos usados pelos estilos responsivos e pela visibilidade de blocos.<\/p>\n\n\n\n

\"Configura\u00e7\u00e3o
Os temas podem substituir os breakpoints predefinidos. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Organizar conte\u00fado em separadores<\/h3>\n\n\n\n

O bloco Separadores organiza informa\u00e7\u00e3o relacionada em pain\u00e9is, em vez de mostrar todo o conte\u00fado ao mesmo tempo. \u00c9 uma op\u00e7\u00e3o para apresentar mais informa\u00e7\u00e3o sem tornar a p\u00e1gina visualmente densa.<\/p>\n\n\n\n

\"Bloco
Os separadores permitem agrupar conte\u00fados relacionados. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Adicionar \u00edcones personalizados<\/h3>\n\n\n\n

A biblioteca de \u00edcones pode ser alargada com cole\u00e7\u00f5es pr\u00f3prias, que ficam dispon\u00edveis no editor juntamente com os \u00edcones inclu\u00eddos no WordPress. Esta capacidade serve, por exemplo, para disponibilizar uma linguagem visual espec\u00edfica de um projeto sem recorrer a um plugin adicional.<\/p>\n\n\n\n

\"Adi\u00e7\u00e3o
As cole\u00e7\u00f5es personalizadas ficam dispon\u00edveis ao lado da biblioteca nativa. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Estilizar estados interativos dos bot\u00f5es<\/h3>\n\n\n\n

Os blocos Bot\u00e3o passam a poder receber estilos distintos para os estados hover<\/code>, focus<\/code> e active<\/code> nos controlos de estilo do editor. Podes aplicar estes estilos a um bot\u00e3o isolado ou a todos os bot\u00f5es.<\/p>\n\n\n\n

\"Controlos
Os estados de intera\u00e7\u00e3o dos bot\u00f5es configuram-se no editor. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Canvas do editor isolado do painel<\/h2>\n\n\n\n

O editor de artigos passa a estar totalmente dentro de um iframe para todos os temas, tal como j\u00e1 acontecia no Editor do site. O canvas de edi\u00e7\u00e3o corre separadamente da interface de administra\u00e7\u00e3o, evitando que os estilos do painel interfiram com o conte\u00fado.<\/p>\n\n\n\n

As unidades relativas \u00e0 viewport e as media queries passam a apontar diretamente para o canvas. Para layouts responsivos, isto torna o comportamento durante a edi\u00e7\u00e3o mais previs\u00edvel e consistente.<\/p>\n\n\n\n

APIs e ferramentas para desenvolvimento<\/h2>\n\n\n\n

A SVG Icon API torna-se p\u00fablica. Podes registar cole\u00e7\u00f5es e \u00edcones pr\u00f3prios e us\u00e1-los no editor atrav\u00e9s de fun\u00e7\u00f5es como wp_register_icon_collection()<\/code>, wp_register_icon()<\/code> e wp_get_icon()<\/code>.<\/p>\n\n\n\n

A Abilities API expande a infraestrutura introduzida no WordPress 6.9 com um ciclo de execu\u00e7\u00e3o filtr\u00e1vel, valida\u00e7\u00e3o personalizada e descoberta partilhada. Estas adi\u00e7\u00f5es facilitam a cria\u00e7\u00e3o de integra\u00e7\u00f5es e automatiza\u00e7\u00f5es sobre o WordPress, incluindo ferramentas baseadas em IA.<\/p>\n\n\n\n

Um novo Design System oferece suporte base para aplicar temas a interfaces de administra\u00e7\u00e3o: cor, arredondamento e estilos de cursor. Os programadores podem usar tokens de design sem\u00e2nticos e o componente React ThemeProvider<\/code> para criar interfaces personalizadas mais coerentes com o restante WordPress.<\/p>\n\n\n\n

Quem cria temas recebe estilos responsivos e pseudoestados hover<\/code>, focus<\/code>, focus-visible<\/code> e active<\/code> via theme.json<\/code>. H\u00e1 ainda novos filtros para configurar os ecr\u00e3s DataViews e DataForm que suportam as \u00e1reas P\u00e1ginas, Modelos, Partes e Padr\u00f5es do Editor do site.<\/p>\n\n\n\n

Acessibilidade e navega\u00e7\u00e3o<\/h2>\n\n\n\n

As novas fun\u00e7\u00f5es wp_get_tooltip()<\/code> e wp_get_toggletip()<\/code> levam tooltips acess\u00edveis a mais zonas da administra\u00e7\u00e3o, incluindo as meta boxes dos artigos e o ecr\u00e3 de in\u00edcio de sess\u00e3o. O suporte para leitores de ecr\u00e3 tamb\u00e9m melhora nas interfaces de administra\u00e7\u00e3o, com etiquetas mais claras e navega\u00e7\u00e3o mais previs\u00edvel nas tabelas de lista de artigos.<\/p>\n\n\n\n

Os blocos Separadores e Playlist, a par de melhorias na navega\u00e7\u00e3o e intera\u00e7\u00e3o do editor, fazem parte do trabalho de acessibilidade inclu\u00eddo nesta vers\u00e3o. Estas altera\u00e7\u00f5es est\u00e3o a tornar o WordPress mais f\u00e1cil de navegar e utilizar para mais pessoas.<\/p>\n\n\n\n

Biblioteca multim\u00e9dia e carregamento especulativo<\/h2>\n\n\n\n

A Biblioteca multim\u00e9dia usa scroll infinito por predefini\u00e7\u00e3o, embora cada utilizador possa voltar \u00e0 pagina\u00e7\u00e3o nas respetivas op\u00e7\u00f5es. Os valores predefinidos do carregamento especulativo podem agora ser definidos com vari\u00e1veis de ambiente ou constantes, permitindo que alojamentos e propriet\u00e1rios de s\u00edtios configurem o prefetch de p\u00e1ginas sem escrever um plugin.<\/p>\n\n\n\n

Como avan\u00e7ar com a atualiza\u00e7\u00e3o<\/h2>\n\n\n\n

Antes de atualizares um s\u00edtio de produ\u00e7\u00e3o, confirma a compatibilidade dos temas e plugins e testa sobretudo os fluxos de multim\u00e9dia, os estilos responsivos e qualquer interface de administra\u00e7\u00e3o personalizada. Para detalhes de instala\u00e7\u00e3o, problemas corrigidos e altera\u00e7\u00f5es de ficheiros, consulta as notas de lan\u00e7amento<\/a>; para notas t\u00e9cnicas dirigidas ao desenvolvimento, abre o Field Guide do WordPress 7.1<\/a>.<\/p>\n\n\n

\n

Refer\u00eancias \/ Fontes<\/h2>\n