Gerenciando fontes em temas de bloco do WordPress

As fontes são uma característica definidora do design de qualquer site. Isso inclui temas do WordPress, onde é comum que desenvolvedores de temas integrem um serviço como Google Fonts nas configurações do WordPress Customizer para um tema baseado em PHP “clássico”. Esse não é o caso dos temas de bloco do WordPress. Embora a integração do Google Fonts em temas clássicos esteja bem documentada, não há nada atualmente disponível para temas de bloco no Manual do Tema WordPress.

É isso que veremos neste artigo. Os temas de bloco podem realmente usar o Google Fonts, mas o processo para registrá-los é muito diferente do que você pode ter feito antes em temas clássicos.

O que já sabemos

Como eu disse, há pouco para nós irmos além de começar. O tema Twenty Twenty-Two é o primeiro tema WordPress padrão baseado em blocos e demonstra como podemos usar arquivos de fonte baixados como ativos no tema. Mas é bastante pesado porque envolve algumas etapas: (1) cadastre os arquivos no functions.php lima e (2) definir as fontes agrupadas no theme.json lima.

Desde que Twenty Twenty-Two foi lançado, porém, o processo ficou mais simples. As fontes agregadas agora podem ser definidas sem registrá-las, conforme mostrado na Vinte e vinte e três tema. No entanto, o processo ainda exige que baixemos manualmente os arquivos de fonte e os agrupe nos temas. Esse é um obstáculo que acaba com o propósito de fontes simples, drop-in e hospedadas que são servidas em um CDN rápido.

O que há de novo

Se você ainda não sabia, o Projeto Gutenberg é um plug-in experimental onde os recursos desenvolvidos para o WordPress Block e o Editor do Site estão disponíveis para uso e teste antecipados. em um recente Artigo do Modelador de Temas, arquiteto líder do projeto Gutenberg Mathias Ventura discute como o Google Fonts — ou qualquer outra fonte baixada — pode ser adicionado para bloquear temas usando o Criar tema de bloco plugin.

Este curto vídeo em Aprenda WordPress fornece uma boa visão geral do plug-in Create Block Theme e como ele funciona. Mas o resultado final é que ele faz o que diz na lata: cria temas de blocos. Mas ele faz isso fornecendo controles na interface do usuário do WordPress que permitem criar um tema inteiro, um tema filho ou uma variação de estilo de tema sem escrever nenhum código ou ter que tocar em arquivos de modelo.

Eu tentei! E como o Create Block Theme é criado e mantido pelo WordPress.org equipe, eu diria que é a melhor direção que temos para integrar o Google Fonts a um tema. Dito isso, vale a pena notar que o plug-in está em desenvolvimento ativo. Isso significa que as coisas podem mudar muito rapidamente.

Antes de ver como tudo funciona, vamos primeiro nos atualizar brevemente com o processo “tradicional” para adicionar Google Fonts a temas clássicos do WordPress.

Como costumava ser feito

Este artigo do ThemeShaper de 2014 fornece um excelente exemplo de como costumávamos fazer isso em temas PHP clássicos, como é este artigo mais recente da Cloudways por Ibad Ur Rehman.

Para refrescar a memória, aqui está um exemplo do padrão tema vinte e dezessete mostrando como as fontes do Google são enfileiradas no functions.php arquivo.

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' ); if ( 'off' !== $libre_franklin ) { $font_families = array(); $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i'; $query_args = array( 'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin,latin-ext' ), ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); } return esc_url_raw( $fonts_url );
}

Então o Google Fonts está pré-conectado ao tema assim:

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

O que há de errado com a maneira tradicional

Ótimo, certo? Há um problema, no entanto. Em janeiro de 2022, um Tribunal regional alemão impôs uma multa no proprietário de um site por violar os regulamentos da Europa Requisitos de GDPR. O problema? Enfileirar o Google Fonts no site expôs o endereço IP do visitante, colocando em risco a privacidade do usuário. CSS-Tricks cobriu isso um tempo atrás.

A Criar tema de bloco O plug-in atende aos requisitos de privacidade do GDPR, pois utiliza a API do Google Fonts para servir apenas como um proxy para o fornecedor local. As fontes são fornecidas ao usuário no mesmo site, e não nos servidores do Google, protegendo a privacidade. WP Tavern discute a decisão do tribunal alemão e inclui links para guias de auto-hospedagem do Google Fonts.

Como usar o Google Fonts com temas de blocos

Isso nos leva à maneira “moderna” de usar o Google Fonts com temas de bloco do WordPress. Primeiro, vamos configurar um site de teste local. Eu uso o Flywheel Locais de aplicativo para o desenvolvimento local. Você pode usar isso ou o que preferir, então use o Plug-in de dados de teste de tema pela Equipe de Temas do WordPress para trabalhar com conteúdo fictício. E, claro, você vai querer o Criar tema de bloco plugin lá também.

Você instalou e ativou esses plugins? Em caso afirmativo, navegue até Aparência → Gerenciar fontes do tema no menu de administração do WordPress.

A tela “Gerenciar fontes do tema” exibe uma lista de todas as fontes já definidas no tema theme.json arquivo. Há também duas opções na parte superior da tela:

• Adicione fontes do Google. Esta opção adiciona Google Fonts diretamente ao tema da API de fontes do Google.
• Adicione fontes locais. Esta opção adiciona arquivos de fonte baixados ao tema.

Estou usando um tema completamente em branco do WordPress chamado Tema vazio. Você é bem-vindo para criar seu próprio tema, mas gostaria de avisar que renomeei Emptytheme para “EMPTY-BLANK” e o modifiquei, então não há fontes e estilos predefinidos.

Pensei em compartilhar uma captura de tela da estrutura de arquivos do meu tema e theme.json arquivo para mostrar que literalmente não há estilos ou configurações acontecendo.

Vamos clicar no botão "Adicionar Google Fonts". Isso nos leva a uma nova página com opções para escolher qualquer fonte disponível no atual Google FAPI onts.

Para esta demonstração, selecionei Inter no menu de opções e selecione os pesos 300, Regular e 900 na tela de visualização:

Depois de salvar minhas seleções, os estilos de fonte do Inter que selecionei são automaticamente baixados e armazenados no diretório do tema. assets/fonts pasta:

Observe também como essas seleções foram gravadas automaticamente no theme.json arquivo nessa captura de tela. O plug-in Create Block Theme até adiciona o caminho para os arquivos de fonte.

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

Se formos à tela principal do Create Block Theme e clicarmos no botão Gerenciar fontes do tema botão novamente, veremos as variantes de peso 300, 400 (regular) e 900 do Inter exibidas no painel de visualização.

A caixa de visualização de texto de demonstração na parte superior permite até visualizar as fontes selecionadas na frase, cabeçalho e parágrafo com o controle deslizante de seleção do tamanho da fonte. Você pode conferir esse novo recurso em ação em este vídeo do GitHub.

A(s) fonte(s) selecionada(s) também estão disponíveis no Editor do Site Estilos globais (Aparência → editor), especificamente no painel Design.

A partir daqui, navegue até Modelos → Índice e clique no azul Editar botão para editar o index.html modelo. Queremos abrir o Estilos globais configurações, que são representadas como um ícone de contraste localizado no canto superior direito da tela. Quando clicamos no Texto configurações e abra o fonte menu no Tipografia seção… vemos o Inter!

Mesma coisa, mas com fontes locais

Também podemos adicionar fontes locais a um tema, pois o plug-in Create Block Theme fornece essa opção. O benefício é que você pode usar qualquer arquivo de fonte que desejar de qualquer serviço de fonte de sua preferência.

Sem o plug-in, teríamos que pegar nossos arquivos de fonte, soltá-los em algum lugar na pasta do tema e, em seguida, recorrer à rota tradicional do PHP para colocá-los na fila functions.php arquivo. Mas podemos deixar que o WordPress carregue esse fardo para nós carregando o arquivo da fonte no Adicionar fontes locais tela usando a interface Create Block Theme. Depois que um arquivo é selecionado para upload, as caixas de definições de face de fonte são preenchidas automaticamente.

Mesmo que possamos usar qualquer .ttf, .woffou .woff2 arquivo, eu simplesmente baixei Abra arquivos de fonte Sans do Google Fonts para este exercício. Peguei duas variações de peso, regular e 800.

O mesmo gerenciamento automático de arquivos mágicos e theme.json atualização que vimos com a opção Google Fonts acontece mais uma vez quando carregamos os arquivos de fonte (que são feitos um de cada vez). Confira onde as fontes foram parar na minha pasta de temas e como elas são adicionadas theme.json:

Removendo fontes

O plug-in também nos permite remover arquivos de fonte de um tema de bloco do administrador do WordPress. Vamos excluir uma das variantes do Open Sans que instalamos na última seção para ver como isso funciona.

Clicando no Eliminar links aciona um aviso para você confirmar a exclusão. vamos clicar OK para continuar.

Vamos abrir nossa pasta de temas e verificar o theme.json arquivo. Com certeza, o arquivo Open Sans 800 que excluímos na tela do plug-in removeu o arquivo de fonte da pasta do tema e a referência a ele desapareceu há muito tempo theme.json.

Há um trabalho contínuo acontecendo

Fala-se em adicionar este recurso “Gerenciador de fontes” ao WordPress Core em vez de precisar de um plugin separado.

Uma iteração inicial do recurso está disponível no repositório, e usa exatamente a mesma abordagem que usamos neste artigo. Deveria ser Compatível com GDPR, também. O recurso é programado para pousar com o WordPress 6.3 lançamento ainda este ano.

Resumindo

O plug-in Create Block Theme aprimora significativamente a experiência do usuário quando se trata de lidar com fontes em temas de bloco do WordPress. O plug-in nos permite adicionar ou excluir qualquer fonte respeitando os requisitos do GDPR.

Vimos como selecionar uma fonte do Google ou fazer upload de um arquivo de fonte local automaticamente coloca a fonte na pasta do tema e a registra no theme.json arquivo. Também vimos como a fonte é uma opção disponível nas configurações de Estilos Globais no Editor do Site. E se precisarmos remover uma fonte? O plug-in cuida totalmente disso também - sem tocar em arquivos de tema ou código.

Obrigado por ler! Se você tiver quaisquer comentários ou sugestões, compartilhe-os nos comentários. Eu adoraria saber o que você acha dessa possível direção para o gerenciamento de fontes no WordPress.

Recursos adicionais

Baseei-me em muita pesquisa para escrever este artigo e pensei em compartilhar os artigos e recursos que usei para fornecer a você um contexto adicional.

gerenciamento de fontes do WordPress

Problemas do GitHub

Requisitos europeus do GDPR

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/