Agregar soporte de tipografía suave a los temas de bloque de WordPress | trucos CSS

La tipografía líquida es una forma sofisticada de "describir las propiedades de la fuente, como el tamaño o la altura de la línea, que se escalan suavemente según el tamaño de la ventana gráfica". también conocido por otros nombrestales como tipografía receptiva, tipo flexible, tipo líquido, tipografía de tamaño de ventana gráfica, tipografía suave e incluso texto de visualización receptivo.

Aquí hay uno un ejemplo de tipografía líquida que puedes tocar en vivo (cortesía de Documentación de MDN). CSS-Tricks también cubrió la tipografía fluida en detalle. Pero el propósito aquí no es presentarte la tipografía fluida, sino cómo usarla. Específicamente, quiero mostrarte cómo implementar tipografía fluida en WordPress 6.1, que recientemente introdujo una característica de tipo fluido directamente en el editor de bloques de WordPress.

Abre los tuyos style.css archivo, regla de estilo bofetada con fantasía clamp()-ing de font-size propiedad y es bueno, ¿verdad? Claro, esto le dará texto líquido, pero ¿obtener controles de editor de bloques que permitan aplicar texto líquido en cualquier parte de su sitio de WordPress? Esto requiere un enfoque diferente en estos días bloqueados.

Soporte de tipografía fluida en Gutenberg

Algunos desarrolladores de temas de WordPress usan clamp() función para definir un fluido font-sizeen sus temas de WordPress, incluso temas de "bloque" más nuevos como veinte veintidós, veinte veintitrésy otra.

Pero el complemento de Gutenberg, el que contiene el desarrollo experimental para las funciones de editor de sitio y bloqueo de WordPress, introdujo soporte para tipografía líquida. a partir de la versión 13.8Esto abrió la puerta a la implementación a nivel de tema para que el tipo fluido se pudiera aplicar a elementos y bloques específicos directamente en el editor de bloques. Solicitud de descarga que fusionó la función.

Este trabajo se convirtió en parte de WordPress Core en WordPress 6.1. Rich Tabor, uno de los primeros defensores de la tipografía fluida en el editor de bloques, dice:

[Fluid typography] también es parte de hacer que WordPress sea más poderoso, pero no más complejo (que todos sabemos que es todo un desafío). […] La tipografía suave simplemente funciona. De hecho, creo que funciona muy bien.

Este Haz que las publicaciones de WordPress se destaquen el enfoque adoptado para mantener la característica en el nivel de bloque para que se aplique dinámicamente un tamaño de fuente fluido a los bloques predeterminados. algunos beneficios por supuesto:

• Proporciona una forma para que los autores de temas habiliten una tipografía fluida sin tener que preocuparse por implementarla en el código.
• Aplica tipografía fluida a unidades tipográficas específicas, como elementos o bloques, de forma mantenible y reutilizable.
• Permite flexibilidad en los tamaños de fuente (p. ej. px, rem, emy %).

Ahora que esta nueva función está disponible en el editor de bloques predeterminado de WordPress, los autores de temas pueden aplicar la misma tipografía fluida sin escribir ningún código adicional.

Bloques que admiten configuración de tipografía y espaciado

Gutenberg 14.1 emitido el 16 de septiembre de 2022y escriba configuraciones tipográficas en un montón de bloques. Esto significa que la configuración de texto para estos bloques se estableció en CSS antes y también debería haberse cambiado en CSS. Pero estos bloques ahora proporcionan controles de fuente y espaciado en la interfaz del editor de bloques.

Actualmente, este trabajo está programado para agregarse a WordPress 6.1, como se detalla en esta publicación en el blog Make WordPressY con él viene un mayor número de bloques con soporte de tipografía.

Declarar un tipo líquido en un tema de bloque de WordPress

Entonces, ¿cómo usamos esta nueva tipografía líquida en WordPress? La respuesta está dentro theme.jsonun nuevo archivo específico de subprocesos que contiene un montón de configuraciones de subprocesos en pares clave:valor.

Veamos una regla de fuente grande theme.json dónde contentSize: 768px y trabajamos con un widesize: 1600px Así es como podemos definir CSS font-size usando clamp() función:

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}

Solo desde WordPress 6.1 rem, em y px Se admiten unidades.

Eso es genial y funciona, pero con la nueva función de tipo de fluido en realidad tomaríamos un enfoque diferente. Primero, elegimos una tipografía líquida de settings.typographyque tiene un nuevo fluid Propiedad:

"settings": {
  "typography": {
    "fluid": true
  }
}

Luego especificamos el nuestro. settings.fontSizes como antes, pero con uno nuevo fluidSize propiedad donde podemos establecer min y max valores de tamaño para nuestra gama de tipos de líquidos.

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}

Realmente lo es. Acabamos de agregar un tipo líquido a un tamaño de fuente llamado "Grande" con un rango que comienza en 2.25rem y escalas a 3remAhora podemos aplicar la fuente "Grande" a cada bloque de configuración de fuente.

¿Cómo funciona esto bajo el capó? Rich Tabor ofrece una buena explicacióncomo lo hace esta solicitud de extracción de GitHubEn resumen, WordPress convierte theme.json propiedades en la siguiente regla CSS:

.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}

... que se aplica al elemento, digamos un bloque de párrafo:

<p class="has-large-font-size">...</p>

Al principio me costó entender y comprender el concepto de CSS. clamp() función sin aprender también sobre min(), max()y calc() funciones Esta herramienta de calculadora me ayudó bastante, especialmente para determinar qué valores usar en mis propios proyectos temáticos.

Para fines de demostración, usemos la calculadora para definir la nuestra. font-size rango para que el tamaño sea 36px en un 768px ancho de ventana y 48px en un 1600px ancho de la ventana de visualización.

La calculadora genera automáticamente el siguiente CSS:

/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);

La calculadora proporciona opciones para seleccionar unidades de entrada px, remy emsi elegimos rem unidad, la calculadora genera lo siguiente clamp() valor:

/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);

Entonces estos valores mínimos y máximos corresponden a fluidSize.min y fluidSize.max valores en theme.json, min el valor se aplica a las ventanas que son 768px ancho y abajo font-size se escala a medida que aumenta el ancho de la ventana gráfica. Si la ventana gráfica es más ancha que 1600pxen max también se aplica a font-size está limitado allí.

Ejemplos

Hay instrucciones de prueba detalladas en la solicitud de descarga unificada que introdujo la función. Hay incluso más instrucciones para probar desde Publicación anterior de Justin Tadlock en Make WordPress.

Ejemplo 1: Establecer una nueva configuración de fuente líquida

Comencemos con el conjunto de instrucciones de Justin. Utilicé una versión modificada de la estándar. Tema veintitrés que actualmente se encuentra en desarrollo.

Primero, asegurémonos de que estamos ejecutando el complemento Gutenberg (13.8 y superior) o WordPress 6.1, luego elija un tipo líquido de settings.typography.fluid propiedad en theme.json expediente:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
    }
  }
}

Ahora, liberemos settings.typography.fontSizes ejemplos ahi:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
      "fontSizes": [
        {
          "name": "Normal",
          "size": "1.125rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal"
        }
      ]
    }
  }
}

Si todo funciona correctamente, ahora podemos ir al editor de bloques de WordPress y aplicar la configuración de fuente "Normal" a nuestro bloque:

¡Bien hecho! Y si guardamos e inspeccionamos este elemento desde el frente, este es el marcado:

Muy bueno. Ahora asegurémonos de que el CSS esté realmente allí:

Bien bien. Expongamos esta propiedad personalizada de CSS para ver si realmente ajusta las cosas:

¡Todo parece estar funcionando exactamente como queremos! Veamos otro ejemplo...

Ejemplo 2: deshabilitar una configuración de fuente de tipo líquido

Esta vez sigamos instrucciones de la solicitud de incorporación de cambios consolidada con un guiño a este ejemplo de Carolina Naimark que muestra cómo podemos desactivar el tipo líquido en una configuración de fuente específica.

solía sujeto vacio como se indica en las instrucciones y abrir theme.json archivo de prueba Primero seleccionamos el tipo de líquido tal como lo hicimos antes:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1000px"
    },
    "typography": {
      "fluid": true
    }
  }
}

Esta vez estamos trabajando con los más pequeños. wideSize valor de 1000px en cambio 1600pxEsto debería permitirnos ver el tipo de fluido que opera en un rango preciso.

Ok, pasamos a especificar algunos tamaños de fuente personalizados settings.typography.fontSizes:

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "size": ".875rem",
          "fluid": {
            "min": "0.875rem",
            "max": "1rem"
        },
          "slug": "small",
          "name": "Small"
        },
        {
          "size": "1rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal",
          "name": "Normal"
        },
        {
          "size": "1.5rem",
          "fluid": {
            "min": "1.5rem",
            "max": "2rem"
          },
          "slug": "large",
          "name": "Large"
        },
        {
          "size": "2.25rem",
          "fluid": false,
          "slug": "x-large",
          "name": "Extra large"
        }
      ]
    }
  }
}

Tenga en cuenta que solo hemos aplicado la función de tipo líquido a las configuraciones de fuente Normal, Mediana y Grande. "Extra grande" es el raro donde fluid el objeto se establece en false.

Lo que WordPress hace desde aquí – vía Motor estilo Gutenberg — es una implementación de las propiedades que establecemos en CSS clamp() funciones para cada configuración de tamaño de fuente que tenga seleccionado el tipo de líquido y un valor de tamaño único para la configuración extragrande:

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;

Veamos el marcado de front-end:

¡Buen comienzo! Confirmemos eso .has-x-large-font-size la clase está excluida del tipo líquido:

Si nos exponemos a --wp--preset--font-size--x-large variable, veremos que se establece en 2.25rem.

¡Eso es exactamente lo que queremos!

Temas de bloques que admiten tipografía líquida

Muchos temas de WordPress ya lo usan clamp() característica de tipo líquido tanto en bloques como en temas clásicos Un buen ejemplo del uso de tipografía líquida es el recientemente lanzado Tema predeterminado veinte veintitrés.

He revisado todos los temas de bloque de Directorio de temas de bloques de WordPressconsideración theme.json archivo sobre cada tema y para ver exactamente cuántos temas de bloque admiten actualmente la tipografía líquida, no es la nueva función, ya que todavía está en el complemento de Gutenberg en el momento de la escritura, usando CSS clamp() De los 146 temas que revisé, la mayoría usaba un clamp() función para definir intervalos Se utilizan algo más de la mitad de ellos clamp() para establecer tamaños de fuente Alara el tema es el único que se puede usar clamp() para determinar el dimensiones del contenedor de diseño.

Es comprensible que solo unos pocos temas lanzados recientemente contengan la nueva función Liquid Typography. Pero aquí están los que encontré que la definen en theme.json:

Y si leíste mi publicación anterior aquí sobre trucos de CSS, Bloques de Gopher TT2 El tema que usé para la demostración también se actualizó para admitir la función de tipografía líquida.

Reacciones seleccionadas a las características de la tipografía líquida de WordPress

¡Tener tipografía líquida en WordPress a nivel de configuración es súper emocionante! Pensé en compartir algunos pensamientos de personas en la comunidad de desarrolladores de WordPress que han comentado sobre esto.

Matthias Ventura, el arquitecto principal del Proyecto Gutenberg:

Una de mis nuevas características favoritas de Gutenberg es el tipo líquido, que, con suerte, "simplemente funciona". Está disponible para probar en 13.8. pic.twitter.com/9SLUgEg4pF

— Matías Ventura (@matias_ventura) 4 de agosto de 2022

rico tabor:

Como uno de los mayores esfuerzos para publicar páginas maravillosamente ricas en WordPress, la tipografía fluida es una gran victoria tanto para las personas que crean con WordPress como para quienes consumen el contenido.

Revelador automático Ramón Dodd comentado en la solicitud de descarga:

Contraste esta idea con tamaños de fuente que correspondan a tamaños de ventana gráfica específicos, como los definidos por solicitudes de mediospero no hagas nada entre estos tamaños. theme.json ahora permite a los autores insertar sus propios valores líquidos de tamaño de fuente. Eso no cambiará, pero este PR lo ofrece a las personas que no quieren preocuparse por los detalles de la implementación.

Nick Croftautor de GenesisWP:

No voy a mentir, creo que esta es la función que más me emociona. Usé un paréntesis para hacer esto, pero la sintaxis parece más fácil para el profano.

—Nick Croft (@Nick_theGeek) 1 de septiembre de 2022

Brian Garnerdiseñador y principal promotor de desarrolladores en WPEngine:

La tipografía líquida es una gran mejora en #WordPressLos temas de FSE pueden conectarse experimentalmente a esto a través del complemento Gutenberg, pero lo veremos oficialmente compatible en 6.1 este otoño. Así es como se ve/funciona: pic.twitter.com/Jc7gHdyz5R

—Brian Gardner (@bgardner) 1 de septiembre de 2022

varios desarrolladores creo algunas características deben estar habilitadas. jason cristo de Automattic dice:

Me encanta el poder de la tipografía fluida, pero tampoco creo que deba habilitarse de forma predeterminada. Su uso (y sus detalles) son decisiones de diseño importantes que deben tomarse con cuidado.

También puedes encontrar un montón de comentarios más en el oficial. instrucciones de prueba para la función.

resumiendo

La función de tipografía fluida en WordPress es todavía en desarrollo activo Entonces, por ahora, el tema del autor debe continuar usándolo, pero con precaución y esperando algunos posibles cambios antes de su lanzamiento oficial. justin advierte autores de subprocesos que usan esta función y sugiere los siguientes dos problemas de GitHub:

También todavía hay muchos trabajo actual sobre tipografía y otras herramientas de WordPress relacionadas con el diseño Si estás interesado, mira esto Boleto de GitHub para el seguimiento de la tipografía y Problemas de GitHub relacionados con las herramientas de diseño.

Recursos

Utilicé los siguientes artículos cuando investigaba el tipo líquido y cómo WordPress lo implementa como una característica.

Lecciones y opiniones

trucos CSS

calc() y funciones CSS relacionadas