Uso de un sistema de diseño con el editor de bloques de WordPress Pt. 1: tema.json

Publicado: 2022-12-15

En nuestra publicación de blog anterior, mostramos cómo puede importar su sistema de diseño de Figma al tema.json de un tema de WordPress. Al hacerlo, puede garantizar la coherencia continua en todas sus propiedades digitales.

Nuestra nueva serie de dos partes se basa en esa base al mostrarle cómo puede usar tokens de diseño importados de theme.json en el editor de bloques. Esto le permitirá organizar mejor su sitio de WordPress para reflejar su sistema de diseño. Hay dos objetivos clave:

  • Comprender las partes de theme.json relevantes para los sistemas de diseño
  • Modifique y amplíe theme.json para utilizar el sistema de diseño importado

Entendiendo tema.json

theme.json es un archivo de configuración que le permite configurar y crear un tema en el editor de bloques, cambiar la configuración de los bloques y crear las bases para desarrollar un tema de bloques completo.

Está destinado a permitirle controlar la configuración y los estilos globales de su sitio de WordPress. Cada nuevo sitio VIP de WordPress viene por defecto con el tema Twenty Twenty-Three, un tema de bloque. Este tema es un gran punto de partida para experimentar con un tema de bloque ligero y comprender algunos de los potentes controles disponibles en theme.json.

Modificando tema.json

Comencemos con el theme.json utilizado en nuestra publicación de blog anterior. Observe la sección personalizada, donde nuestra herramienta de puente puede insertar y actualizar un sistema de diseño de Figma. Esta es la sección clave en la que hace referencia a los diversos componentes de su sistema de diseño (tokens de diseño) para usar el theme.json de manera efectiva.

A continuación, repasamos consejos y estrategias para que pueda aprovechar todo lo que theme.json tiene para ofrecer.

Almacenamiento de tokens de diseño

Si bien la ubicación de sus tokens de diseño se puede personalizar con la herramienta de puente, siempre deben mantenerse en la sección personalizada de la configuración. Esta es la ubicación predeterminada de la herramienta de puente y no debe cambiarse. Esto los mantiene debidamente organizados en una sola ubicación y puede ayudar a evitar conflictos con las secciones de temas personalizados existentes.

Uso de tokens de diseño

Veamos un ejemplo del uso de la sección personalizada de theme.json. Aquí tenemos un fragmento en el que hemos definido un color de texto principal verde y un fondo negro:

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

Esto nos permite hacer referencia a estos dos colores en cualquier lugar dentro de theme.json usando:

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

El siguiente fragmento garantiza que, de forma predeterminada, a menos que se especifique lo contrario, cada bloque tendrá un fondo negro con texto verde:

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

El esquema para cualquier clave a la que desee hacer referencia desde su configuración personalizada es:

 var(--wp--custom–<location to the value with -- as a separator between each key>)

El beneficio es que puede hacer referencia a todos sus tokens de diseño usando estas claves mientras tiene una ubicación central donde se administra el valor real.

Mejores prácticas

  • Use las variables de token de diseño generadas por WordPress (p. ej., var(--wp--custom--text--primary) ) para hacer referencia a tokens en todas partes. Tenga en cuenta el fragmento proporcionado anteriormente, donde hacemos referencia al color personalizado principal y de fondo, en lugar de usar el valor real en sí. Esto garantiza que cuando desee actualizar propiedades como el color del texto, solo tendrá que cambiar una ubicación, ya que las demás ubicaciones son simplemente referencias.
  • Los tokens de diseño insertados en theme.json también son accesibles con CSS fuera de theme.json, utilizando la misma referencia clave que se muestra arriba. Esto se aplica al desarrollo de bloques y otros componentes utilizados en un tema. No están destinados a usarse solo dentro de theme.json y deben reutilizarse en cualquier CSS personalizado.

Recomendamos seguir estas dos mejores prácticas para mantener theme.json como una única fuente de verdad. Le permitirá actualizar fácilmente los tokens de diseño, especialmente cuando use herramientas automatizadas como la herramienta puente de WordPress VIP que se conecta a Figma.

Modificar editor y estilos de bloque.

Los fragmentos anteriores son una excelente manera de sumergirse en la personalización de la forma en que se diseñan los bloques. Por ejemplo, puede cambiar el estilo predeterminado de un bloque, así como los ajustes preestablecidos disponibles para elegir en el editor de bloques. Esto es útil cuando desea ser más granular y dictar exactamente cómo se verán los bloques integrados utilizados en su sitio.

Hay dos ubicaciones clave en el archivo theme.json:

  • Configuración y settings.blocks: permite la personalización de la configuración generalmente disponible en el editor de bloques y configuraciones personalizadas para tipos de bloques individuales.
  • Estilos y estilos.bloques: permite definir estilos preestablecidos para todo el editor de bloques y personalizaciones por bloque.

Por ejemplo, aquí se explica cómo asegurarse de que todos los encabezados tengan un color verde (primario) predeterminado y una opción de color secundario:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

Esto configura cada bloque de encabezado para que tenga un color de texto verde principal y agrega una segunda opción de editor de bloques para cambiar el color al color secundario rojo. Nota: Esto requiere algo de repetición. El estilo especifica el color primario predeterminado y la paleta combina el mismo color con un color secundario para proporcionar ambas opciones en el editor de bloques.

Advertencia de estilo

Solo use las secciones de estilos y estilos de bloques de theme.json para diseñar sus bloques siempre que sea posible. No utilice el estilo CSS para anular los estilos de bloque principal a menos que sea absolutamente necesario. Las anulaciones de CSS para los estilos de bloque generalmente no son estables: las actualizaciones del editor de bloques pueden cambiar el estilo y la estructura, lo que hace que esos estilos se rompan.

Personalización por bloque

Si bien el ejemplo anterior muestra cómo personalizar la configuración y el estilo de un bloque, también es posible deshabilitar la personalización por completo y limitar las opciones del editor de bloques a bloques específicos. Esto es útil para controlar estrictamente qué opciones están disponibles para crear contenido, manteniendo la apariencia del sistema de diseño.

Continuemos con otro ejemplo de configuración de color donde los mismos principios se aplican a otras propiedades configurables como el color, la tipografía y el espaciado. Para deshabilitar la capacidad de cambiar el color de texto predeterminado en todas partes, excepto en los bloques de encabezado, así es como se puede configurar theme.json:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

Este ejemplo muestra la configuración de ajustes globales a través de ajustes y ajustes específicos de bloque a través de la sección de bloques en ajustes. Esto también se aplica al estilo global (disponible en la propiedad de estilos raíz) y al estilo específico de bloque (en estilos.bloques).

Plantilla preestablecida simple

Una buena manera de comenzar a crear el sistema de diseño es bloquear la configuración del editor de bloques globalmente. Después de eso, puede habilitar gradualmente la configuración para bloques individuales y controlar cómo se ve y se siente su sistema de diseño sin verse abrumado por las opciones de personalización. , tipografía y controles de espaciado por defecto en el editor:

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

Con estos valores predeterminados bloqueados, puede usar settings.blocks para exponer opciones para bloques específicos en el editor y limitar la personalización a configuraciones bien definidas.

En conclusión

Theme.json es una poderosa herramienta para organizar tokens de diseño globales, configurar estilos de temas globales y personalizar bloques individuales. Aprovechar todas las características que el editor de bloques expone para la personalización hace que la implementación del sistema de diseño sea centralizada y compatible con el editor de bloques integrado.

En la Parte 2 de nuestra serie, cubriremos consejos más avanzados fuera de theme.json para administrar tipos y estilos de bloques integrados en un sistema de diseño.

Enlaces útiles

  • ¿Qué es Theme.json?
  • Configuraciones y estilos globales (theme.json)

Autores

Alec Geatches, desarrollador de software sénior en Automattic

Desarrollador de WordPress empresarial y entusiasta de los sistemas de diseño que vive en Taipei, Taiwán.

Gopal Krishnan, desarrollador de software sénior en Automattic

Gopal trabaja en la oferta de WordPress desacoplada de WordPress VIP, con interés en los sistemas de diseño y Gutenberg. Tiene su base en Sydney, Australia y recientemente se mudó de Canadá.