Skip to content

Fix for classic themes using default presets #2233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
oandregal wants to merge 18 commits into from
Closed

Fix for classic themes using default presets #2233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
963b582
Always take into account theme data for generating the CSS Custom Pro…
oandregal Jan 27, 2022
51da14d
Add comment
oandregal Jan 27, 2022
b885713
Fix lint issues
oandregal Feb 2, 2022
9d9bb5f
Only output the variables once
oandregal Feb 2, 2022
0123099
Better formatting
oandregal Feb 2, 2022
35684b2
Add tests
oandregal Feb 2, 2022
81f893c
Use themes as group
oandregal Feb 2, 2022
8b763d7
Fix lint issues for globalStylesheet.php
oandregal Feb 3, 2022
48a7b79
Add classic with presets theme to the list of themes
oandregal Feb 3, 2022
147ff5f
Switch to default theme after tests
oandregal Feb 3, 2022
7d245b9
More fine-grained tests with good info
oandregal Feb 3, 2022
9cde490
Fix lint issues
oandregal Feb 3, 2022
11990b6
Update tests for classic-with-presets
oandregal Feb 3, 2022
93f9d41
Use single instead of double quotes
oandregal Feb 3, 2022
8647bf4
Set up theme dir
oandregal Feb 3, 2022
160070e
Update classname to follow other files in the same dir
oandregal Feb 3, 2022
a78a74e
Add theme support dynamically to default theme instead of creating a …
oandregal Feb 3, 2022
91e4a2f
Fix linting issues
oandregal Feb 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions src/wp-includes/global-styles-and-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,26 +103,40 @@ function wp_get_global_stylesheet( $types = array() ) {
}
}

$tree = WP_Theme_JSON_Resolver::get_merged_data();

$supports_theme_json = WP_Theme_JSON_Resolver::theme_has_support();
$supports_link_color = get_theme_support( 'experimental-link-color' );
if ( empty( $types ) && ! $supports_theme_json ) {
$types = array( 'variables', 'presets' );
} elseif ( empty( $types ) ) {
$types = array( 'variables', 'styles', 'presets' );
}

$origins = array( 'default', 'theme', 'custom' );
if ( ! $supports_theme_json && ! $supports_link_color ) {
// In this case we only enqueue the core presets (CSS Custom Properties + the classes).
$origins = array( 'default' );
} elseif ( ! $supports_theme_json && $supports_link_color ) {
// For the legacy link color feature to work, the CSS Custom Properties
// should be in scope (either the core or the theme ones).
$origins = array( 'default', 'theme' );
// If variables are part of the stylesheet,
// we add them for all origins (default, theme, user).
// This is so themes without a theme.json still work as before 5.9:
// they can override the default presets.
// See https://core.trac.wordpress.org/ticket/54782
$styles_variables = '';
if ( in_array( 'variables', $types ) ) {
$styles_variables = $tree->get_stylesheet( array( 'variables' ) );
$types = array_diff( $types, array( 'variables' ) );
}

// For the remaining types (presets, styles), we do consider origins:
//
// - themes without theme.json: only the classes for the presets defined by core
// - themes with theme.json: the presets and styles classes, both from core and the theme
$styles_rest = '';
if ( ! empty( $types ) ) {
$origins = array( 'default', 'theme', 'custom' );
if ( ! $supports_theme_json ) {
$origins = array( 'default' );
}
$styles_rest = $tree->get_stylesheet( $types, $origins );
}

$tree = WP_Theme_JSON_Resolver::get_merged_data();
$stylesheet = $tree->get_stylesheet( $types, $origins );
$stylesheet = $styles_variables . $styles_rest;

if ( $can_use_cached ) {
// Cache for a minute.
Expand Down
186 changes: 186 additions & 0 deletions tests/phpunit/tests/theme/globalStylesheet.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<?php

/**
* @group themes
*/
class Tests_Theme_GlobalStylesheet extends WP_UnitTestCase {

public function set_up() {
parent::set_up();

$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
$this->theme_root = realpath( DIR_TESTDATA . '/themedir1' );

// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );

// Set up the new root.
add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );

// Clear caches.
wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
}

public function tear_down() {
$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;

// Clear up the filters to modify the theme root.
remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );

wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );

parent::tear_down();
}

public function filter_set_theme_root() {
return $this->theme_root;
}

public function test_block_theme_using_variables() {
switch_theme( 'block-theme' );

$styles = wp_get_global_stylesheet( array( 'variables' ) );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--small: 13px' ), 'small font size is 13px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is 20px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--large: 36px' ), 'large font size is 36px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'x-large font size is 42px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--custom: 100px;' ), 'custom font size is 100px' );

switch_theme( WP_DEFAULT_THEME );
}

public function test_block_theme_using_presets() {
switch_theme( 'block-theme' );

$styles = wp_get_global_stylesheet( array( 'presets' ) );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--small: 13px' ), 'small font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--large: 36px' ), 'large font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'x-large font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--custom: 100px;' ), 'custom font size is not present' );

switch_theme( WP_DEFAULT_THEME );
}

public function test_block_theme_using_defaults() {
switch_theme( 'block-theme' );

$styles = wp_get_global_stylesheet();
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--small: 13px' ), 'small font size is 13px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is 20px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--large: 36px' ), 'large font size is 36px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'x-large font size is 42px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--custom: 100px;' ), 'custom font size is 100px' );

switch_theme( WP_DEFAULT_THEME );
}

public function test_variables_in_classic_theme_with_no_presets_using_variables() {
$styles = wp_get_global_stylesheet( array( 'variables' ) );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--small: 13px' ), 'small font size is 13px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is 20px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--large: 36px' ), 'large font size is 36px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'x-large font size is 42px' );
}

public function test_variables_in_classic_theme_with_no_presets_using_presets() {
$styles = wp_get_global_stylesheet( array( 'presets' ) );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--small: 13px' ), 'small font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--large: 36px' ), 'large font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'x-large font size is not present' );
}

public function test_variables_in_classic_theme_with_no_presets_using_defaults() {
$styles = wp_get_global_stylesheet();
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--small: 13px' ), 'small font size is 13px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is 20px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--large: 36px' ), 'large font size is 36px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'x-large font size is 42px' );
}

public function test_variables_in_classic_theme_with_presets_using_variables() {
add_theme_support(
'editor-font-sizes',
array(
array(
'name' => 'Small',
'size' => 18,
'slug' => 'small',
),
array(
'name' => 'Large',
'size' => 26.25,
'slug' => 'large',
),
)
);

$styles = wp_get_global_stylesheet( array( 'variables' ) );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--small: 18px' ), 'small font size is 18px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is 20px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--large: 26.25px' ), 'large font size is 26.25px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'x-large font size is 42px' );

remove_theme_support( 'editor-font-sizes' );
}

public function test_variables_in_classic_theme_with_presets_using_presets() {
add_theme_support(
'editor-font-sizes',
array(
array(
'name' => 'Small',
'size' => 18,
'slug' => 'small',
),
array(
'name' => 'Large',
'size' => 26.25,
'slug' => 'large',
),
)
);

$styles = wp_get_global_stylesheet( array( 'presets' ) );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--small: 18px' ), 'small font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--large: 26.25px' ), 'large font size is not present' );
$this->assertFalse( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'x-large font size is not present' );

remove_theme_support( 'editor-font-sizes' );
}

public function test_variables_in_classic_theme_with_presets_using_defaults() {
add_theme_support(
'editor-font-sizes',
array(
array(
'name' => 'Small',
'size' => 18,
'slug' => 'small',
),
array(
'name' => 'Large',
'size' => 26.25,
'slug' => 'large',
),
)
);

$styles = wp_get_global_stylesheet();
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--small: 18px' ), 'small font size is 18px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--medium: 20px' ), 'medium font size is 20px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--large: 26.25px' ), 'large font size is 26.25px' );
$this->assertTrue( str_contains( $styles, '--wp--preset--font-size--x-large: 42px' ), 'small font size is 42px' );

remove_theme_support( 'editor-font-sizes' );
}

}