Gestión de fuentes en temas de bloque de WordPress | trucos CSS

Las fuentes son una característica definitoria de cualquier diseño de sitio web. Esto incluye temas de WordPress, donde es común que los desarrolladores de temas integren un servicio como Fuentes de Google en la configuración del Personalizador de WordPress para un tema "clásico" basado en PHP. Este no es exactamente el caso para los temas de bloque de WordPress. Aunque la integración de Google Fonts en temas clásicos está bien documentada, actualmente no hay nada disponible para temas de bloque en Guía de temas de WordPress.

Eso es lo que vamos a ver en este artículo. De hecho, los temas de bloque pueden usar Google Fonts, pero el proceso para registrarlos es muy diferente de lo que puede haber hecho antes en los temas clásicos.

lo que ya sabemos

Como dije, no hay mucho que seguir para empezar. El tema Twenty Twenty-Two es el primer tema predeterminado de WordPress basado en bloques y demuestra cómo podemos usar los archivos de fuentes descargados como activos de tema. Pero esto es bastante engorroso porque implica varios pasos: (1) registrar los archivos en functions.php archivo y (2) definir las fuentes del paquete en theme.json archivo.

Sin embargo, después del lanzamiento de Twenty Twenty-Two, el proceso se volvió más simple. Las fuentes empaquetadas ahora se pueden definir sin registrarlas, como se muestra en Tema veintitrésSin embargo, el proceso todavía requiere que descarguemos manualmente los archivos de fuentes y los agrupemos en temas, lo que es un obstáculo que anula el propósito de las fuentes alojadas sencillas e integrables que se sirven en un CDN rápido.

Qué hay de nuevo

Si aún no lo sabías, Proyecto Gutenberg es un complemento experimental en el que las funciones que se están desarrollando para WordPress Block y Site Editor están disponibles para su uso y prueba iniciales. Moldeador de tema de artículoarquitecto principal del Proyecto Gutenberg Mathias Ventura analiza cómo Google Fonts, o cualquier otra fuente descargada, para el caso, se puede agregar para bloquear temas usando Crear un tema de bloque enchufar.

que corto vídeo en Aprende WordPress proporciona una buena descripción general del complemento Create Block Theme y cómo funciona. Pero lo más importante, hace lo que dice en la lata: crea temas de bloque. Pero lo hace al proporcionar controles de interfaz de usuario de WordPress que le permiten crear un tema completo, un tema secundario o una variación de un estilo de tema sin escribir código o tener que tocar archivos de plantilla.

¡Lo intenté! Y dado que Create Block Theme es creado y mantenido por WordPress.org equipo, diría que esta es la mejor dirección que tenemos para integrar Google Fonts en un tema. Sin embargo, definitivamente vale la pena señalar que el complemento está en desarrollo activo. Esto significa que las cosas pueden cambiar bastante rápido.

Antes de explicar cómo funciona todo, primero repasemos rápidamente el proceso "tradicional" para agregar Google Fonts a los temas clásicos de WordPress.

Cómo solía hacerse una vez

Este artículo de ThemeShaper de 2014 proporciona un excelente ejemplo de cómo solíamos hacer esto en los temas clásicos de PHP tal como son este artículo más reciente de Cloudways de Ibad Ur Rehman.

Para refrescar nuestra memoria, aquí hay un ejemplo del valor predeterminado Tema para Veinte Diecisiete mostrando cómo se ponen en cola las fuentes de Google functions.php archivo.

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 );
}

Luego, Google Fonts está previnculado al tema de la siguiente manera:

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 );

¿Qué tiene de malo la forma tradicional?

Genial, ¿verdad? Sin embargo, hay un problema. En enero de 2022 un El tribunal regional alemán impuso una multa del propietario de un sitio web por violar las normas europeas Requisitos del RGPD¿El problema? Colocar Google Fonts en la cola del sitio expuso la dirección IP del visitante, comprometiendo la privacidad del usuario. CSS-Tricks cubrió esto hace un tiempo.

El Crear un tema de bloque El complemento cumple con los requisitos de privacidad de GDPR, ya que utiliza la API de Google Fonts para servir únicamente como un proxy para el proveedor local. Las fuentes se proporcionan al usuario en el mismo sitio web, no en los servidores de Google, protegiendo la privacidad. Taberna WP analiza la decisión de la corte alemana e incluye enlaces a guías sobre Google Fonts con alojamiento propio.

Cómo usar Google Fonts con temas de bloques

Esto nos lleva a la forma "moderna" actual de usar Google Fonts con temas de bloque de WordPress. Primero, creemos un sitio de prueba local. Estoy usando Flywheel local aplicación de desarrollo local. Puedes usar esto o lo que prefieras y luego usar Complemento de datos de prueba de tema por el equipo de temas de WordPress por trabajar con contenido ficticio. Y por supuesto querrás Crear un tema de bloque complemento allí también.

¿Has instalado y activado estos complementos? Si es así, ábrelo. Apariencia → Administrar las fuentes del tema desde el menú de administración de WordPress.

La pantalla Administrar de fuentes del tema' muestra una lista de todas las fuentes ya definidas en el tema theme.json También hay dos opciones en la parte superior de la pantalla:

• Agregar fuentes de Google. Esta opción agrega Google Fonts directamente al tema desde la API de Google Fonts.
• Agregue fuentes locales. Esta opción agrega archivos de fuentes descargados al tema.

Estoy usando un tema de WordPress completamente en blanco llamado Tema vacíoPuede saltar con su propio tema, pero quería informarle que cambié el nombre de Emptytheme a "EMPTY-EMPTY" y lo modifiqué para que no tuviera fuentes ni estilos predefinidos.

Pensé en compartir una captura de pantalla de la estructura de archivos de mi tema y theme.json para indicar que literalmente no hay estilos ni configuraciones.

Hagamos clic en el botón "Agregar Google Fonts", nos lleva a una nueva página con opciones para seleccionar cualquier fuente disponible de la actual Google FAPI de ontas.

Para esta demostración elegí Enterrar Desde el menú de opciones y seleccione los pesos 300, Regular y 900 desde la pantalla de vista previa:

Después de guardar mis selecciones, mis estilos de fuente Inter seleccionados se descargan automáticamente y se almacenan en el tema assets/fonts carpeta:

Observe también cómo estas selecciones se guardan automáticamente en el theme.json archivo en esta captura de pantalla. El complemento Create Block Theme incluso agrega la ruta a los archivos de fuente.

{
  "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"
              ]
            }
          ]
        }
      ]
    }
  }
}

Si vamos a la pantalla principal de Create Block Theme y pulsamos sobre Administrar las fuentes del tema de nuevo, veremos las variantes de peso 300, 400 (regular) y 900 del Inter en el panel de vista previa.

A campo para ver el texto de demostración en la parte superior incluso le permite obtener una vista previa de las fuentes seleccionadas en la oración, el encabezado y el párrafo con el control deslizante de tamaño de fuente. Puede ver esta nueva función en acción en este video en GitHub.

Las fuentes seleccionadas también están disponibles en el editor del sitio Estilos globales (Apariencia → Editor), concretamente en el panel de diseño.

Desde aquí navegue hasta Plantillas → Índice y haga clic en el azul edición botón para editar el index.html plantilla que queremos abrir Estilos globales ajustes, que se representan como un icono de contraste ubicado en la esquina superior derecha de la pantalla Texto configuración y abrir fuente menú en Tipografía sección... ¡vemos al Inter!

Lo mismo pero con fuentes locales.

También podemos considerar agregar fuentes locales a un tema, ya que el complemento de tema de bloque brinda esta opción.La ventaja es que puede usar cualquier archivo de fuente que desee de cualquier servicio de fuente que prefiera.

Sin el complemento, tendríamos que tomar nuestros archivos de fuentes, colocarlos en algún lugar de la carpeta del tema y luego recurrir a la ruta PHP tradicional de ponerlos en la cola. functions.php Pero podemos dejar que WordPress lleve esa carga por nosotros subiendo el archivo de fuente al Agregar fuentes locales pantalla usando la interfaz de creación de tema de bloque Una vez que se selecciona un archivo para cargar, los campos de definición de fuente se llenan automáticamente.

Aunque podemos usar cualquier .ttf, .woffo .woff2 archivo que acabo de descargar Abra los archivos de fuente Sans de Google Fonts para este ejercicio. Agarré dos variaciones de peso, regular y 800.

La misma gestión automática de archivos mágicos y theme.json la actualización que vimos con la opción Google Fonts ocurre nuevamente cuando subimos los archivos de fuentes (que se hacen uno por uno). Vea dónde terminaron las fuentes en mi carpeta de temas y cómo se agregan a la theme.json:

Eliminar fuentes

El complemento también nos permite eliminar archivos de fuentes de un tema de bloque del administrador de WordPress. Eliminemos una de las variantes de Open Sans que instalamos en la última sección para Veamos cómo funciona esto.

Al hacer clic en Eliminación enlaces activa una advertencia para confirmar la eliminación. haremos clic Bueno continuar.

Abramos nuestra carpeta de temas y comprobemos theme.json Por supuesto, el archivo Open Sans 800 que eliminamos en la pantalla del complemento eliminó el archivo de fuente de la carpeta del tema y la referencia a él desapareció hace mucho tiempo. theme.json.

Trabajo en progreso

Se habla de agregar esta función de "Administrador de fuentes" a WordPress Core en lugar de necesitar un complemento separado.

Iteración inicial de la función está disponible en el repositorioy usa exactamente el mismo enfoque que usamos en este artículo. Debe ser Cumple con el RGPDtambién programado para aterrizar con WordPress 6.3 lanzamiento a finales de este año.

resumiendo

El complemento Crear tema de bloque mejora en gran medida la experiencia del usuario cuando se trata de manejar fuentes en temas de bloque de WordPress. El complemento nos permite agregar o eliminar cualquier fuente mientras cumplimos con los requisitos de GDPR.

Vimos cómo seleccionar una fuente de Google o cargar un archivo de fuente local coloca automáticamente la fuente en la carpeta del tema y la registra en theme.json archivo. También vimos cómo la fuente es una opción disponible en la configuración de estilos globales en el editor del sitio. ¿Y si necesitamos eliminar una fuente? El complemento también se ocupa de eso por completo, sin tocar los archivos de tema o el código.

¡Gracias por leer! Si tiene algún comentario o sugerencia, por favor compártala en los comentarios. Me encantaría saber qué piensa sobre esta posible dirección para la gestión de fuentes de WordPress.

Recursos adicionales

Me basé en mucha investigación para escribir este artículo y pensé en compartir los artículos y los recursos que usé para brindarle un contexto adicional.

Administrar fuentes en WordPress

Problemas de GitHub

Requisitos del RGPD europeo