estravagancia

cambios

Theme.json version 2

estravagancia

WordPress en su versión 5.9 incorpora la versión 2 de su theme.json

Esto nos va a cambiar la forma en la que hemos establecido algunas características en el diseño de nuestros sitios previamente. Para realizar webs corporativas, es una pasada.

Obviando el tema de las plantillas…

Por un lado tenemos los ajustes (SETTINGS) y por otro definiremos los estilos (STYLES)

settings

Color

«defaultPalette»: false,

Duotone

{
 "colors": [ "#000000", "#ffffff" ],
 "slug": "foreground-and-background",
 "name": "Foreground and background"
},
{
 "colors": [ "#000000", "#ffe2c7" ],
 "slug": "foreground-and-secondary",
 "name": "Foreground and secondary"
},
{
 "colors": [ "#000000", "#f6f6f6" ],
 "slug": "foreground-and-tertiary",
 "name": "Foreground and tertiary"
},
{
 "colors": [ "#1a4548", "#ffffff" ],
 "slug": "primary-and-background",
 "name": "Primary and background"
},
{
 "colors": [ "#1a4548", "#ffe2c7" ],
 "slug": "primary-and-secondary",
 "name": "Primary and secondary"
},
{
 "colors": [ "#1a4548", "#f6f6f6" ],
 "slug": "primary-and-tertiary",
 "name": "Primary and tertiary"
}

gradients

{
 "slug": "vertical-secondary-to-tertiary",
 "gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--tertiary) 100%)",
 "name": "Vertical secondary to tertiary"
},
{
 "slug": "vertical-secondary-to-background",
 "gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--background) 100%)",
 "name": "Vertical secondary to background"
},
{
 "slug": "vertical-tertiary-to-background",
 "gradient": "linear-gradient(to bottom,var(--wp--preset--color--tertiary) 0%,var(--wp--preset--color--background) 100%)",
 "name": "Vertical tertiary to background"
},
{
 "slug": "diagonal-primary-to-foreground",
 "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--primary) 0%,var(--wp--preset--color--foreground) 100%)",
 "name": "Diagonal primary to foreground"
},
{
 "slug": "diagonal-secondary-to-background",
 "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--secondary) 50%,var(--wp--preset--color--background) 50%)",
 "name": "Diagonal secondary to background"
},
{
 "slug": "diagonal-background-to-secondary",
 "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--secondary) 50%)",
 "name": "Diagonal background to secondary"
},
{
 "slug": "diagonal-tertiary-to-background",
 "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--tertiary) 50%,var(--wp--preset--color--background) 50%)",
 "name": "Diagonal tertiary to background"
},
{
 "slug": "diagonal-background-to-tertiary",
 "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--tertiary) 50%)",
 "name": "Diagonal background to tertiary"
}

palette

{
 "slug": "foreground",
 "color": "#111",
 "name": "Foreground"
},
{
 "slug": "background",
 "color": "#ffffff",
 "name": "Background"
},
{
 "slug": "primary",
 "color": "steelblue",
 "name": "Primary"
},
{
 "slug": "secondary",
 "color": "crimson",
 "name": "Secondary"
},
{
 "slug": "tertiary",
 "color": "coral",
 "name": "Tertiary"
}

custom

spacing

"small": "max(1.25rem, 5vw)",
"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
"large": "clamp(4rem, 10vw, 8rem)",
"outer": "var(--wp--custom--spacing--small, 1.25rem)"

typography

font-size
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
line-height
"tiny": 1.15,
"small": 1.2,
"medium": 1.4,
"normal": 1.6

typography

fontSizes

{
 "size": "clamp(0.75rem, 0.25rem + 0.8333333333333334vw, 1rem)",
 "slug": "tiny",
 "name": "Minúscula"
},
{
 "size": "clamp(1rem, 0.5rem + 0.8333333333333334vw, 1.25rem)",
 "slug": "small"
},
{
 "size": "clamp(1.25rem, 0.75rem + 0.8333333333333334vw, 1.5rem)",
 "slug": "medium"
},
{
 "size": "clamp(1.75rem, 0.75rem + 1.6666666666666667vw, 2.25rem)",
 "slug": "large"
},
{
 "size": "clamp(2.25rem, 1.25rem + 1.6666666666666667vw, 2.75rem)",
 "slug": "x-large"
},
{
 "size": "clamp(2.75rem, 1.75rem + 1.6666666666666667vw, 3.25rem)",
 "slug": "huge",
 "name": "Enorme"
},
{
 "size": "clamp(3.25rem, 1.25rem + 3.3333333333333335vw, 4.25rem)",
 "slug": "gigantic",
 "name": "Gigantesca"
},
{
 "size": "clamp(4.25rem, 2.25rem + 3.3333333333333335vw, 5.25rem)",
 "slug": "colossal",
 "name": "Colosal"
}

fontFamilies

{
 "fontFamily": "\"Source Serif Pro\", serif",
 "slug": "source-serif-pro",
 "name": "Source Serif Pro"
},
{
 "fontFamily": "\"Architects Daughter\", \"Hoefler Text\", Garamond, \"Times New Roman\", serif",
 "slug": "architects-daughter",
 "name": "Architects Daughter"
},
{
 "fontFamily": "\"Indie Flower\", \"Hoefler Text\", Garamond, \"Times New Roman\", serif",
 "slug": "indie-flower",
 "name": "Indie Flower"
},
{
 "fontFamily": "Chilanka",
 "slug": "chilanka",
 "name": "Chilanka"
}

Layout (Normal y ancho amplio)

"contentSize": "60rem",
"wideSize": "90rem"

styles

color (General)

"background": "var(--wp--preset--color--background)",
"text": "var(--wp--preset--color--foreground)"

spacing

"blockGap"        : "2rem"

typography (General)

"fontFamily"      : "var(--wp--preset--font-family--indie-flower)",
"lineHeight"      : "var(--wp--custom--typography--line-height--medium)",
"fontSize"        : "var(--wp--preset--font-size--small)"

blocks (para modificarlos individualmente)

      "core/navigation": {
        "typography": {
        }
      },
      "core/image": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--chilanka)"
        }
      },
      "core/gallery": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--chilanka)"
        }
      },
      "core/list": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--chilanka)"
        }
      },
      "core/post-title": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--architects-daughter)"
        }
      },
      "core/paragraph": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--architects-daughter)"
        }
      },
      "core/pullquote": {
        "border": {
          "width"       : "3px 0"
        }
      },
      "core/query-title": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--source-serif-pro)"
        }
      },
      "core/quote": {
        "border": {
          "width"       : "3px"
        },
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--chilanka)"
        }
      },
      "core/site-title": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--chilanka)"
        }
      },
      "core/code": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--system-font)",
          "fontSize": "var(--wp--preset--font-size--small)",
          "fontWeight": "300"
        }
      },
      "core/preformatted": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--chilanka)"
        }
      },
      "core/button": {
        "border": {
          "radius"      : "0"
        },
        "spacing ": {
          "padding": {
            "top"       : "var(--wp--custom--spacing--large)",
            "right"     : "var(--wp--custom--spacing--large)",
            "bottom"    : "var(--wp--custom--spacing--large)",
            "left"      : "var(--wp--custom--spacing--large)"
          }
        },
        "color": {
          "background"  : "var(--wp--preset--color--primary)",
          "text"        : "var(--wp--preset--color--background)"
        },
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--architects-daughter)",
          "fontWeight"  : "300"
        }
      }
    },

Referencia de los bloques de WP: https://developer.wordpress.org/block-editor/reference-guides/core-blocks/

elements (para modificar los elementos dentro de los bloques)

"h1": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--indie-flower)"
        }
},
"h2": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--architects-daughter)"
        }
},
"h3": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--indie-flower)"
        }
},
"h4": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--indie-flower)"
        }
},
"h5": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--indie-flower)"
        }
},
"h6": {
        "typography": {
          "fontFamily"  : "var(--wp--preset--font-family--architects-daughter)"
        }
},
"link": {
        "color": {
          "text"        : "var(--wp--preset--color--secondary)"
        }
}

Recomendación: Se puede aprender mucho observando los archivos del nuevo theme twentytwentytwo. 😉

+ info: https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/

subir

Utilizo cookies para obtener datos anónimos de tu experiencia en mi sitio web. Si aceptas se cargarán las cookies de google ( en concreto una que se llama: _ga ) y podré tener un perfil ANÓNIMO de tu navegación; eso me permitirá ver: donde meto la pata, que puedo corregir, y si en algún caso llego a entender todas las posibilidades que me ofrece la herramienta, y con tiempo, podría hacer una experiencia megasuperpersonalizada basada en estadísticas :D . Bueno, no me enrollo más, asumo que aceptas y entiendes la política de privacidad y cookies.

Aceptar Cancelar Recordar en otro momento