Crear variaciones de estilo en bloques de temas de WordPress trucos CSS
Estilos globalesLos temas de bloques de características son una de mis partes favoritas para crear temas de bloques. variaciones de estilo globales en WordPress se introdujeron en Gutemberg 12.5 lo que permitiría a los autores de temas crear alternativas a un tema de bloque con diferentes combinaciones de colores, fuentes, tipografía, espacios, etc. Diferente theme.json archivos almacenados bajo /styles carpeta "permite a los usuarios cambiar rápida y fácilmente entre diferentes vistas sobre el mismo tema".
La interfaz de usuario del panel Estilos globales está en iteración de desarrollo activa. Se pueden encontrar y seguir más detalles sobre el desarrollo de esta característica aquí en este boleto para GitHub (# 35619).
En este artículo repasaré la creación de evidencia para el concepto de una variante global de estilo, usando una alternativa /styles/theme.jsen archivos y cree temas secundarios con diferentes modos de color simplemente intercambiando paletas de colores.
Contenido
suposiciones
Este artículo está destinado a aquellos que tienen un conocimiento básico de los temas de bloques de WordPress y conocimientos sobre el uso del Editor de sitio completo (FSE) interfaz. Si es nuevo en el bloqueo de temas y FSE, puede comenzar aquí en CSS-Tricks con esta introducción detallada a WordPress y documentación para el editor del sitio. Este Edición completa del sitio. El sitio web es una de las guías de capacitación más actualizadas para conocer todas las funciones de FSE, incluidos los temas de bloques y las variaciones de estilo que se analizan en este artículo.
Variaciones de estilo global
Para un poco de historia, echemos un breve vistazo a la variación en el estilo global. Veinticinco y dos (TT2) topic manager y director de diseño de Automattic Kiel Reigstad introducir variaciones globales de estilos con este tuit y Boleto para GitHub # 292 como temas infantiles. En el boleto, Kjell señala que originalmente se diseñaron como patrones de colores alternativos y combinaciones de fuentes, pero que se pueden usar para crear temas infantiles simples.
Este ejemplo de Kjell demuestra cómo se pueden seleccionar diferentes combinaciones de estilos de opciones disponibles en la barra lateral.
Desde entonces, el equipo de Automattic ha estado experimentando con el concepto de crear temas secundarios variables (solo colores y fuentes variables), incluidos los siguientes:
- geólogo con variaciones en azul, crema, pizarra, amarillo
- cuadrado con versiones en negro, verde, rojo, blanco y amarillo
Cambio de estilo global
EN Gutemberg 12.5 la edición introdujo un interruptor de estilo global que permitirá a los usuarios cambiar rápida y fácilmente entre diferentes puntos de vista sobre el mismo tema a través de diferentes theme.json archivos almacenados bajo un /styles carpeta.
El concepto de permitir el cambio de la variación global de estilo a través de theme.json ha sido discutido en GitHub durante algún tiempo el ingeniero líder Gutenberg Matías Ventura le dio un nuevo significado al agregarlo a Hoja de ruta para WordPress 6.0 pronto.
Adopte alternativas basadas en el estilo
jsonvariaciones. Esto se ha molestado en varios videos sobre el nuevo tema predeterminado y debería revelarse y presentarse por completo en 6.0. Uno de los objetivos paralelos es crear varias variantes diferentes de TT2, hechas solo con estilos. (35619)Matías Ventura, "Hoja de ruta preliminar a 6.0"
La última iteración de desarrollo de estilo de iteración está disponible con Gutenberg 13.0 y se incluye en WordPress 6.0. Explorar WordPress 6.0 Vídeo, enlace al producto de Automattic Ann McCarthy proporciona una descripción general de sus características clave, incluidas las variaciones de estilo y la API Webfonts (a partir del minuto 5:18) que se analizan en este artículo.
Variación del estilo del tema sobre un tema hijo
En mi artículo anterior, analicé brevemente los problemas de construcción de niños. Las variaciones de estilo globales desdibujaron la línea entre alternate-theme.json y temas infantiles. Por ejemplo, la única diferencia entre los recientemente lanzados alante-oscuro tema hijo y su tema padre es un alternate.json un archivo en el tema secundario que anula los estilos de tema global de la siguiente manera:
Del mismo modo tanto recientes Alara temas infantiles en directorio de WordPress - Framboaz y richmond - se diferencian solo en su singular theme.json expediente.
Sección 1: Crear variaciones de un estilo de tema
En la base de la carpeta de temas infantiles, cree un /styles una carpeta que contiene variaciones de estilo, como archivos JSON. Para este ejemplo de demostración, creé tres variantes de Twenty Twenty-Two theme.json paletas de colores - blue.json, maroon.jsony pink.json Intercambiando los colores de primer plano y antecedentes:
Aquí está el resultado final después de hacer clic icono de estilo del consejo de administración (ubicado en Apariencia → Redactor):
Hacer clic Otros estilos botón (rediseñado recientemente en estilos de navegador), que presenta íconos de color "azul", "marrón" y "rosa" además de sus estilos originales.
Para cambiar y elegir un estilo, seleccione su opción preferida y haga clic en Guardar botón (arriba a la derecha) que aparece en la parte frontal de su navegador.
Agregar etiquetas para opciones de estilo alternativas y nombre de archivo con efecto de animación al sostener el mouse están disponibles en Gutenberg 13.0.
Paso 1: configuración e instalación
Primero, instale y configure un sitio de WordPress con un poco de contenido ficticio. Para esta demostración, realicé una nueva instalación de WordPress, activé el tema Twenty Twenty-Two y agregué Datos de la prueba de Gutenberg.
Las variaciones en el estilo del tema y las API de WebFonts que se analizan en este artículo requieren la instalación y activación de Gutenberg 13.0 o WordPress 6.0.
Paso 2: Crea un tema hijo TT2
En esta demostración de tema secundario, cambiemos ligeramente el color del cuerpo del color del encabezado y el pie de página, con todo el contenido del sitio centrado:
Paso 3: Crear archivos JSON
Crear /styles en el tema de tus hijos root carpeta con blumi, maroony pink.json archivos:
__ style.css
__ theme.json
__ functions.php
__ index.php
__ templates
__ ...
__ parts
__ ...
__ styles
__ blue.json
__ maroon.json
__ pink.jsonPaso 4: crea archivos JSON con un tema alternativo
Entonces crea el tuyo propio alternate-theme.json archivos con las paletas de colores deseadas en /styles carpeta. Para esta demostración, creé tres paletas de colores (blue, maroony pink). Aquí está el código para maroon.json:
{
"version": 2,
"title": "Maroon",
"settings": {
"color": {
"palette": [
{ "slug": "foreground", "color": "#7C290F", "name": "Foreground" },
{ "slug": "background", "color": "#ffffff", "name": "Background" },
{ "slug": "foreground-dark", "color": "#000000", "name": "Foreground Dark" },
{ "slug": "background-body", "color": "#ffd8be", "name": "Background Body" },
{ "slug": "primary", "color": "#000000", "name": "Primary" },
{ "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" },
{ "slug": "tertiary", "color": "#55ACEE", "name": "Tertiary" }
]
},
"typography": {}
},
"styles": {
"color":
{
"background": "var(--wp--preset--color--background-body)",
"text": "var(--wp--preset--color--foreground-dark)"
},
"elements": {
"link": {
"color": { "text": "var(--wp--preset--color--primary)" }
}
}
}
}Los otros dos se alternan blue.json y pink.json valores para compartir archivos en foreground y background-body, foreground-dark y primary color propiedades con sus respectivos blue y pink valores de color hexadecimales.
Sección 2: Ejemplo de caso de uso
Como señalé en mi artículo anterior, trabajé en temas de bloque y los usé para mi propio sitio de proyectos personales.Inspirado por variaciones en el estilo del tema y API de fuentes web funciones en el complemento de Gutenberg, comencé a cambiar el tema del bloque en el proceso de trabajar con un modo alternativo en color oscuro y configurando la API de Webfonts.
En esta sección, lo guiaré a través de la forma en que creé Bloques TT2 Gopherun hermano de demostración de mi tema de bloque inacabado creado para este artículo. El tema incluye modos de color granate, oscuro y claro creados con variaciones de estilo de tema y la API Webfonts que estuvo disponible con Gutenberg Edición 12.8.
Algunos aspectos destacados del tema TT2 Gopher incluyen una visualización centrada del contenido en una sola columna, encabezados y pies de página separados, un archivo y páginas de búsqueda más fáciles de usar.
Una copia de Bloques TT2 Gopher está disponible en el repositorio de GitHubque puede ramificar y personalizar.
Crear un modo oscuro de WordPress
Primero, un poco de fondo en modo oscuro. El modo oscuro es una preferencia personal y los desarrolladores lo ofrecen u otro cambio de modo como se incluye este sitiolo cual no es poca cosa para la mayoría de los desarrolladores comunes. La creación de un modo oscuro está bien cubierta aquí en CSS-Tricks, incluida esta guía completa sobre el modo oscuro y la impresión en modo oscuro.
En un sitio de WordPress podemos agregar un interruptor de modo oscuro usando WP modo oscuro enchufar. Erin Myers de WP Engine y WPPrincipiante describir cómo usar el complemento WP Dark Mode mientras Brenda Barron enumera otras opciones para complementos de modo oscuro en esta publicación de WPExplorer.
Crear un modo oscuro en los temas de WordPress en bloque sin un complemento implica varios pasos. Hace más de un año, Ari Statopoulos creó soporte oscuro para el tema TT1 Blocks en GitHubTeniendo en cuenta el ejemplo aquí, incluye algunos conocimientos de creación de JavaScript activos (por ejemplo, cambio, personalización, compatibilidad con el modo editor), color oscuro Variables CSSy extendido functions.php archivos
EN este video cortoAnne McCarthy de Automattic demuestra lo fácil que es crear un modo de tema de bloque TT2 oscuro con una variación de estilo global al agregar La esencia de los fragmentos JSON de kllejr en TT2 /styles carpeta.
Crear un tema de demostración TT2 Gopher con bloques
TT2 Gopher es una versión predeterminada muy simple y modificada Veintidós Incluye tres variantes del estilo del tema: granate, oscuro y blanco.
Describir cada paso de personalización está más allá del alcance de este artículo, pero puede obtener más información de mi introducción detallada a los temas de bloques de WordPress, así como también Manual del editor de bloques en WordPress.org.
Una breve descripción de las combinaciones de colores y fuentes del tema TT2 Gopher incluye:
- Modo de luz
- El encabezado es blanco y el pie de página es un color de fondo ahumado.
- abrir sans es la fuente principal.
- modo oscuro
- El encabezado y el pie de página son negros con colores oscuros más claros para el fondo del cuerpo.
- Fuente Serif Pro es la fuente principal.
- modo castaño
- El encabezado y el pie de página son de color marrón oscuro, con un fondo de cuerpo amarillento más claro.
- trabajar sin es la fuente principal.
Déjame contarte brevemente cómo creé variaciones de estilo sobre un tema.
Agregar y configurar fuentes web
El complemento Gutenberg 12.8 introdujo uno nuevo API de fuentes web que permite a los autores cargar fuentes locales (agrupadas) "de una manera fácil de realizar, fácil de usar y preparada para el futuro". Esta función se puede implementar en un tema de bloque a la manera de PHP o theme.json camino.
Actualmente, esta característica solo funciona con fuentes completas con temas de bloque y no es compatible. Fuentes alojadas por Google por motivos de privacidad. Se cubren más detalles sobre el estado actual de desarrollo de la API de Webfonts esto hace que WordPress sea un elemento básico y este artículo de WP Tavern.
Paso 1: descarga y agrega fuentes a un tema de bloque
El tema TT2 agrega archivos Source Serif Pro al tema assets/fonts dos fuentes adicionales - Work Sans y Public Sans - también disponible en el repositorio de GitHub.
Paso 2: registrar fuentes web
En el tema TT2, localmente Source Serif Pro Las webfonts están registradas con PHP en su functions.php expediente:
function twentytwentytwo_get_font_face_styles() {
return "
@font-face{
font-family: 'Source Serif Pro';
font-weight: 200 900;
font-style: normal;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'Source Serif Pro';
font-weight: 200 900;
font-style: italic;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ) . "') format('woff2');
}
";
}Gutenberg 12.8 introdujo la capacidad de registrar fuentes web locales theme.json presentar lo siguiente theme.json Extractos del tema de demostración TT2 Gopher muestran cómo las fuentes web Sans locales se registran en la variante de estilo de tema granate:
"typography": {
"fontFamilies": [
{
"fontFamily": "'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif",
"slug": "work-sans",
"name": "Work Sans",
"fontFace": [
{ "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "400", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf" ] },
{ "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "700", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf" ] },
{ "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "400", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf" ] },
{ "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "700", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf" ] }
]
}
]
}En Esta lección y este artículo de WP Tavern.
Crear variaciones de estilo sobre un tema
Siguiendo los pasos descritos en la sección anterior, creé dos versiones alternativas de theme.json expediente - white.json y black.json - con diferentes combinaciones de colores y fuentes en el tema infantil /styles carpeta.
Esta característica requiere versión 2 sobre theme.jsonDesde Gutenberg 12.5 también se puede añadir el título a theme.json para mostrar los estilos de etiqueta en el editor del sitio o el nombre del archivo (sin extensión) se mostrará de forma predeterminada.
Aquí hay un ejemplo de white.json:
{
"version": 2,
"title": "White",
"settings": {
"color": {
"palette": [
{ "slug": "foreground", "color": "#000000", "name": "Foreground" },
{ "slug": "background", "color": "#f2f2f2", "name": "Background" },
{ "slug": "background-header", "color": "#ffffff", "name": "Background header" },
{ "slug": "primary", "color": "#0d0d0d", "name": "Primary" },
{ "slug": "secondary", "color": "#F0EAE6", "name": "Secondary" },
{ "slug": "tertiary", "color": "#eb3425", "name": "Tertiary" },
{ "slug": "quaternary", "color": "#7c7e83", "name": "Quaternary" }
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": ""Public Sans", sans-serif",
"name": "Public Sans",
"slug": "public-sans",
"fontFace": [
{ "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:.assets/fonts/publicSans/PublicSans-VariableFont_wght.ttf.woff2" ] },
{ "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/publicSans/PublicSans-Italic-VariableFont_wght.ttf.woff2" ] }
]
}
]
}
},
"styles": {
"blocks": {
"core/image": {
"filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
},
"core/post-title": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "700", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
},
"core/query-title": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
},
"core/post-featured-image": {
"filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
},
"core/site-logo": {
"filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
},
"core/site-title": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontSize": "var(--wp--preset--font-size--normal)", "fontWeight": "normal" }
}
},
"color": { "background": "var(--wp--preset--color--background)", "text": "var(--wp--preset--color--foreground)" },
"elements": {
"h1": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "600", "fontSize": "var(--wp--custom--typography--font-size--colossal)" }
},
"h2": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "600", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
},
"h3": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--custom--typography--font-size--huge)" }
},
"h4": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--preset--font-size--x-large)" }
},
"h5": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "700", "textTransform": "uppercase", "fontSize": "var(--wp--preset--font-size--medium)" }
},
"h6": {
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "400", "textTransform": "uppercase", "fontSize": "var(--wp--preset--font-size--medium)" }
},
"link": {
"color": { "text": "var(--wp--custom--color--foreground)" }
}
},
"typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontSize": "var(--wp--preset--font-size--normal)" }
}
}Este código intercambia paletas de colores de theme.json y también registra y define archivos locales Public Sans.
EN black.json también es muy similar y utiliza fuentes Source Serif Pro registradas en functions.php expediente.
Ejemplo de temas de bloque con variaciones de estilos de tema
- Veinticinco y dos - el primer tema predeterminado, incluidas las variaciones de estilo. Su versión actualizada 1.2, completa con WordPress 6.0 incluye tres variaciones de estilo - "Azul", "Rosa" y "Suizo": permite a los usuarios cambiar rápidamente entre diferentes estilos visuales.
- escarcha - Tema de bloque experimental con variación del estilo de tema oscuro.
- Alara - tiene más de 100 instalaciones activas e incluye 7 variaciones de estilo.
- wabi- que poderes rico tabor el sitio web contiene 3 opciones de estilo y más de 300 instalaciones activas.
- Dinámico - Hay más de 600 instalaciones y una variación de estilo sobre un tema oscuro.
- Colgante - un tema del equipo temático de Automattic en desarrollo en GitHub contiene 3 variaciones de estilo de tema.
EN este artículo de WP TavernJustin sugiere que los creadores de temas pueden usar esta nueva función vinculándola a la configuración de los visitantes del sitio, mientras que algunos usuarios pueden preferir personalizar su sitio, dándole al diseño un aspecto estacional o basado en eventos. Probablemente sea un poco temprano, pero solo el tiempo dirá cómo los autores y usuarios de temas utilizarán esta potente función.
resumiendo
La creación de variaciones de estilo en un tema de bloque con diferentes tipografías y combinaciones de colores se ha simplificado enormemente sin el uso de complementos. Esta es una de mis características favoritas del editor de bloques, que planeo aplicar en mis proyectos personales.
En mi opinión, las variaciones en el estilo del tema son definitivamente una juegos de cambio para temas de bloque y con esta práctica función, es posible que no necesite temas secundarios o incluso muchos temas de bloque de cookies. Varios temas de bloques básicos bien diseñados, similares al equipo de temas automatizado lienzo de bloque o base de bloque (temas para bloques base en el proceso de trabajo en GitHub), se pueden personalizar con una variación del estilo del tema.
Deja una respuesta