Skip to content

Commit

Permalink
Do not set the link color CSS Custom Property (#31755)
Browse files Browse the repository at this point in the history 
Unless it's set by the theme or the user, so themes without theme.json can introduce its own fallback mechanism.
  • Loading branch information
@nosolosw @youknowriad
nosolosw authored and youknowriad committed May 17, 2021
1 parent 64ab34f commit 85801e1
Show file tree
Hide file tree
Showing 6 changed files with 10 additions and 19 deletions.
2 changes: 1 addition & 1 deletion lib/class-wp-theme-json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -828,7 +828,7 @@ private function get_css_variables( $nodes ) {
* @return string The new stylesheet.
*/
private function get_block_styles( $style_nodes, $setting_nodes ) {
$block_rules = self::ELEMENTS['link'] . '{color: var(--wp--style--color--link);}';
$block_rules = self::ELEMENTS['link'] . '{color: var(--wp--style--color--link, #00e);}';
foreach ( $style_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
Expand Down
9 changes: 0 additions & 9 deletions lib/experimental-default-theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,14 +225,5 @@
}
}
}
},
"styles": {
"elements": {
"link": {
"color": {
"text": "#00E"
}
}
}
}
}
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/editor/global-styles-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ export const toStyles = ( tree, blockSelectors ) => {
const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );

let ruleset = `${ ELEMENTS.link }{color: var(--wp--style--color--link);}`;
let ruleset = `${ ELEMENTS.link }{color: var(--wp--style--color--link, #00e);}`;
nodesWithStyles.forEach( ( { selector, styles } ) => {
const declarations = getStylesDeclarations( styles );

Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/editor/test/global-styles-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ describe( 'global styles renderer', () => {
};

expect( toStyles( tree, blockSelectors ) ).toEqual(
'a{color: var(--wp--style--color--link);}body{background-color: red;}h1{font-size: 42px;}h1,h2,h3,h4,h5,h6{color: orange;}h1,h2,h3,h4,h5,h6{--wp--style--color--link: hotpink;}.has-white-color{color: white !important;}.has-white-background-color{background-color: white !important;}.has-white-border-color{border-color: white !important;}.has-black-color{color: black !important;}.has-black-background-color{background-color: black !important;}.has-black-border-color{border-color: black !important;}'
'a{color: var(--wp--style--color--link, #00e);}body{background-color: red;}h1{font-size: 42px;}h1,h2,h3,h4,h5,h6{color: orange;}h1,h2,h3,h4,h5,h6{--wp--style--color--link: hotpink;}.has-white-color{color: white !important;}.has-white-background-color{background-color: white !important;}.has-white-border-color{border-color: white !important;}.has-black-color{color: black !important;}.has-black-background-color{background-color: black !important;}.has-black-border-color{border-color: black !important;}'
);
} );
} );
Expand Down
4 changes: 2 additions & 2 deletions phpunit/class-wp-theme-json-schema-v0-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -461,11 +461,11 @@ function test_get_stylesheet() {
);

$this->assertEquals(
'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}a{color: var(--wp--style--color--link);}body{color: var(--wp--preset--color--grey);}body{--wp--style--color--link: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group {--wp--style--color--link: #333;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {--wp--style--color--link: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title {--wp--style--color--link: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title {--wp--style--color--link: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}a{color: var(--wp--style--color--link, #00e);}body{color: var(--wp--preset--color--grey);}body{--wp--style--color--link: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group {--wp--style--color--link: #333;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {--wp--style--color--link: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title {--wp--style--color--link: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title {--wp--style--color--link: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
'a{color: var(--wp--style--color--link);}body{color: var(--wp--preset--color--grey);}body{--wp--style--color--link: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group {--wp--style--color--link: #333;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {--wp--style--color--link: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title {--wp--style--color--link: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title {--wp--style--color--link: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
'a{color: var(--wp--style--color--link, #00e);}body{color: var(--wp--preset--color--grey);}body{--wp--style--color--link: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group {--wp--style--color--link: #333;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {--wp--style--color--link: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title {--wp--style--color--link: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title {--wp--style--color--link: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet( 'block_styles' )
);
$this->assertEquals(
Expand Down
10 changes: 5 additions & 5 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,11 +149,11 @@ function test_get_stylesheet() {
);

$this->assertEquals(
'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}a{color: var(--wp--style--color--link);}body{color: var(--wp--preset--color--grey);}a{background-color: #333;}body{--wp--style--color--link: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group {--wp--style--color--link: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;font-size: 60px;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {--wp--style--color--link: #111;}.wp-block-post-title{color: #123456;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}a{color: var(--wp--style--color--link, #00e);}body{color: var(--wp--preset--color--grey);}a{background-color: #333;}body{--wp--style--color--link: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group {--wp--style--color--link: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;font-size: 60px;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {--wp--style--color--link: #111;}.wp-block-post-title{color: #123456;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
'a{color: var(--wp--style--color--link);}body{color: var(--wp--preset--color--grey);}a{background-color: #333;}body{--wp--style--color--link: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group {--wp--style--color--link: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;font-size: 60px;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {--wp--style--color--link: #111;}.wp-block-post-title{color: #123456;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
'a{color: var(--wp--style--color--link, #00e);}body{color: var(--wp--preset--color--grey);}a{background-color: #333;}body{--wp--style--color--link: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group {--wp--style--color--link: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;font-size: 60px;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {--wp--style--color--link: #111;}.wp-block-post-title{color: #123456;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet( 'block_styles' )
);
$this->assertEquals(
Expand Down Expand Up @@ -193,11 +193,11 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() {
);

$this->assertEquals(
'.wp-block-group{--wp--preset--color--grey: grey;}a{color: var(--wp--style--color--link);}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}.wp-block-group.has-grey-border-color{border-color: grey !important;}',
'.wp-block-group{--wp--preset--color--grey: grey;}a{color: var(--wp--style--color--link, #00e);}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}.wp-block-group.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
'a{color: var(--wp--style--color--link);}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}.wp-block-group.has-grey-border-color{border-color: grey !important;}',
'a{color: var(--wp--style--color--link, #00e);}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}.wp-block-group.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet( 'block_styles' )
);
}
Expand Down Expand Up @@ -234,7 +234,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() {
);

$this->assertEquals(
'body{--wp--preset--color--grey: grey;}a{color: var(--wp--style--color--link);}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
'body{--wp--preset--color--grey: grey;}a{color: var(--wp--style--color--link, #00e);}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet()
);
}
Expand Down

0 comments on commit 85801e1

Please sign in to comment.