Administrar estilos CSS en un tema de bloque de WordPress | trucos CSS

La forma en que escribimos CSS para temas de WordPress está experimentando cambios radicales. Recientemente compartí una técnica para agregar soporte de tipo líquido en WordPress a través de theme.jsonun nuevo archivo que WordPress empuja fuerte convertirse en la fuente central de verdad para definir estilos en temas de WordPress que admitan funciones de edición completa del sitio (FSE).

Espera no style.css ¿expediente? Todavía tenemos eso. En realidad, style.css es aún se requiere el archivo en los temas de bloque, aunque su función se reduce en gran medida a la metainformación utilizada para registrar el tema. Sin embargo, el hecho es que theme.json todavía está en desarrollo activo, lo que significa que estamos en un período de transición en el que puede encontrar estilos definidos allí en styles.css o incluso a nivel de bloque.

Entonces, ¿cómo se ve realmente el estilo en estos días en WordPress FSE? Esto es lo que quiero cubrir en este artículo. No hay documentación para los temas de diseño de bloques en el Guía para desarrolladores de temas de WordPressasí que todo lo que cubrimos aquí es lo que he recopilado sobre dónde están las cosas en este momento, así como discusiones sobre el futuro de los temas de WordPress.

La evolución de los estilos de WordPress

Las nuevas características de desarrollo que se incluyen en el WordPress 6.1 nos acercó a un sistema de estilos que están completamente definidos en theme.jsonpero todavía queda mucho trabajo por hacer antes de que podamos confiar plenamente en él. Una forma en que podemos tener una idea de lo que vendrá en futuras versiones es usando Complemento de GutenbergAquí es donde a menudo se prueban las características experimentales.

Otra forma en que podemos tener una idea de dónde nos encontramos es observando la evolución de Temas predeterminados de WordPressHasta la fecha, hay tres temas predeterminados que admiten la edición completa del sitio:

Pero no empieces a operar con CSS style.css para pares de propiedad-valor JSON en theme.json todavía. Todavía hay reglas de estilo CSS que deben mantenerse theme.json antes de que lo pensemos. Los temas importantes restantes se están discutiendo actualmente con el objetivo de mover completamente todas las reglas de estilo CSS a theme.json y consolidar varias fuentes de theme.json en un Interfaz de usuario para configurar estilos globales directamente en Editor de sitios de WordPress.

Esto nos pone en una situación relativamente difícil. no hay una forma clara de anular los estilos de temapero no está claro de dónde provino la fuente de estos estilos, si de diferentes capas de theme.json archivos, style.cssel complemento de Gutenberg o en otro lugar?

Por qué theme.json en cambio style.css?

Quizás se pregunte por qué WordPress se está moviendo a una definición de estilo basada en JSON en lugar de un archivo CSS tradicional. Ben Dwyer del equipo de desarrollo de Gutenberg explica con elocuencia por qué theme.json el enfoque beneficia a los desarrolladores de temas.

Vale la pena leer la publicación de Ben, pero la esencia está en esta cita:

Anular CSS, ya sean estilos de diseño, ajustes preestablecidos o estilos de bloque, es un obstáculo para la integración y la interoperabilidad: la igualdad visual entre la interfaz y el editor se vuelve más difícil de mantener, las anulaciones para bloquear elementos internos pueden entrar en conflicto con las anulaciones. Además, el CSS personalizado es menos portátil entre otros temas de bloques.

Al animar a los autores de temas a utilizar theme.json API, donde sea posible, la jerarquía de estilos definidos "base> tema> usuario" se puede resolver correctamente.

Una de las principales ventajas de mover CSS a JSON es que JSON es un formato legible por máquina, lo que significa que puede exponerse en la interfaz de usuario del Editor del sitio de WordPress a través de la extracción de la API, lo que permite a los usuarios cambiar los valores de forma predeterminada y personalizar el sitio. apariencia sin tener que escribir ningún CSS. También proporciona una manera de diseñar bloques consistentemente mientras proporciona una estructura que crea capas de especificidad para que la configuración del usuario tenga la más alta prioridad antes que las definidas en theme.jsonEsta interacción entre los estilos a nivel de tema en theme.json y los estilos definidos por el usuario en la interfaz de usuario de Global Styles es lo que hace que el enfoque JSON sea tan atractivo.

Los desarrolladores mantienen la coherencia en JSON y los usuarios obtienen flexibilidad con la personalización sin código. Es un ganar-ganar.

Seguro que hay otros beneficios Mike McAllister de WP Engine enumera algunos en este hilo de TwitterPuede encontrar aún más beneficios en este discusión en profundidad en el blog Make WordPress Core Y después de leerlo, compare las ventajas del enfoque JSON con las formas disponibles para definir y reemplazar estilos en temas clásicos.

Definición de estilos con elementos JSON

Ya hemos visto mucho progreso en partes del tema. theme.json es capaz de peinar. Antes de WordPress 6.1 todo eso realmente todo lo que podíamos hacer era diseñar títulos y enlaces. Ahora, con WordPress 6.1, podemos agregar botones, subtítulos, citas y títulos a la mezcla

Y hacemos esto por definición. elementos JSONPiense en los elementos como componentes individuales que viven dentro de un bloque de WordPress. Digamos que tenemos un bloque que contiene un título, un párrafo y un botón. Estas partes separadas son elementos y hay elements objeto en theme.json donde definimos sus estilos:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

Una mejor manera de describir los elementos JSON es como componentes de bajo nivel para temas y bloques que no necesitan la complejidad de los bloques. Son representaciones de primitivas HTML que no están definidos en un bloque pero pueden usarse en bloques. Cómo se admiten en WordPress (y el complemento de Gutenberg) se describe en Guía del editor de bloques y esto Tutorial completo para editar un sitio por Carolina Naimark.

Por ejemplo, los enlaces se diseñan en elements objeto, pero no son un bloque por sí mismos. Pero el enlace se puede usar en un bloque y heredará los estilos definidos en el elements.link objeto en theme.jsonSin embargo, esto no encapsula completamente la definición de un elemento, ya que algunos elementos también se registran como bloques, como los bloques de encabezado y botón, pero estos bloques aún se pueden usar en otros bloques.

Aquí hay una tabla de los artículos actualmente disponibles para diseñar theme.json, cortesía de carolina:

Como puede ver, todavía es pronto y muchos aún necesitan migrar del complemento de Gutenberg a WordPress Core. Pero puede ver lo rápido que sería hacer algo como diseñar todos los títulos en un tema globalmente sin buscar selectores en archivos CSS o DevTools.

Además, también puede comenzar a ver cómo la estructura de la theme.json forma capas de especificidad a partir de elementos globales (p. headings) a elementos individuales (p. ej. h1) y estilos a nivel de bloque (p. ej. h1 contenido en un bloque).

Información adicional sobre elementos JSON está disponible en esta sugerencia Hacer WordPress y este boleto abierto en el repositorio de GitHub del complemento de Gutenberg.

Detalles de JSON y CSS

Sigamos hablando de los detalles de CSS. Mencioné anteriormente que el enfoque JSON para diseñar establece una jerarquía. Y eso es verdad Los estilos que se definen en elementos JSON en el theme.json se consideran estilos de tema predeterminados. Y todo lo que establezca el usuario en la interfaz de usuario de Estilos globales anulará la configuración predeterminada.

En otras palabras: los estilos personalizados brindan más especificidad que los estilos de tema predeterminadosEchemos un vistazo al bloque de botones para tener una idea de cómo funciona.

yo suelo Tema vacíoun tema de WordPress en blanco sin estilo CSS. Agregaré un bloque de botones en una página nueva.

Bien, sabemos que WordPress Core viene con un estilo ligero. Ahora cambiaré al tema TT3 predeterminado de WordPress 6.1 y lo activaré. Si actualizo mi página con el botón, el botón cambia de estilo.

Puedes ver exactamente ¿De dónde vienen estos nuevos estilos? en TT3 theme.json Esto nos dice que los estilos de elementos JSON tienen prioridad sobre los estilos de WordPress Core.

Ahora modificaré el TT3 reemplazándolo con un theme.json archivo en un tema secundario donde el color de fondo predeterminado del bloque de botones es rojo.

Pero observe el botón de búsqueda en la última captura de pantalla. Debería ser rojo también, ¿verdad? Esto debería significar que tiene un estilo en otro nivel si el cambio que hice es a nivel global. Si queremos cambiar ambas cosas botones, podríamos hacerlo a nivel de usuario utilizando la interfaz de usuario de Estilos globales en el editor del sitio.

Cambiamos el color de fondo de ambos botones a azul y también modificamos el texto usando la interfaz de usuario de estilos globales. ¡Observe que el azul tiene prioridad sobre los estilos de tema a partir de ahí!

El motor del estilo

Esta es una idea muy rápida pero buena sobre cómo administrar las especificaciones de CSS en los temas de bloque de WordPress. Pero esta no es la imagen completa porque aún no está claro dónde estos estilos se generan WordPress tiene sus propios estilos predeterminados que provienen de algún lugar, consumen los datos theme.json para obtener más reglas de estilo y anula aquellas con cualquier configuración en Estilos globales.

¿Estos estilos están en línea? ¿Están en una hoja de estilo separada? Tal vez fueron inyectados en la página en <script>?

este es el nuevo Elegante motor esperamos que se decida. Style Engine es una nueva API en WordPress 6.1 que tiene como objetivo proporcionar coherencia en la forma en que se generan los estilos y dónde se aplican. En otras palabras, utiliza todas las fuentes de estilo posibles y es el único responsable de generar correctamente los estilos de bloque. Sé que sé. Otra abstracción encima de otras abstracciones solo para crear algo de estilo. Pero tener una API centralizada para estilos es probablemente la solución más elegante, dado que los estilos pueden provenir de varios lugares.

Solo estamos viendo por primera vez el motor de estilos. En realidad, esto es lo que se ha completado hasta ahora, según el billete:

• Audite y consolide dónde el código genera CSS para admitir bloques de back-end para que se sirvan desde la misma ubicación (a diferencia de varias ubicaciones). Esto cubre las reglas de CSS como el margen, el relleno, la tipografía, los colores y los bordes.
• Elimine estilos repetidos específicos del diseño y genere nombres de clase semánticos.
• Reduzca la cantidad de etiquetas de estilo en línea que imprimimos en la página para admitir bloques, diseño y elementos.

Básicamente, esta es la base para crear una sola API que contenga todas las reglas de estilo CSS para un tema, independientemente de su procedencia. Limpia la forma en que WordPress inyectaría estilos en línea antes de 6.1 y establece un sistema de nombres de clase semántica.

Puede encontrar más detalles sobre los objetivos a corto y largo plazo de Style Engine aquí. Tener una discusión sobre WordPress CoreTambién puedes seguir problema de seguimiento y junta de proyecto para más actualizaciones.

Trabajando con elementos JSON

Hablamos un poco sobre los elementos JSON en el theme.json archivo y cómo son básicamente primitivas HTML para definir estilos predeterminados para cosas como títulos, botones y enlaces, entre otras cosas. Ahora miremos realmente usando Elemento JSON y cómo se comporta en diferentes contextos de estilo.

Los elementos JSON suelen tener dos contextos: nivel mundial y en nivel de bloqueLos estilos en el nivel global se definen con menos especificidad que en el nivel de bloque para garantizar que los estilos específicos de bloque tengan prioridad para la coherencia dondequiera que se utilicen bloques.

Estilos globales para elementos JSON

Echemos un vistazo al nuevo tema predeterminado de TT3 y cómo se distribuyen sus botones. El siguiente es un copiar y pegar abreviado de TT3 theme.json archivo (aquí está código completo), que muestra la sección de estilos globales, pero puede encontrar el código original aquí.

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

Todos los botones tienen un estilo global (styles.elements.button).

También podemos confirmar esto en DevTools. Observe que la clase llamada .wp-element-button La misma clase también se usa para diseñar los estados interactivos.

Nuevamente, este estilo está ocurriendo a nivel global, viniendo de theme.jsonCada vez que usemos un botón, tendrá el mismo fondo porque comparten el mismo selector y ninguna otra regla de estilo lo anula.

Aparte, se agregó WordPress 6.1 soporte para dar forma a estados interactivos para ciertos elementos, como botones y enlaces, usando pseudo-clases en theme.json - incluido :hover, :focusy :active — o la interfaz de usuario de Global Styles.Automattic Engineer David Smith demostrado esta función en un video de YouTube.

Podemos reemplazar el color de fondo del botón o c theme.json (preferiblemente en un tema secundario ya que usamos un tema predeterminado de WordPress) o en la configuración de Estilos globales en el editor del sitio (no se requiere un tema secundario ya que no requiere cambios de código).

Pero luego los botones cambiarán todos a la vez. ¿Qué pasa si queremos reemplazar el color de fondo cuando el botón es parte de un bloque determinado? Aquí es donde entran en juego los estilos a nivel de bloque.

Estilos a nivel de bloque para elementos

Para entender cómo podemos usar y personalizar estilos a nivel de bloque, cambiemos el color de fondo del botón que está contenido en el bloque de búsqueda. Recuerda que hay un bloque de botones, pero lo que hacemos es reemplazar el color de fondo a nivel de bloque del bloque de búsqueda, de esta manera, solo aplicamos el nuevo color allí, en lugar de aplicarlo globalmente a todos los botones.

Para ello, definimos los estilos de styles.blocks objeto en theme.jsonExacto, si definimos los estilos globales para todos los botones de styles.elementspodemos definir los estilos específicos de bloque para los elementos de botón en styles.blockque sigue una estructura similar:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

¿Ves esto? Configuro background y text propiedades de styles.blocks.core/search.elements.button con dos variables CSS que están preestablecidas en WordPress.

¿El resultado? El botón de búsqueda ahora es rojo (--wp--preset--color--quaternary), y el bloque de botones predeterminado conserva su fondo verde brillante.

También podemos ver el cambio en DevTools.

Lo mismo aplica si queremos diseñar botones que están incluidos en otros bloques, y los botones son solo un ejemplo, así que echemos un vistazo otro.

Ejemplo: formato de encabezados en cada nivel

Traigamos toda esta información a casa con un ejemplo. Esta vez usted:

• Dar formato a todos los títulos globalmente
• Aplicar estilo a todos los elementos del Título 2
• Encabezado de estilo 2 elementos en el bloque Query Loop

Primero, comencemos con la estructura básica para theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Esto establece el esquema de nuestros estilos globales y de nivel de bloque.

Dar formato a todos los títulos globalmente

agreguemos headings oponerse a nuestros estilos globales y aplicar algunos estilos:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

Esto establece el color de todos los encabezados al color base predeterminado en WordPress. Cambiemos el color y el tamaño de fuente de los elementos del encabezado 2 globalmente:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

Todos los elementos del Título 2 ahora están configurados para ser el color principal preestablecido con un tamaño de fuente uniforme. Pero tal vez queremos uno fijo fontSize para el elemento Heading 2 cuando se usa en el bloque Query Look:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

Ahora tenemos tres niveles de estilos para los elementos del Título 2: todos los títulos, todos los elementos del Título 2 y los elementos del Título 2 que se utilizan en el bloque de bucle de consulta.

Ejemplos de temas existentes

Aunque solo hemos visto ejemplos de estilo de botones y títulos en este artículo, WordPress 6.1 admite elementos adicionales de estilo Hay una tabla que los describe en la sección "Definición de estilos con elementos JSON".

Probablemente se esté preguntando qué elementos JSON admiten qué propiedades CSS, y mucho menos cómo los declararía. Mientras esperamos la documentación oficial, los mejores recursos que tenemos serán theme.json archivos para temas existentes, proporcionaré enlaces a temas basados ​​en los elementos que personalizan e indicaré qué propiedades se personalizan.

No te olvides de dar cada theme.json fíjese bien porque estos temas incluyen excelentes ejemplos de estilo a nivel de bloque de styles.blocks objeto.

resumiendo

Los cambios frecuentes en el editor de un sitio completo se convierten en una fuente importante de irritación para muchas personas, incluyendo Usuarios expertos en tecnología de GutenbergIncluso las reglas CSS muy simples que funcionan bien con temas clásicos no parecen funcionar para temas de bloque porque nuevas capas de especificidad miramos antes.

Acerca de una sugerencia de GitHub para rediseñar el editor del sitio en un nuevo modo de navegador, Sarah Gooding escribe en una publicación de WP Tavern:

Es fácil perderse tratando de sortear el editor del sitio a menos que esté trabajando día y noche en la herramienta.La navegación es entrecortada y confusa, especialmente cuando se pasa de ver una plantilla a editar una plantilla y modificar bloques individuales.

Incluso como un ávido jinete temprano en el mundo del editor de bloques de Gutenberg y los temas que bloquean los ojos, tengo muchas frustraciones propias. Sin embargo, soy optimista y espero que el editor del sitio, una vez que esté completo, sea una herramienta revolucionaria tanto para los usuarios como para los desarrolladores de temas expertos en tecnología. tuit esperanzador ya lo confirma. Mientras tanto, parece que deberíamos prepararnos para más cambios y tal vez incluso para un viaje lleno de baches.

Referencias

Estoy enumerando todos los recursos que utilicé mientras buscaba información para este artículo.

elementos JSON

Estilos globales

Motor con estilo

¡Gracias por leer! Me encantaría escuchar sus propios pensamientos sobre el uso de temas de bloque y cómo administra su CSS.