Referencia de hojas de estilo global de WordPress | trucos CSS
La siguiente información se basa en la documentación de WordPress solo por conveniencia. En el momento de escribir este artículo, los estilos globales (theme.json) y la personalización de la interfaz de usuario están en desarrollo activo. Y, por supuesto, todo esto todavía está en desarrollo activo. Si nota que algo ha cambiado o es incorrecto, ¡hágamelo saber en los comentarios!
Guía de configuración de estilo de tema de bloque de CSS y WordPress
Contenido
Ajustes
{
"version": 2,
"settings": {
"border": {},
"color": {},
"typography": {},
"layout": {},
"spacing": {},
"outline": {},
"appearanceTools": true | false,
"useRootPaddingAwareAlignments": true | false
}
Comenzaremos con las configuraciones de configuración, donde las hemos dividido en varias tablas para Tipografía, Colores, Personalizado y Espaciado.
Recuerde que estos estilos de "nivel superior" se aplican a <body>
Y podría ayudar recordar la sintaxis con la que estamos tratando:
- Propiedades personalizadas de CSS:
--wp--preset--{preset-category}--{preset-slug}
- Clases CSS:
.has-{preset-slug}-{preset-category}
Borde
El border
La pestaña permite controles de borde en la interfaz de usuario del editor.
{
"version": 2,
"settings": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
}
}
Propiedad JSON | ¿Qué está haciendo? | equivalente de CSS |
---|---|---|
settings.border.color |
Habilita el control de color del marco. | border-color |
settings.border.radius |
Habilita el control del radio del borde. | border-radius |
settings.border.style |
Habilita el control de estilo de marco. | border-style |
settings.border.width |
Habilita el control de ancho de borde. | border-width |
color
El color
establece las paletas de colores, los degradados y los efectos de dos tonos del tema.
{
"version": 2,
"settings": {
"color": {
"palette": {
"slug": "",
"color": "",
"name": "",
},
"gradients": [
{
"slug": "",
"gradient": "",
"name": ""
}
],
"duotone": {
"slug": "",
"color": "",
"name": "",
}
"link": true | false
}
}
}
}
Propiedad JSON | ¿Qué está haciendo? | Propiedades CSS personalizadas |
---|---|---|
settings.color.pallete.color |
Define los valores de color para usar en todo el tema. | --wp–preset--color--{slug} |
settings.color.gradients.color |
Define patrones de degradado para usar en todo el tema. | --wp–preset--gradient--{slug} |
settings.color.duotone |
Define efectos de dos colores para su uso en todo el sitio. | –-wp–preset--duotone--{slug} |
settings.color.link |
Habilita la configuración para cambiar el color del enlace predeterminado del tema en el editor del sitio. | –-wp–preset-–color-–link |
Tipografía
{
"version": 2,
"settings": {
"styles": {
"typography": {
"dropCap": true | false,
"customFontSize": true | false,
"fluid": "<undefined>" | false,
"fontSizes": [
{
"fluid": {
"min": "",
"max": ""
},
"slug": "",
"size": "",
"name": ""
},
],
"fontFamilies": [
{
"fontFamily": "",
"name": "",
"slug": "",
"fontFace": ""
},
],
"lineHeight": true | false,
"fontStyle": true | false,
"letterSpacing": true | false,
"textDecoration": true | false,
"textTransform": true | false,
}
}
}
Propiedades JSON | ¿Qué está haciendo? | Propiedades personalizadas de CSS |
---|---|---|
settings.typography.fontSizes |
Determina el tamaño de fuente en todo el sitio. | --wp--preset--font-size--{slug} |
settings.typography.fontFamilies |
Define el uso de una fuente tipográfica en todo el sitio. | --wp--preset--font-family--{slug} |
settings.typography.lineHeight |
Define la altura de la línea que se utilizará en todo el sitio. | --wp--preset--line-height--{slug} |
settings.typography.fontStyle |
Define el estilo de fuente que se utilizará en todo el sitio. | --wp--preset--line-height--{slug} |
settings.typography.fontWeight |
Define el peso de la fuente para su uso en todo el sitio. | --wp--preset--font-weight--{slug} |
settings.typography.letterSpacing |
Define el espaciado entre letras para su uso en todo el sitio. | --wp--preset--letter-spacing--{slug} |
settings.typography.textDecoration |
Define la decoración del texto para su uso en todo el sitio. | --wp-preset --texto-decoración --{slug} |
settings.typography.textDecoration.line |
Define una línea para decorar el texto del enlace para uso en todo el sitio. | --wp-preset--text-decoration--line |
settings.typography.textDecoration.style |
Define el estilo de línea para decorar el texto del enlace para su uso en todo el sitio. | --wp-preset--text-decoration--style--{slug} |
settings.typography.textDecoration.color |
Define el color de la decoración del texto del enlace para su uso en todo el sitio. | --wp–preset--text-decoration--color--{slug} |
settings.typography.textDecoration.thickness |
Especifica el grosor de la línea decorativa del texto del vínculo para su uso en todo el sitio. | --wp–preset--text-decoration--thickness--{slug} |
settings.typography.textTransform |
Especifica el tipo de transformación de texto (mayúsculas, minúsculas) para usar en todo el sitio. | --wp--preset--text-transform--{slug} |
Intervalo
Estas configuraciones habilitan/deshabilitan los controles de margen y espacio de relleno en el editor del sitio y le permiten especificar qué unidades de CSS admitir.
"styles": {
"spacing":{
"padding": true,
"margin": true,
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
}
}
Los editores de sitios y bloques incluyen controles deslizantes de entrada que le permiten establecer una distancia en una escala de valores predefinidos. Podemos personalizar esta escala con spacingScale
Propiedad:
{
"version": 2,
"settings": {
"spacing": {
"spacingScale": {
"operator": "+",
"increment": <number>,
"steps": <number>,
"mediumStep": <number>,
"unit": ""
}
}
}
}
Propiedad JSON | ¿Qué está haciendo? | Un ejemplo |
---|---|---|
settings.spacing.operator |
Determina si el control escala hacia arriba o hacia abajo. | + |
settings.spacing.increment |
Determina en gran medida los cambios de distancia por paso. | 0.25 |
settings.spacing.steps |
Especifica el número de pasos de escala disponibles. | 6 |
settings.spacing.mediumStep |
Establece el punto medio de la escala de rango. | 1.5 |
settings.spacing.unit |
Establece la unidad de longitud de CSS en el valor numérico. | rem |
Una cosa más que podemos hacer con los espacios es crear propiedades personalizadas de CSS que se pueden usar en todo el tema:
{
"version": 2,
"settings": {
"spacing": {
"spacingSizes": [
{
"size": "",
"slug": "",
"name": ""
}
]
}
}
}
Propiedad JSON | ¿Qué está haciendo? | Un ejemplo |
settings.spacing.spacingSizes.size |
Establece el valor del tamaño personalizado, incluida la unidad. | 3.5rem |
settings.spacing.spacingSizes.slug |
El programa utilizado en el nombre de la propiedad personalizada de CSS. | medium |
settings.spacing.spacingSizes.name |
Proporciona la etiqueta de tamaño en el sitio y la interfaz de usuario del editor de bloques. | Medium |
La sintaxis de propiedad personalizada de CSS resultante es: --wp-preset--spacing--<slug>
Diseño
{
"version": 2,
"settings": {
"layout": {
"contentSize": "",
"wideSize": "",
"type": "",
}
}
}
Propiedad JSON | ¿Qué está haciendo? | Propiedad CSS generada |
---|---|---|
settings.layout.contentSize |
Establece el ancho máximo del contenedor de contenido predeterminado para páginas y publicaciones. | --wp--style--global--content-size |
settings.layout.contentWide |
Establece el ancho máximo del contenedor de contenido "ancho" para páginas y publicaciones. | --wp--style--global--wide-size |
settings.layout.type |
Determina si el contenedor es defaul t o constrained . |
Herramientas de apariencia
{
"version": 2,
"settings": {
"appearanceTools": true | false,
}
Establezca esto en true
es una abreviatura para habilitar las siguientes configuraciones:
{
"version": 2,
"settings": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
},
"color": {
"link": true
}
"spacing": {
"margin": true,
"padding": true,
"blockGap": true,
},
"typography": {
"lineHeight": true
}
}
}
Alineaciones adaptadas a las almohadillas
{
"version": 2,
"settings": {
"useRootPaddingAwareAlignments": true | false
}
Establezca esto en true
es una abreviatura para habilitar las siguientes configuraciones:
{
"version": 2,
"settings": {
"spacing": {
"margin": true,
"padding": true
},
}
}
Estilos
La idea aquí es que los estilos están organizados por estilos de alto nivel (aquellos que establecen estilos para <body>
), estilos globales (aquellos que establecen estilos a elementos globales como títulos), y estilos de bloque (aquellos que establecen estilos a bloques específicos).
{
"version": 2,
"styles": {
// Top-level styles
// etc.
// Global-level styles
"elements": { },
// Block-level styles
"blocks": { }
}
}
Estilos de primer nivel
{
"version": 2,
"styles": {
// Top-level styles
"border": [],
"color": [],
"spacing": [],
"typography": [],
"filter": "",
"shadow": "",
"outline": []
}
}
Propiedad | estilo | equivalente de CSS | apoyo adicional |
---|---|---|---|
border |
color |
border-color |
|
radius |
border-radius |
||
style |
border-style |
||
width |
border-width |
||
top |
border-top |
color , style , width |
|
right |
border-right |
color , style , width |
|
bottom |
border-bottom |
color , style , width |
|
left |
bottom-left |
color , style , width |
|
color |
background |
background-color |
|
gradient |
background-image |
||
text |
color |
||
spacing |
blockGap |
gap (en contenedores Flexbox y Grid) |
|
margin |
margin |
bottom , left , right , top |
|
padding |
padding |
bottom left , right , top |
|
typography |
fontFamily |
font-family |
|
fontSize |
font-size |
||
fontStyle |
font-style |
||
fontWeight |
font-weight |
||
letterSpacing |
letter-spacing |
||
lineHeight |
line-height |
||
textDecoration |
text-decoration |
||
textTransform |
text-transform |
||
filter |
duotone |
filter |
|
shadow |
box-shadow |
||
outline |
color |
outline-color |
|
offset |
outline-offset |
||
style |
outline-style |
||
width |
outline-width |
Estilos globales
{
"version": 2,
"styles": {
"elements": {
"buttons": {
"border": {
"radius": ""
},
"color": {
"background": "",
"text": ""
},
"heading": {},
"h1": { },
"h2": { },
"h3": { },
"h4": { },
"h5": { },
"h6": { },
"link": {
"border": { },
"color": { },
"spacing": { },
"typography": { }
}
}
}
}
}
}
Propiedad JSON | ¿Qué está haciendo? | donde se usa |
---|---|---|
styles.elements.buttons |
Define las propiedades del elemento del botón (p. ej. border , color etc) para su uso en todo el sitio. |
Botones |
styles.elements.heading |
Define estilos de todos los encabezados, (<h1> a <h6> ) elementos para su uso en todo el sitio. |
<h1> a <h6> (todo) |
styles.elements.h1 a styles.elements.h6 |
Define estilos individualmente para <h1> a <h6> elementos de bloque de encabezado para uso en todo el sitio. |
<h1> a <h6> (individual) |
styles.elements.link |
Define la relación <a> estilo de elemento para uso en todo el sitio. |
<a> |
styles.elements.cite |
Define estilos para blockquote.cite , quote.cite Clases para uso en todo el sitio. |
Citar, citar |
styles.elements.caption |
Define estilos para <figcaption> y <caption> elementos para bloques de imágenes y tablas, respectivamente, para su uso en todo el sitio. |
figura, mesa |
styles.elements.spacing.padding |
Establece el relleno de encabezados, líneas, bloques y bloques de párrafo para usar en todo el sitio. | Títulos, líneas, bloques, párrafos |
styles.elements.typography |
Establece el estilo de tipografía predeterminado para encabezados y bloques de párrafo para usar en todo el sitio. | títulos, párrafos |
Estilos a nivel global: elementos interactivos
{
"version": 2,
"styles": {
"elements": {
"button": {
"color": {
"background": " ",
"text": " "
}
":hover": {
"color": {
"background": " ",
"text": " "
}
},
":focus": {
"color": {
"background": " ",
"text": " "
}
},
":active": {
"color": {
"background": " ",
"text": " "
}
},
":visited": {
"color": {
"background": " ",
"text": " "
}
}
}
}
}
}
Nota: Podemos usar todas las propiedades JSON predefinidas en ajustes preestablecidos como tipografía, contorno, sombra, etc. para agregar estilo a cualquier elemento JSON global.
Propiedad JSON | estilo | ¿Qué está haciendo? | equivalente de CSS |
---|---|---|---|
styles.elements.color |
fondo | Define el color de fondo del enlace para uso en todo el sitio. | a:link { background-color } |
Texto | Define el color del texto del enlace para su uso en todo el sitio. | a:link { color } |
|
styles.elements.:hover |
fondo | Define el color de fondo del enlace al pasar el mouse para uso en todo el sitio. | a:hover { background-color } |
Texto | Define el color del texto del enlace al pasar el mouse para uso en todo el sitio. | a:hover { color } |
|
styles.elements.:focus |
fondo | Define el color de fondo del enlace de estado de enfoque para uso en todo el sitio. | a:focus { background-color } |
Texto | Define el color del texto del enlace de estado de enfoque para uso en todo el sitio. | a:focus { color } |
|
styles.elements.:active |
fondo | Define el color de fondo del enlace en el estado activo para su uso en todo el sitio. | a:active { background-color } |
Texto | Define el color del texto del vínculo en el estado activo para su uso en todo el sitio. | a:active { color } |
|
styles.elements.:visited |
fondo | Define el color de fondo del enlace de estado visitado para uso en todo el sitio. | a:visited { background-color } |
Texto | Define el color del texto del enlace en estado visitado para uso en todo el sitio. | a:visited { color } |
Personalizado
Esta tabla muestra ejemplos de propiedades personalizadas que puede crear usando la pestaña Personalizar de la theme.json
Las propiedades CSS personalizadas generadas por la pestaña Personalizar utilizan la siguiente sintaxis: --wp--custom--<variable-name>
Propiedad JSON | Sintaxis | Propiedad personalizada generada |
---|---|---|
settings.custom.spacing.padding |
--wp--custom--{padding} |
--wp--custom--padding |
settings.custom.typography |
--wp--custom--{typography} |
--wp--custom--typography |
settings.custom.fontWeight |
--wp--custom--{font-weight} |
--wp--custom--front-weight |
settings.custom.lineHeight |
--wp--custom--{line-height} |
--wp--custom--line-height |
settings.custom.someColor |
--wp--custom--{some-color} |
--wp--custom--some-color |
settings.custom.someParagraph |
--wp--custom--{some-paragraph} |
--wp--custom--some-paragraph |
Estilos a nivel de bloque
Todo a nivel mundial styles
inclusivo elements
se puede usar para personalizar CSS para bloques individuales para anular la personalización global. Los estilos de nivel de bloque tienen prioridad sobre los estilos de nivel superior (globales).
{
"version": 2,
"styles": {
// Top-level styles
// etc.
// Global-level styles
"elements": { },
// Block-level styles
"blocks": {
"core/<BLOCKNAME>": {
// Define or overwrite any global styles
"typography": {
"fontSize": " ",
"fontWeight": "",
"lineHeight": "",
"letterSpacing": "",
"textDecoration": "",
"textTransform": ""
},
// Define or overwrite any global elements styles
"elements": {
"link": {
"typography": {
"textDecoration": ""
},
"color": {
"text": " ",
"background-color": ""
},
":hover": {
"typography": {
"textDecoration": ""
},
"color": {
"text": "",
"background-color": ""
},
},
":focus": {
"typography": {
"textDecoration": ""
},
"color": {
"text": " ",
"background-color": ""
},
},
":active": {
"typography": {
"textDecoration": ""
},
"color": {
"text": " ",
"background-color": ""
},
},
":visited": {
"typography": {
"textDecoration": ""
},
"color": {
"text": "",
"background-color": ""
},
},
},
},
},
// Additional blocks
"core/<BLOCKNAME>": {
"typography": { },
// etc.
}
}
}
}
Propiedad JSON | estilo | ¿Qué está haciendo? |
---|---|---|
.styles.core.<BLOCKNAME>.typography |
font-size |
Establece o anula el tamaño de fuente global de este bloque únicamente. |
font-weight |
Define o anula el peso total de la fuente de este bloque únicamente. | |
line-height |
Define o anula la altura de fuente global de este bloque únicamente. | |
letter-spacing |
Define o anula el espaciado global entre letras de este bloque únicamente. | |
text-decoration |
Define o anula la decoración de texto global de este bloque únicamente. | |
text-transform |
Define o anula la transformación de texto global de este bloque solamente. | |
.styles.core.<BLOCKNAME>.elements.link.typography |
text-decoration |
Define o anula la tipografía de conexión global de este bloque únicamente. |
.styles.core.<BLOCKNAME>.elements.link.color ` |
background-color |
Define o anula el color de fondo del enlace global de este bloque solamente. |
color |
Establece o anula el color del texto del enlace global de este bloque solamente. | |
.styles.core.<BLOCKNAME>.elements.link.:hover.typography |
text-decoration |
Define o sobrescribe el texto de decoración del estado de conexión global cuando se mantiene presionado solo este bloque. |
.styles.core.<BLOCKNAME>.elements.link.:hover.color |
background-color |
Define o anula el color de fondo global del estado de espera de este bloque solamente. |
color |
Define o anula el color de fondo global del estado de espera de este bloque solamente. | |
.styles.core.<BLOCKNAME>.elements.link.:active.typography |
text-decoration |
Define o sobrescribe la decoración de texto global del estado de conexión activo de este bloque solamente. |
.styles.core.<BLOCKNAME>.elements.link.:active.color |
background-color |
Define o anula el color de fondo global del estado de enlace activo de este bloque solamente. |
color |
Define o anula el color de fondo global del estado de enlace activo de este bloque solamente. | |
.styles.core.<BLOCKNAME>.elements.link.:focus.typography |
text-decoration |
Define o sobrescribe la decoración de texto global del estado del enlace de enfoque de este bloque solamente. |
.styles.core.<BLOCKNAME>.elements.link.:focus.color |
background-color |
Define o anula el color de fondo global del estado del enlace de enfoque de este bloque solamente. |
color |
Define o anula el color de fondo global del estado del enlace de enfoque de este bloque solamente. | |
.styles.core.<BLOCKNAME>.elements.link.:visited.typography |
text-decoration |
Define o sobrescribe la decoración de texto global del estado del enlace visitado de este bloque solamente. |
.styles.core.<BLOCKNAME>.elements.link.:visited.color |
background-color |
Define o anula el color de fondo global del estado de conexión visitado de este bloque únicamente. |
color |
Se define o sobrescribe el color de fondo global del estado de conexión visitado de este bloque únicamente. |
Para ver ejemplos del uso de la personalización de CSS a nivel de bloque, puede consultar la última Tema veintitrés y otros temas de bloque recientes en directorio temático.
resumiendo
¡Has superado esta guía completa para bloquear el CSS de WordPress y la configuración de temas! Comenzamos con una breve introducción que comparaba los temas de bloques de WordPress con el sistema de plantillas PHP "clásico". A partir de ahí, hablamos un poco sobre JSON porque, curiosamente, así es como "escribimos" CSS en los temas de bloque de WordPress.
Entonces hay theme.json
el archivo real donde se definen todos estos estilos, como el style.css
fue para temas PHP clásicos. El archivo está estrechamente estructurado en secciones para alternar la configuración de WordPress y definir CSS globalmente en un tema de bloque.
Y una vez que terminamos de definir la configuración y los estilos del tema de bloque, el motor de estilo de WordPress se hace cargo y procesa nuestro JSON en un conjunto bien organizado de estilos CSS utilizados en el tema.
Guía de configuración de estilo de tema de bloque de CSS y WordPress
¡Es una locura lo diferentes que son los temas de bloque cuando se trata de definir y administrar estilos en WordPress! Todo esto todavía está en desarrollo activo y es probable que veamos nuevas funciones y opciones agregadas a theme.json
.
¿Ves algo nuevo o cambiado? ¡Por favor házmelo saber en los comentarios!
Deja una respuesta