Theme.json version 2

Theme.json version 2


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