WordPress.org

Make WordPress Core

Opened 6 weeks ago

Closed 8 days ago

Last modified 4 days ago

#54336 closed task (blessed) (fixed)

Add Global Styles REST API endpoints from Gutenberg plugin into Core

Reported by: noisysocks Owned by: jorgefilipecosta
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: REST API Keywords: has-patch has-unit-tests
Focuses: Cc:

Description (last modified by 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

Change History (55)

#1 @noisysocks
5 weeks ago

  • Description modified (diff)

#2 @noisysocks
5 weeks ago

  • Description modified (diff)

This ticket was mentioned in PR #1808 on WordPress/wordpress-develop by oandregal.


5 weeks ago

  • Keywords has-patch has-unit-tests added

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.

#4 @prbot
5 weeks ago

oandregal commented on PR #1808:

JFYI @jorgefilipecosta

#5 @prbot
5 weeks ago

oandregal commented on PR #1808:

JFYI @jorgefilipecosta

This ticket was mentioned in Slack in #core-restapi by spacedmonkey. View the logs.


5 weeks ago

#7 @prbot
5 weeks ago

oandregal commented on PR #1808:

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

#8 @prbot
5 weeks ago

oandregal commented on PR #1808:

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.

#9 @prbot
4 weeks ago

oandregal commented on PR #1808:

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.

#10 @prbot
4 weeks ago

spacedmonkey commented on PR #1808:

Unit tests seem to be failing.

#11 @spacedmonkey
4 weeks ago

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.

#12 follow-up: @jorgefilipecosta
4 weeks ago

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.

#13 in reply to: ↑ 12 @kebbet
4 weeks ago

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 ().

#14 @swissspidy
4 weeks ago

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

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

This ticket was mentioned in PR #1831 on WordPress/wordpress-develop by oandregal.


4 weeks ago

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:

{{{json
{

"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:

{{{json
{

"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

<details><summary>Expand content</summary>
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;

}
</details>

Add the following styles to the theme.json:

{{{json
{

"version": 2,
"settings": { ... },
"styles": {

"color": {

"background": "black",
"text": "white"

}

}

}
}}}

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

<details><summary>Expand</summary>
{{{css
body {

background-color: black;
color: white;

}
}}}
</details>

#17 @jorgefilipecosta
4 weeks ago

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.

#18 @prbot
4 weeks ago

jorgefilipecosta commented on PR #1808:

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.

#20 @jorgefilipecosta
4 weeks ago

In 52050:

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

See #54336.
Props oandregal.

#21 @jorgefilipecosta
4 weeks ago

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.

#22 @jorgefilipecosta
4 weeks ago

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.

#23 @jorgefilipecosta
4 weeks ago

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.

#24 @spacedmonkey
4 weeks ago

@jorgefilipecosta You seemed to miss this comment.

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

#25 @TobiasBg
4 weeks ago

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.

#26 @spacedmonkey
4 weeks ago

I would also change

new WP_REST_Block_Renderer_Controller;

to

new WP_REST_Block_Renderer_Controller();

#27 @noisysocks
4 weeks ago

  • Owner set to jorgefilipecosta
  • Status changed from new to assigned

This ticket was mentioned in Slack in #core-editor by noisysocks. View the logs.


4 weeks ago

#29 @kebbet
4 weeks ago

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.

This ticket was mentioned in PR #1843 on WordPress/wordpress-develop by oandregal.


4 weeks ago

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:

{{{json
{

"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:

<details><summary>See full response</summary>

{{{json
{

"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)"

}

}

}

}

}
}}}

</details>

#31 @prbot
4 weeks ago

oandregal commented on PR #1832:

@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.

#32 @prbot
4 weeks ago

kebbet commented on PR #1832:

@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.

#34 @desrosj
4 weeks ago

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.

#35 @prbot
4 weeks ago

swissspidy commented on PR #1832:

@jorgefilipecosta FYI

#36 follow-up: @desrosj
4 weeks ago

In 52106:

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

Introduced in [52041], and [52069].

See #54336, #54337.

#37 in reply to: ↑ 36 @kebbet
4 weeks ago

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?

#38 @desrosj
4 weeks ago

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.

#39 @desrosj
4 weeks ago

In 52109:

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

Follow up to [52041].

See #54336.

#40 @desrosj
4 weeks ago

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.

#41 @desrosj
4 weeks ago

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"?

#42 @desrosj
4 weeks ago

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.

#43 @desrosj
4 weeks ago

@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!

Last edited 4 weeks ago by desrosj (previous) (diff)

#44 @desrosj
4 weeks ago

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.

#45 @prbot
4 weeks ago

desrosj commented on PR #1832:

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!

#46 @desrosj
4 weeks ago

In 52129:

Tests: Update qUnit test fixtures after [52128].

See #54336.

#47 @noisysocks
3 weeks ago

  • Keywords close added

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

#48 @desrosj
3 weeks ago

  • Keywords close removed

@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.

This ticket was mentioned in Slack in #core-restapi by spacedmonkey. View the logs.


13 days ago

#50 @antonvlasenko
12 days ago

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.

#51 @antonvlasenko
12 days ago

@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.

#52 @noisysocks
8 days ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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

#53 @audrasjb
6 days ago

In 52306:

Docs: Add missing @since tag to WP_Theme_JSON_Schema functions.

Follow-up to [52049].

See #53399, #54336.

#54 @SergeyBiryukov
4 days ago

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.

#55 @SergeyBiryukov
4 days ago

In 52321:

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

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

See #53399, #54336.

Note: See TracTickets for help on using tickets.