Add Global Styles REST API endpoints from Gutenberg plugin into Core

[noisysocks]

• Add wp/v2/global-styles endpoint.
• Update existing global style endpoints in Core with changes that are in the plugin.
• Update WP_Theme_JSON, WP_Theme_JSON_Resolver, etc. with changes that are in the plugin.

​https://github.com/WordPress/gutenberg/blob/trunk/lib/compat/wordpress-5.9/class-gutenberg-rest-global-styles-controller.php

https://core.trac.wordpress.org/ticket/54336

Work in Progress.

This PR ports to core the changes to the classes that deal with theme.json code.

JFYI @jorgefilipecosta

JFYI @jorgefilipecosta

I've updated the base classes and all that's left now is to update their usage and fix some tests.

I've done a second pass at this. What's left:

• Port the render_duotone_filter_preset function, which is part of duotone block supports. This is used as a callback by WP_Theme_JSON. This can be a different PR to land before this one or just merge here.
• I've seen some lint errors reported, will see how to fix them.

The remaining failing test is a bit obscure. It looks like it's an environment that can't be created. I can't repro locally.

Unit tests seem to be failing.

[spacedmonkey]

I consider ​#36206 as block for merge.

I would also much believe that the unit test coverage Gutenberg_REST_Global_Styles_Controller class needs expanding an improvement.

[jorgefilipecosta]

In 52041:

Add: wp_global_styles custom post type.

This commit adds the wp_global_styles custom post type following the same approach used to add other core custom post types. It also updates the wp_theme taxonomy to include the wp_global_styles post type.
The post type is registered in the same way it is on the plugin we just adapt the location for the core.

See #54336.
Props oandregal.

[kebbet]

Replying to jorgefilipecosta:

In 52041:

Add: wp_global_styles custom post type.

This commit adds the wp_global_styles custom post type following the same approach used to add other core custom post types. It also updates the wp_theme taxonomy to include the wp_global_styles post type.
The post type is registered in the same way it is on the plugin we just adapt the location for the core.

See #54336.
Props oandregal.

One string has incorrect text domain (for core there should be none).
And the description for the CPT is not translatable. Should use ().

[swissspidy]

@jorgefilipecosta Shouldn't this post type be registered with _builtin => true?

Also, besides making the description translatable, it should really have some better wording.

https://core.trac.wordpress.org/ticket/54336

This PR ports the public functions to interact with the global styles & settings.

How to test

(same than for ​https://github.com/WordPress/wordpress-develop/pull/1808)

• Use TwentyTwentyOne.
• In its functions.php file, comment the lines that add support for the following: custom-line-height, experimental-link-color, custom-spacing, custom-units.
• Create a theme.json in the top-level directory of the theme and paste these contents:

{
        "version": 2,
        "settings": {
                "color": {
                        "custom": false,
                        "link": true
                },
                "spacing": {
                        "padding": true
                },
                "typography": {
                        "lineHeight": true,
                        "fontSizes": []
                },
                "layout": {
                        "contentSize": "840px",
                        "wideSize": "1100px"
                }
        }
}

In the post editor

Verify that the settings are respected: users can't add custom colors, link color is present, the cover block has the spacing panel with the padding control, the typography panel only shows line-height but not font sizes.

Change the settings and verify that it still works as expected.

Substitute the content of the theme.json by these:

{
        "version": 1,
        "settings": {
                "color": {
                        "custom": false,
                        "link": true
                },
                "spacing": {
                        "customPadding": true
                },
                "typography": {
                        "customLineHeight": true,
                        "fontSizes": []
                },
                "layout": {
                        "contentSize": "840px",
                        "wideSize": "1100px"
                }
        }
}

Verify that it still works as expected.

In the front

Verify that there's an embedded stylesheet whose name is global-styles-inline-css and that it contains:

• the CSS Custom Properties for the presets defined by core and the theme
• the layout/alignment styles
• the classes for the presets defined by core and the theme

body {
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--color--dark-gray: #28303d;
  --wp--preset--color--gray: #39414d;
  --wp--preset--color--green: #d1e4dd;
  --wp--preset--color--blue: #d1dfe4;
  --wp--preset--color--purple: #d1d1e4;
  --wp--preset--color--red: #e4d1d1;
  --wp--preset--color--orange: #e4dad1;
  --wp--preset--color--yellow: #eeeadd;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(
    135deg,
    rgba(6, 147, 227, 1) 0%,
    rgb(155, 81, 224) 100%
  );
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(
    135deg,
    rgb(122, 220, 180) 0%,
    rgb(0, 208, 130) 100%
  );
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(
    135deg,
    rgba(252, 185, 0, 1) 0%,
    rgba(255, 105, 0, 1) 100%
  );
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(
    135deg,
    rgba(255, 105, 0, 1) 0%,
    rgb(207, 46, 46) 100%
  );
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(
    135deg,
    rgb(238, 238, 238) 0%,
    rgb(169, 184, 195) 100%
  );
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(
    135deg,
    rgb(74, 234, 220) 0%,
    rgb(151, 120, 209) 20%,
    rgb(207, 42, 186) 40%,
    rgb(238, 44, 130) 60%,
    rgb(251, 105, 98) 80%,
    rgb(254, 248, 76) 100%
  );
  --wp--preset--gradient--blush-light-purple: linear-gradient(
    135deg,
    rgb(255, 206, 236) 0%,
    rgb(152, 150, 240) 100%
  );
  --wp--preset--gradient--blush-bordeaux: linear-gradient(
    135deg,
    rgb(254, 205, 165) 0%,
    rgb(254, 45, 45) 50%,
    rgb(107, 0, 62) 100%
  );
  --wp--preset--gradient--luminous-dusk: linear-gradient(
    135deg,
    rgb(255, 203, 112) 0%,
    rgb(199, 81, 192) 50%,
    rgb(65, 88, 208) 100%
  );
  --wp--preset--gradient--pale-ocean: linear-gradient(
    135deg,
    rgb(255, 245, 203) 0%,
    rgb(182, 227, 212) 50%,
    rgb(51, 167, 181) 100%
  );
  --wp--preset--gradient--electric-grass: linear-gradient(
    135deg,
    rgb(202, 248, 128) 0%,
    rgb(113, 206, 126) 100%
  );
  --wp--preset--gradient--midnight: linear-gradient(
    135deg,
    rgb(2, 3, 129) 0%,
    rgb(40, 116, 252) 100%
  );
  --wp--preset--gradient--purple-to-yellow: linear-gradient(
    160deg,
    #d1d1e4 0%,
    #eeeadd 100%
  );
  --wp--preset--gradient--yellow-to-purple: linear-gradient(
    160deg,
    #eeeadd 0%,
    #d1d1e4 100%
  );
  --wp--preset--gradient--green-to-yellow: linear-gradient(
    160deg,
    #d1e4dd 0%,
    #eeeadd 100%
  );
  --wp--preset--gradient--yellow-to-green: linear-gradient(
    160deg,
    #eeeadd 0%,
    #d1e4dd 100%
  );
  --wp--preset--gradient--red-to-yellow: linear-gradient(
    160deg,
    #e4d1d1 0%,
    #eeeadd 100%
  );
  --wp--preset--gradient--yellow-to-red: linear-gradient(
    160deg,
    #eeeadd 0%,
    #e4d1d1 100%
  );
  --wp--preset--gradient--purple-to-red: linear-gradient(
    160deg,
    #d1d1e4 0%,
    #e4d1d1 100%
  );
  --wp--preset--gradient--red-to-purple: linear-gradient(
    160deg,
    #e4d1d1 0%,
    #d1d1e4 100%
  );
  --wp--preset--font-size--small: 18px;
  --wp--preset--font-size--normal: 20px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 24px;
  --wp--preset--font-size--huge: 96px;
  --wp--preset--font-size--extra-small: 16px;
  --wp--preset--font-size--extra-large: 40px;
  --wp--preset--font-size--gigantic: 144px;
}
body {
  margin: 0;
}
.wp-site-blocks > .alignleft {
  float: left;
  margin-right: 2em;
}
.wp-site-blocks > .alignright {
  float: right;
  margin-left: 2em;
}
.wp-site-blocks > .aligncenter {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.has-black-color {
  color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-color {
  color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-color {
  color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-color {
  color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-color {
  color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-color {
  color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-color {
  color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-color {
  color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-color {
  color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-color {
  color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-color {
  color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-color {
  color: var(--wp--preset--color--vivid-purple) !important;
}
.has-dark-gray-color {
  color: var(--wp--preset--color--dark-gray) !important;
}
.has-gray-color {
  color: var(--wp--preset--color--gray) !important;
}
.has-green-color {
  color: var(--wp--preset--color--green) !important;
}
.has-blue-color {
  color: var(--wp--preset--color--blue) !important;
}
.has-purple-color {
  color: var(--wp--preset--color--purple) !important;
}
.has-red-color {
  color: var(--wp--preset--color--red) !important;
}
.has-orange-color {
  color: var(--wp--preset--color--orange) !important;
}
.has-yellow-color {
  color: var(--wp--preset--color--yellow) !important;
}
.has-black-background-color {
  background-color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-background-color {
  background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-background-color {
  background-color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-background-color {
  background-color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-background-color {
  background-color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-background-color {
  background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-background-color {
  background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-background-color {
  background-color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-background-color {
  background-color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-background-color {
  background-color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-background-color {
  background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-background-color {
  background-color: var(--wp--preset--color--vivid-purple) !important;
}
.has-dark-gray-background-color {
  background-color: var(--wp--preset--color--dark-gray) !important;
}
.has-gray-background-color {
  background-color: var(--wp--preset--color--gray) !important;
}
.has-green-background-color {
  background-color: var(--wp--preset--color--green) !important;
}
.has-blue-background-color {
  background-color: var(--wp--preset--color--blue) !important;
}
.has-purple-background-color {
  background-color: var(--wp--preset--color--purple) !important;
}
.has-red-background-color {
  background-color: var(--wp--preset--color--red) !important;
}
.has-orange-background-color {
  background-color: var(--wp--preset--color--orange) !important;
}
.has-yellow-background-color {
  background-color: var(--wp--preset--color--yellow) !important;
}
.has-black-border-color {
  border-color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-border-color {
  border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-border-color {
  border-color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-border-color {
  border-color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-border-color {
  border-color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-border-color {
  border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-border-color {
  border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-border-color {
  border-color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-border-color {
  border-color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-border-color {
  border-color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-border-color {
  border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-border-color {
  border-color: var(--wp--preset--color--vivid-purple) !important;
}
.has-dark-gray-border-color {
  border-color: var(--wp--preset--color--dark-gray) !important;
}
.has-gray-border-color {
  border-color: var(--wp--preset--color--gray) !important;
}
.has-green-border-color {
  border-color: var(--wp--preset--color--green) !important;
}
.has-blue-border-color {
  border-color: var(--wp--preset--color--blue) !important;
}
.has-purple-border-color {
  border-color: var(--wp--preset--color--purple) !important;
}
.has-red-border-color {
  border-color: var(--wp--preset--color--red) !important;
}
.has-orange-border-color {
  border-color: var(--wp--preset--color--orange) !important;
}
.has-yellow-border-color {
  border-color: var(--wp--preset--color--yellow) !important;
}
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
  background: var(
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple
  ) !important;
}
.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
  background: var(
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan
  ) !important;
}
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
  background: var(
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange
  ) !important;
}
.has-luminous-vivid-orange-to-vivid-red-gradient-background {
  background: var(
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red
  ) !important;
}
.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
  background: var(
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray
  ) !important;
}
.has-cool-to-warm-spectrum-gradient-background {
  background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
}
.has-blush-light-purple-gradient-background {
  background: var(--wp--preset--gradient--blush-light-purple) !important;
}
.has-blush-bordeaux-gradient-background {
  background: var(--wp--preset--gradient--blush-bordeaux) !important;
}
.has-luminous-dusk-gradient-background {
  background: var(--wp--preset--gradient--luminous-dusk) !important;
}
.has-pale-ocean-gradient-background {
  background: var(--wp--preset--gradient--pale-ocean) !important;
}
.has-electric-grass-gradient-background {
  background: var(--wp--preset--gradient--electric-grass) !important;
}
.has-midnight-gradient-background {
  background: var(--wp--preset--gradient--midnight) !important;
}
.has-purple-to-yellow-gradient-background {
  background: var(--wp--preset--gradient--purple-to-yellow) !important;
}
.has-yellow-to-purple-gradient-background {
  background: var(--wp--preset--gradient--yellow-to-purple) !important;
}
.has-green-to-yellow-gradient-background {
  background: var(--wp--preset--gradient--green-to-yellow) !important;
}
.has-yellow-to-green-gradient-background {
  background: var(--wp--preset--gradient--yellow-to-green) !important;
}
.has-red-to-yellow-gradient-background {
  background: var(--wp--preset--gradient--red-to-yellow) !important;
}
.has-yellow-to-red-gradient-background {
  background: var(--wp--preset--gradient--yellow-to-red) !important;
}
.has-purple-to-red-gradient-background {
  background: var(--wp--preset--gradient--purple-to-red) !important;
}
.has-red-to-purple-gradient-background {
  background: var(--wp--preset--gradient--red-to-purple) !important;
}
.has-small-font-size {
  font-size: var(--wp--preset--font-size--small) !important;
}
.has-normal-font-size {
  font-size: var(--wp--preset--font-size--normal) !important;
}
.has-medium-font-size {
  font-size: var(--wp--preset--font-size--medium) !important;
}
.has-large-font-size {
  font-size: var(--wp--preset--font-size--large) !important;
}
.has-huge-font-size {
  font-size: var(--wp--preset--font-size--huge) !important;
}
.has-extra-small-font-size {
  font-size: var(--wp--preset--font-size--extra-small) !important;
}
.has-extra-large-font-size {
  font-size: var(--wp--preset--font-size--extra-large) !important;
}
.has-gigantic-font-size {
  font-size: var(--wp--preset--font-size--gigantic) !important;
}

Add the following styles to the theme.json:

{
        "version": 2,
        "settings": { ... },
        "styles": {
                "color": {
                        "background": "black",
                        "text": "white"
                }
        }
}

and verify that the block styles are added, in addition to the above:

body {
  background-color: black;
  color: white;
}

Trac ticket: https://core.trac.wordpress.org/ticket/54336

Adresses https://core.trac.wordpress.org/ticket/54336#comment:13 and https://core.trac.wordpress.org/ticket/54336#comment:14

[jorgefilipecosta]

In 52049:

Update theme.json classes for WordPress 5.9.

This commit ports to core the changes to the classes that deal with theme.json code.

See #54336.
Props oandregal, spacedmonkey, noisysocks, hellofromtonya, youknowriad.

Thank you all for the feedback it was a huge PR that took some iterations but it is finally committed ​https://github.com/WordPress/wordpress-develop/commit/60725c46ca1f657bb05ca16ea64d8b3476b8cbbb.

That said don't hesitate in providing additional feedback if there are further improvements and we will iterate on the changes and propose another patch.

To recap, these are the follow-up PRs

• Port block supports: this is probably going to be done at ​https://github.com/WordPress/wordpress-develop/pull/1804 (need to check).
• ​https://github.com/WordPress/wordpress-develop/pull/1816
• ​https://github.com/WordPress/wordpress-develop/pull/1819 (already merged)
• ​https://github.com/WordPress/wordpress-develop/pull/1821
• ​https://github.com/WordPress/wordpress-develop/pull/1831

[jorgefilipecosta]

In 52050:

Fix: Update block-theme-pl_PL.mo file.

See #54336.
Props oandregal.

[jorgefilipecosta]

In 52051:

Add: Global Styles Rest endpoints.

This commit ports the global styles rest endpoints from the Gutenberg plugin into the core.

See #54336.
Props oandregal, aristath, timothyblynjacobs, spacedmonkey, youknowriad.

[jorgefilipecosta]

In 52052:

Add: Global styles user content escaping.

This commit adds global styles user content escaping. In addition, it ports the logic on the Gutenberg plugin implemented on WordPress/gutenberg#28061 to the core.
The logic tries to follow what was done for standard post content.

See #54336.
Props oandregal.

[jorgefilipecosta]

In 52054:

Add: Public functions for interacting with global styles & settings.

This commit ports the public functions to interact with the global styles & settings.

See #54336.
Props oandregal.

[spacedmonkey]

@jorgefilipecosta You seemed to miss this comment.

The PR ​#36206, has been merged in the gutenberg repo. Please push these changed to core.

[TobiasBg]

In addition to the kebbet's and swissspidy's comments, the wp_filter_global_styles_post() function should get a @since tag in its inline docs.

[spacedmonkey]

I would also change

new WP_REST_Block_Renderer_Controller;

to

new WP_REST_Block_Renderer_Controller();

[kebbet]

​https://github.com/WordPress/wordpress-develop/pull/1832 now targets comment 25 by @TobiasBG and 26 by @spacedmonkey.

Plus removal of incorrect use of textdomain gutenberg i core.

Part of https://core.trac.wordpress.org/ticket/54336

This PR follows-up ​https://github.com/WordPress/wordpress-develop/pull/1816 (new endpoint for global styles) and ​https://github.com/WordPress/wordpress-develop/pull/1831 (new public APIs for global styles).

In landing those and others in parallel we missed that we should have used the public APIs in the endpoint code as well.

How to test

Verify that the endpoint still returns the proper theme data:

• Use the TwentyTwentyOne theme.
• Create a theme.json in the top-level directory of the theme with the following contents:

{
        "version": 1,
        "settings": {
                "color": {
                        "custom": false,
                        "link": true
                },
                "spacing": {
                        "customPadding": true
                },
                "typography": {
                        "customLineHeight": true
                },
                "layout": {
                        "contentSize": "840px",
                        "wideSize": "1100px"
                }
        },
        "styles": {
                "blocks": {
                        "core/image": {
                                "filter": {
                                        "duotone": "var(--wp--preset--duotone-filter--blue-red)"
                                }
                        }
                }
        }
}

• Go to the post editor and open a developer console. Run the following code in the console: (await wp.apiFetch({path: 'wp/v2/global-styles/themes/twentytwentyone' } ) );
• The expected result is that you get the proper settings and styles:

{
  "settings": {
    "border": {
      "color": false,
      "radius": false,
      "style": false,
      "width": false
    },
    "color": {
      "custom": false,
      "customDuotone": true,
      "customGradient": true,
      "link": true,
      "background": true,
      "text": true,
      "duotone": {
        "core": [
          {
            "name": "Dark grayscale",
            "colors": [
              "#000000",
              "#7f7f7f"
            ],
            "slug": "dark-grayscale"
          },
          {
            "name": "Grayscale",
            "colors": [
              "#000000",
              "#ffffff"
            ],
            "slug": "grayscale"
          },
          {
            "name": "Purple and yellow",
            "colors": [
              "#8c00b7",
              "#fcff41"
            ],
            "slug": "purple-yellow"
          },
          {
            "name": "Blue and red",
            "colors": [
              "#000097",
              "#ff4747"
            ],
            "slug": "blue-red"
          },
          {
            "name": "Midnight",
            "colors": [
              "#000000",
              "#00a5ff"
            ],
            "slug": "midnight"
          },
          {
            "name": "Magenta and yellow",
            "colors": [
              "#c7005a",
              "#fff278"
            ],
            "slug": "magenta-yellow"
          },
          {
            "name": "Purple and green",
            "colors": [
              "#a60072",
              "#67ff66"
            ],
            "slug": "purple-green"
          },
          {
            "name": "Blue and orange",
            "colors": [
              "#1900d8",
              "#ffa96b"
            ],
            "slug": "blue-orange"
          }
        ]
      },
      "gradients": {
        "core": [
          {
            "name": "Vivid cyan blue to vivid purple",
            "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
            "slug": "vivid-cyan-blue-to-vivid-purple"
          },
          {
            "name": "Light green cyan to vivid green cyan",
            "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
            "slug": "light-green-cyan-to-vivid-green-cyan"
          },
          {
            "name": "Luminous vivid amber to luminous vivid orange",
            "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
            "slug": "luminous-vivid-amber-to-luminous-vivid-orange"
          },
          {
            "name": "Luminous vivid orange to vivid red",
            "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
            "slug": "luminous-vivid-orange-to-vivid-red"
          },
          {
            "name": "Very light gray to cyan bluish gray",
            "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
            "slug": "very-light-gray-to-cyan-bluish-gray"
          },
          {
            "name": "Cool to warm spectrum",
            "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
            "slug": "cool-to-warm-spectrum"
          },
          {
            "name": "Blush light purple",
            "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
            "slug": "blush-light-purple"
          },
          {
            "name": "Blush bordeaux",
            "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
            "slug": "blush-bordeaux"
          },
          {
            "name": "Luminous dusk",
            "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
            "slug": "luminous-dusk"
          },
          {
            "name": "Pale ocean",
            "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
            "slug": "pale-ocean"
          },
          {
            "name": "Electric grass",
            "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
            "slug": "electric-grass"
          },
          {
            "name": "Midnight",
            "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
            "slug": "midnight"
          }
        ],
        "theme": [
          {
            "name": "Purple to yellow",
            "gradient": "linear-gradient(160deg, #D1D1E4 0%, #EEEADD 100%)",
            "slug": "purple-to-yellow"
          },
          {
            "name": "Yellow to purple",
            "gradient": "linear-gradient(160deg, #EEEADD 0%, #D1D1E4 100%)",
            "slug": "yellow-to-purple"
          },
          {
            "name": "Green to yellow",
            "gradient": "linear-gradient(160deg, #D1E4DD 0%, #EEEADD 100%)",
            "slug": "green-to-yellow"
          },
          {
            "name": "Yellow to green",
            "gradient": "linear-gradient(160deg, #EEEADD 0%, #D1E4DD 100%)",
            "slug": "yellow-to-green"
          },
          {
            "name": "Red to yellow",
            "gradient": "linear-gradient(160deg, #E4D1D1 0%, #EEEADD 100%)",
            "slug": "red-to-yellow"
          },
          {
            "name": "Yellow to red",
            "gradient": "linear-gradient(160deg, #EEEADD 0%, #E4D1D1 100%)",
            "slug": "yellow-to-red"
          },
          {
            "name": "Purple to red",
            "gradient": "linear-gradient(160deg, #D1D1E4 0%, #E4D1D1 100%)",
            "slug": "purple-to-red"
          },
          {
            "name": "Red to purple",
            "gradient": "linear-gradient(160deg, #E4D1D1 0%, #D1D1E4 100%)",
            "slug": "red-to-purple"
          }
        ]
      },
      "palette": {
        "core": [
          {
            "name": "Black",
            "slug": "black",
            "color": "#000000"
          },
          {
            "name": "Cyan bluish gray",
            "slug": "cyan-bluish-gray",
            "color": "#abb8c3"
          },
          {
            "name": "White",
            "slug": "white",
            "color": "#ffffff"
          },
          {
            "name": "Pale pink",
            "slug": "pale-pink",
            "color": "#f78da7"
          },
          {
            "name": "Vivid red",
            "slug": "vivid-red",
            "color": "#cf2e2e"
          },
          {
            "name": "Luminous vivid orange",
            "slug": "luminous-vivid-orange",
            "color": "#ff6900"
          },
          {
            "name": "Luminous vivid amber",
            "slug": "luminous-vivid-amber",
            "color": "#fcb900"
          },
          {
            "name": "Light green cyan",
            "slug": "light-green-cyan",
            "color": "#7bdcb5"
          },
          {
            "name": "Vivid green cyan",
            "slug": "vivid-green-cyan",
            "color": "#00d084"
          },
          {
            "name": "Pale cyan blue",
            "slug": "pale-cyan-blue",
            "color": "#8ed1fc"
          },
          {
            "name": "Vivid cyan blue",
            "slug": "vivid-cyan-blue",
            "color": "#0693e3"
          },
          {
            "name": "Vivid purple",
            "slug": "vivid-purple",
            "color": "#9b51e0"
          }
        ],
        "theme": [
          {
            "name": "Black",
            "slug": "black",
            "color": "#000000"
          },
          {
            "name": "Dark gray",
            "slug": "dark-gray",
            "color": "#28303D"
          },
          {
            "name": "Gray",
            "slug": "gray",
            "color": "#39414D"
          },
          {
            "name": "Green",
            "slug": "green",
            "color": "#D1E4DD"
          },
          {
            "name": "Blue",
            "slug": "blue",
            "color": "#D1DFE4"
          },
          {
            "name": "Purple",
            "slug": "purple",
            "color": "#D1D1E4"
          },
          {
            "name": "Red",
            "slug": "red",
            "color": "#E4D1D1"
          },
          {
            "name": "Orange",
            "slug": "orange",
            "color": "#E4DAD1"
          },
          {
            "name": "Yellow",
            "slug": "yellow",
            "color": "#EEEADD"
          },
          {
            "name": "White",
            "slug": "white",
            "color": "#FFFFFF"
          }
        ]
      }
    },
    "spacing": {
      "blockGap": null,
      "margin": false,
      "padding": true,
      "units": [
        "px",
        "em",
        "rem",
        "vh",
        "vw",
        "%"
      ]
    },
    "typography": {
      "customFontSize": true,
      "dropCap": true,
      "fontStyle": true,
      "fontWeight": true,
      "letterSpacing": true,
      "lineHeight": true,
      "textDecoration": true,
      "textTransform": true,
      "fontSizes": {
        "core": [
          {
            "name": "Small",
            "slug": "small",
            "size": "13px"
          },
          {
            "name": "Normal",
            "slug": "normal",
            "size": "16px"
          },
          {
            "name": "Medium",
            "slug": "medium",
            "size": "20px"
          },
          {
            "name": "Large",
            "slug": "large",
            "size": "36px"
          },
          {
            "name": "Huge",
            "slug": "huge",
            "size": "42px"
          }
        ],
        "theme": [
          {
            "name": "Extra small",
            "shortName": "XS",
            "size": "16px",
            "slug": "extra-small"
          },
          {
            "name": "Small",
            "shortName": "S",
            "size": "18px",
            "slug": "small"
          },
          {
            "name": "Normal",
            "shortName": "M",
            "size": "20px",
            "slug": "normal"
          },
          {
            "name": "Large",
            "shortName": "L",
            "size": "24px",
            "slug": "large"
          },
          {
            "name": "Extra large",
            "shortName": "XL",
            "size": "40px",
            "slug": "extra-large"
          },
          {
            "name": "Huge",
            "shortName": "XXL",
            "size": "96px",
            "slug": "huge"
          },
          {
            "name": "Gigantic",
            "shortName": "XXXL",
            "size": "144px",
            "slug": "gigantic"
          }
        ]
      }
    },
    "blocks": {
      "core/button": {
        "border": {
          "radius": true
        }
      },
      "core/pullquote": {
        "border": {
          "color": true,
          "radius": true,
          "style": true,
          "width": true
        }
      }
    },
    "layout": {
      "contentSize": "840px",
      "wideSize": "1100px"
    }
  },
  "styles": {
    "spacing": {
      "blockGap": "24px"
    },
    "blocks": {
      "core/image": {
        "filter": {
          "duotone": "var(--wp--preset--duotone-filter--blue-red)"
        }
      }
    }
  }
}

@kebbet would you remove the changes for the calendar block? It's unrelated to global styles and it's causing some tests to fail. That may need a separate PR where we can investigate in isolation, while the global styles changes can already be merged.

@kebbet would you remove the changes for the calendar block? It's unrelated to global styles and it's causing some tests to fail. That may need a separate PR where we can investigate in isolation, while the global styles changes can already be merged.

@oandregal Reverted.

And a separate PR for calendar block: ​https://github.com/WordPress/wordpress-develop/pull/1845

[desrosj]

In 52077:

Themes: Avoid fatal error loading admin styles when SCRIPT_DEBUG is false.

This removes the use of get_theme_file_path() within WP_Theme_JSON_Resolver in favor of the similar get_file_path_from_theme() method.

The former is found within wp-includes/link-template.php, which is not currently loaded when load-styles.php attempts to load the necessary styles. self::get_file_path_from_theme() was used previously, but this was changed in [52049].

Props Mamaduka, audrasjb, hellofromTonya, jorbin, desrosj.
Fixes #54401. See #54336.

@jorgefilipecosta FYI

[desrosj]

In 52106:

Posts, Post Types: Remove gutenberg text domain from post type strings.

Introduced in [52041], and [52069].

See #54336, #54337.

[kebbet]

Replying to desrosj:

In 52106:

Posts, Post Types: Remove gutenberg text domain from post type strings.

Introduced in [52041], and [52069].

See #54336, #54337.

Did you miss ​https://github.com/WordPress/wordpress-develop/pull/1832 which adressed the same, plus some more minor issues?

[desrosj]

In 52108:

Posts, Post Types: Mark the wp_global_styles post type as _builtin.

All native or “built-in” post types should be marked as such.

Follow up to [52041].

See #54336.

[desrosj]

In 52109:

i18n: Add missing translation wrapper for the Global Styles post type description.

Follow up to [52041].

See #54336.

[desrosj]

In 52110:

Docs: Avoid using “CPT” instead of “custom post type”.

Additionally, when referring to built in Core post types, “custom” is unnecessary.

This also adds a period to the end of the wp_global_styles post type description.

Follow up to [38829], [51003], [52041], [52049], [52062].

See #53399, #54335, #54336.

[desrosj]

I wanted to raise a few concerns I have about some of the method names and phrasing within WP_Theme_JSON_Resolver.

• The get_user_*() functions are a bit misleading. In reading their names, it's reasonable to assume that they are retrieving user specific data. But that's not true. A few ocblocks also reference the "user's origin configuration", but it does not have anything to do with users in the WordPress sense.
• A handful of functions refer to a custom post type. Anything built into WordPress Core is not really custom. Could these be changed to "site global styles" or "get current global styles"?

[desrosj]

Another thing I noticed is that the default post_title for a global styles post is set as __( 'Custom Styles' ) (source).

I believe that this will result in the post title being set to Custom Styles translated into the selected locale of the current user, which could be problematic. If user B has selected German, but the site default is English, it's possible that the title could be unreadable for a large number of users on the site.

I'm not really sure what the best approach is for that.

[desrosj]

@kebbet I did miss that, my apologies! I found these while reviewing the committed code and missed the PR. There are some differences that should still be committed. I'll get those committed shortly and make sure to give everyone props. Thanks for the work on that PR everyone!

[desrosj]

In 52128:

General: Minor fixes to Global Style related code.

Follow up to [52041,52049-52052,52054,52106,52108-52110].

Props swisspidy, TobiasBg, spacedmonkey, kebbet, oandregal.
See #54336.

I believe all of this is now merged in to WP trunk as of https://core.trac.wordpress.org/log/?revs=52106%2C52108-52110%2C52128. Please let me know if anything was left out!

Apologies again that I missed this PR initially and left out props. Thank you all for these contributions!

[desrosj]

In 52129:

Tests: Update qUnit test fixtures after [52128].

See #54336.

[noisysocks]

Is there anything remaining here? Thinking we can close this ticket and open new tickets for any bugs that come up.

[desrosj]

@noisysocks I think that my comments/questions in ticket:54336#comment:41 and ticket:54336#comment:42 are still unaddressed.

Happy to open follow up tickets if that's preferred.

[antonvlasenko]

FYI: I will investigate issues https://core.trac.wordpress.org/ticket/54336#comment:41 and https://core.trac.wordpress.org/ticket/54336#comment:42.
@desrosj If there are no trac tickets for the issues you mentioned in these comments, I will create them.

[antonvlasenko]

@desrosj
I've created new trac issues based on your comments above (41 and 42).
https://core.trac.wordpress.org/ticket/54517
https://core.trac.wordpress.org/ticket/54518
Please feel free to edit them if you think something is missing or wrong.

[noisysocks]

Thanks @antonvlasenko. Let's close this one out and continue in #54517 and #54518.

[audrasjb]

In 52306:

Docs: Add missing @since tag to WP_Theme_JSON_Schema functions.

Follow-up to [52049].

See #53399, #54336.

[SergeyBiryukov]

In 52320:

Docs: Some documentation improvements for WP_Theme_JSON and WP_Theme_JSON_Resolver classes:

• Make the @since 5.9.0 notes more specific. When mentioning that parameters or values have been added or changed, it is generally also helpful to include their exact names and the nature of changes for future reference.
• Update some DocBlocks per the documentation standards.

Follow-up to [52049], [52306].

See #53399, #54336.

[SergeyBiryukov]

In 52321:

Docs: Further update some @since notes in WP_Theme_JSON methods for clarity.

Follow-up to [52049], [52306], [52320].

See #53399, #54336.