page.html
header

Global styles – wp_global_styles

The Global Styles interface in the Site Editor updates a custom post type (CPT) called wp_global_styles.

Using my oik-types plugin I changed the registration so that this CPT was, in addition to the original settings : Publicly queryable, Show UI, Show in menu and Show in admin bar. This gave me access to the Global Styles from the admin menu.

I then copied the contents. It’s fairly unreadable in its minimised mode.

{"isGlobalStylesUserThemeJSON":true,"styles":{"core/navigation":{"typography":{"fontSize":"13px","fontStyle":"normal","fontWeight":"700"},"color":{"text":"#eeeeee"}},"core/site-title":{"typography":{"fontSize":"36px"},"color":{"text":"#eeeeee","link":"#eeeeee"}},"core/site-tagline":{"color":{"text":"#ffffff"},"typography":{"fontSize":"36px"}},"root":{"typography":{"fontStyle":"normal","fontWeight":"500","fontFamily":"Open Sans, sans-serif"},"color":{"text":"#616161","link":"#3498db"}},"core/heading/h1":{"color":{"text":"#eeeeee"}},"core/heading/h2":{"color":{"text":"#616161"}},"core/template-part":{"color":{"link":"#3498db"}},"core/cover":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}}}}}

It looks better when pretty printed using a JSON formatter.

{
  "isGlobalStylesUserThemeJSON": true,
  "styles": {
    "core/navigation": {
      "typography": {
        "fontSize": "13px",
        "fontStyle": "normal",
        "fontWeight": "700"
      },
      "color": {
        "text": "#eeeeee"
      }
    },
    "core/site-title": {
      "typography": {
        "fontSize": "36px"
      },
      "color": {
        "text": "#eeeeee",
        "link": "#eeeeee"
      }
    },
    "core/site-tagline": {
      "color": {
        "text": "#ffffff"
      },
      "typography": {
        "fontSize": "36px"
      }
    },
    "root": {
      "typography": {
        "fontStyle": "normal",
        "fontWeight": "500",
        "fontFamily": "Open Sans, sans-serif"
      },
      "color": {
        "text": "#616161",
        "link": "#3498db"
      }
    },
    "core/heading/h1": {
      "color": {
        "text": "#eeeeee"
      }
    },
    "core/heading/h2": {
      "color": {
        "text": "#616161"
      }
    },
    "core/template-part": {
      "color": {
        "link": "#3498db"
      }
    },
    "core/cover": {
      "spacing": {
        "padding": {
          "top": "100px",
          "right": "100px",
          "bottom": "100px",
          "left": "100px"
        }
      }
    }
  }
}

The information stored in the database only contains the overrides to the theme.json file.

The version of the file (as of 5th May 2021 ) is shown below.

{
  "templateParts": {
  },
  "settings": {
    "defaults": {
      "color": {
        "gradients": [ ],
        "link": true,
        "palette": [
          {
            "slug": "foreground",
            "name": "Foreground",
            "color": "#1a1a2a"
          },
          {
            "slug": "background",
            "name": "Background",
            "color": "#ffffff"
          },
          {
            "slug": "link",
            "name": "Link",
            "color": "#3498db"
          },
          { "slug":  "current-menu",
            "name": "Current menu",
            "color": "#00a0d2"
          },
          {
            "slug": "site-header-background",
            "name": "Blue",
            "color": "#0073aa"
          },
          {
            "name": "Bold blue",
            "slug": "bold-blue",
            "color": "#0072a9"
          },

          {
            "name": "Pale cyan blue",
            "slug": "pale-cyan-blue",
            "color": "#8ed1fc"
          },
          {
            "name": "Vivid cyan blue",
            "slug": "vivid-cyan-blue",
            "color": "#0693e3"
          },

          {
            "name": "Very light gray",
            "slug": "very-light-gray",
            "color": "#eeeeee"
          },
          {
            "name": "Cyan bluish gray",
            "slug": "cyan-bluish-gray",
            "color": "#abb8c3"
          },
          {
            "name": "Darker gray",
            "slug": "darker-gray",
            "color": "#616161"
          },
          {
            "name": "White",
            "slug": "white",
            "color": "#ffffff"
          }]
      },
      "spacing": {
        "customPadding": true
      },
      "typography": {
        "customLineHeight": true,
        "fontFamilies": [
          {
            "fontFamily": "Open Sans, sans-serif",
            "slug": "opensans"
          },
          {
            "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
            "slug": "helvetica-arial"
          }

        ],
        "fontSizes": [
          {
            "name": "Tiny",
            "size": "12px",
            "slug": "tiny"
          },
          {
            "name": "Small",
            "size": "16px",
            "slug": "small"
          },
          {
            "name": "Normal",
            "size": "18px",
            "slug": "normal"
          },
          {
            "name": "Medium",
            "size": "20px",
            "slug": "medium"
          },
          {
            "name": "Large",
            "size": "24px",
            "slug": "large"
          },
          {
            "name": "Larger",
            "size": "30px",
            "slug": "larger"
          },
          {
            "name": "Largest",
            "size": "36px",
            "slug": "largest"
          }
        ]
      },
      "layout": {
        "contentSize": "800px",
        "wideSize": "1200px"
      }
    }
  },
  "styles": {
    "root": {
      "color": {
        "background": "var( --wp--preset--color--background )",
        "text": "var( --wp--preset--color--foreground )",
        "link": "var( --wp--preset--color--link)"
      },
      "typography": { },
      "padding": "0px"
    }
  }
}

Theoretically, I should be able to merge the contents from the database with the theme.json file. Then, when used in other sites, resetting global styles would revert to customised version.

Navigation

    Page List

    Page Tree ( shortcode )

    © Copyright Herb Miller, Bobbing Wide 2021