Skip to content
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

Editor defaults for themes with no editor styles and when user disables theme styles #35736

Merged
merged 11 commits into from
Oct 22, 2021
Merged

Editor defaults for themes with no editor styles and when user disables theme styles #35736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5a93d6f
Load defaults when theme styles are disabled.
oandregal Oct 18, 2021
c5f0f6e
Extract core styles to own stylesheet
oandregal Oct 21, 2021
bb78d1c
Fix typo
oandregal Oct 21, 2021
31a1d30
Load spacing styles for themes with theme.json support
oandregal Oct 21, 2021
e04e32f
Add comment and fix lint errors
oandregal Oct 21, 2021
12f8bcb
Tests: pass array as $types
oandregal Oct 21, 2021
cff8437
Test: update phpunit/class-wp-theme-json-schema-v0-test.php
oandregal Oct 21, 2021
73001a6
Test: update phpunit/class-wp-theme-json-test.php
oandregal Oct 21, 2021
f5c68ed
Improve code
oandregal Oct 21, 2021
e39441a
Restore spacing styles and check for theme.json support instead
oandregal Oct 22, 2021
c73e850
Udpate names of types
oandregal Oct 22, 2021
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: 20 additions & 16 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1261,30 +1261,34 @@ private static function get_setting_nodes( $theme_json, $selectors = array() ) {
* Returns the stylesheet that results of processing
* the theme.json structure this object represents.
*
* @param string $type Type of stylesheet. It accepts:
* 'all': css variables, block classes, preset classes. The default.
* 'block_styles': only block & preset classes.
* 'css_variables': only css variables.
* 'presets': only css variables and preset classes.
* @param array $origins A list of origins to include. By default it includes 'core', 'theme', and 'user'.
* @param array $types Types of styles to load. Will load all by default. It accepts:
* 'variables': only the CSS Custom Properties for presets & custom ones.
* 'styles': only the styles section in theme.json.
* 'presets': only the classes for the presets.
* @param array $origins A list of origins to include. By default it includes 'core', 'theme', and 'user'.
*
* @return string Stylesheet.
*/
public function get_stylesheet( $type = 'all', $origins = self::VALID_ORIGINS ) {
public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = self::VALID_ORIGINS ) {
$blocks_metadata = self::get_blocks_metadata();
$style_nodes = self::get_style_nodes( $this->theme_json, $blocks_metadata );
$setting_nodes = self::get_setting_nodes( $this->theme_json, $blocks_metadata );

switch ( $type ) {
case 'block_styles':
return $this->get_block_classes( $style_nodes ) . $this->get_preset_classes( $setting_nodes, $origins );
case 'css_variables':
return $this->get_css_variables( $setting_nodes, $origins );
case 'presets':
return $this->get_css_variables( $setting_nodes, $origins ) . $this->get_preset_classes( $setting_nodes, $origins );
default:
return $this->get_css_variables( $setting_nodes, $origins ) . $this->get_block_classes( $style_nodes ) . $this->get_preset_classes( $setting_nodes, $origins );
$stylesheet = '';

if ( in_array( 'variables', $types, true ) ) {
$stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
}

if ( in_array( 'styles', $types, true ) ) {
$stylesheet .= $this->get_block_classes( $style_nodes );
}

if ( in_array( 'presets', $types, true ) ) {
$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
}

return $stylesheet;
}

/**
Expand Down
22 changes: 11 additions & 11 deletions lib/compat/wordpress-5.9/get-global-styles-and-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,18 +68,18 @@ function gutenberg_get_global_styles( $path = array(), $block_name = '', $origin
/**
* Returns the stylesheet resulting of merging core, theme, and user data.
*
* @param string $type Type of the stylesheet. Optional.
* It accepts 'all', 'block_styles', 'css_variables', 'presets'.
* If empty, it'll resolve to all (theme with theme.json support)
* or 'presets' (theme without theme.json support).
* @param array $types Types of styles to load. Optional.
* It accepts 'variables', 'styles', 'presets' as values.
* If empty, it'll load all for themes with theme.json support
* and only [ 'variables', 'presets' ] for themes without theme.json support.
*
* @return string Stylesheet.
*/
function gutenberg_get_global_stylesheet( $type = '' ) {
function gutenberg_get_global_stylesheet( $types = array() ) {
// Return cached value if it can be used and exists.
// It's cached by theme to make sure that theme switching clears the cache.
$can_use_cached = (
( 'all' === $type ) &&
( empty( $types ) ) &&
( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
Expand All @@ -95,10 +95,10 @@ function gutenberg_get_global_stylesheet( $type = '' ) {

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

$origins = array( 'core', 'theme', 'user' );
Expand All @@ -113,7 +113,7 @@ function gutenberg_get_global_stylesheet( $type = '' ) {

$theme_supports = gutenberg_get_default_block_editor_settings();
$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $theme_supports );
$stylesheet = $tree->get_stylesheet( $type, $origins );
$stylesheet = $tree->get_stylesheet( $types, $origins );

if ( $can_use_cached ) {
// Cache for a minute.
Expand Down
87 changes: 38 additions & 49 deletions lib/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,43 +9,15 @@
* Takes a tree adhering to the theme.json schema and generates
* the corresponding stylesheet.
*
* @param WP_Theme_JSON_Gutenberg $tree Input tree.
* @param string $type Type of stylesheet. It accepts 'all', 'block_styles', 'css_variables', 'presets'.
* @param WP_Theme_JSON_Gutenberg $tree Input tree.
* @param array $types Which styles to load. It accepts 'variables', 'styles', 'presets'. By default, it'll load all.
*
* @return string Stylesheet.
*/
function gutenberg_experimental_global_styles_get_stylesheet( $tree, $type = null ) {
// Check if we can use cached.
$can_use_cached = (
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The cache in this method is dead code, it's never used, so we can remove it.

( 'all' === $type ) &&
( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
! is_admin()
);

$transient_name = 'gutenberg_global_styles_' . get_stylesheet();
if ( $can_use_cached ) {
// Check if we have the styles already cached.
// It's cached by theme to make sure that theme switching
// is inmediately reflected.
$cached = get_transient( $transient_name );
if ( $cached ) {
return $cached;
}
}

function gutenberg_experimental_global_styles_get_stylesheet( $tree, $types = array( 'variables', 'styles', 'presets' ) ) {
$origins = array( 'core', 'theme', 'user' );
$supports_theme_json = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support();
$supports_link_color = get_theme_support( 'experimental-link-color' );

// Only modify the $type if the consumer hasn't provided any.
if ( null === $type && ! $supports_theme_json ) {
$type = 'presets';
} elseif ( null === $type ) {
$type = 'all';
}

$origins = array( 'core', 'theme', 'user' );
if ( ! $supports_theme_json && ! $supports_link_color ) {
// In this case we only enqueue the core presets (CSS Custom Properties + the classes).
$origins = array( 'core' );
Expand All @@ -55,13 +27,7 @@ function gutenberg_experimental_global_styles_get_stylesheet( $tree, $type = nul
$origins = array( 'core', 'theme' );
}

$stylesheet = $tree->get_stylesheet( $type, $origins );

if ( $can_use_cached ) {
// Cache for a minute.
// This cache doesn't need to be any longer, we only want to avoid spikes on high-traffic sites.
set_transient( $transient_name, $stylesheet, MINUTE_IN_SECONDS );
}
$stylesheet = $tree->get_stylesheet( $types, $origins );

return $stylesheet;
}
Expand Down Expand Up @@ -128,12 +94,6 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
}

if ( 'other' === $context ) {
$block_styles = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet( $consolidated, 'block_styles' ) );
$css_variables = array(
'css' => gutenberg_experimental_global_styles_get_stylesheet( $consolidated, 'css_variables' ),
'__experimentalNoWrapper' => true,
);

// Make sure the styles array exists.
// In some contexts, like the navigation editor, it doesn't.
if ( ! isset( $settings['styles'] ) ) {
Expand All @@ -148,10 +108,39 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
}
}

// Add the new ones.
$styles_without_existing_global_styles[] = $css_variables;
$styles_without_existing_global_styles[] = $block_styles;
$settings['styles'] = $styles_without_existing_global_styles;
$new_global_styles = array();
$new_presets = array(
array(
'css' => 'variables',
'__unstableType' => 'presets',
'__experimentalNoWrapper' => true,
),
array(
'css' => 'presets',
'__unstableType' => 'presets',
),
);
foreach ( $new_presets as $new_style ) {
$style_css = gutenberg_experimental_global_styles_get_stylesheet( $consolidated, array( $new_style['css'] ) );
if ( '' !== $style_css ) {
$new_style['css'] = $style_css;
$new_global_styles[] = $new_style;
}
}

$new_block_classes = array(
'css' => 'styles',
'__unstableType' => 'theme',
);
if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
$style_css = gutenberg_experimental_global_styles_get_stylesheet( $consolidated, array( $new_block_classes['css'] ) );
if ( '' !== $style_css ) {
$new_block_classes['css'] = $style_css;
$new_global_styles[] = $new_block_classes;
}
}

$settings['styles'] = array_merge( $styles_without_existing_global_styles, $new_global_styles );
}

// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
Expand Down
17 changes: 15 additions & 2 deletions packages/edit-post/src/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,22 @@ function Editor( {
] );

const styles = useMemo( () => {
return hasThemeStyles && settings.styles?.length
const themeStyles = [];
const presetStyles = [];
settings.styles.forEach( ( style ) => {
if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
themeStyles.push( style );
} else {
presetStyles.push( style );
}
} );
const defaultEditorStyles = [
oandregal marked this conversation as resolved.
Show resolved Hide resolved
...settings.defaultEditorStyles,
...presetStyles,
];
return hasThemeStyles && themeStyles.length
? settings.styles
: settings.defaultEditorStyles;
: defaultEditorStyles;
}, [ settings, hasThemeStyles ] );

if ( ! post ) {
Expand Down
4 changes: 2 additions & 2 deletions phpunit/class-wp-theme-json-schema-v0-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,11 +476,11 @@ function test_get_stylesheet() {
);
$this->assertEquals(
'body{color: var(--wp--preset--color--grey);}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; }a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}',
$theme_json->get_stylesheet( 'block_styles' )
$theme_json->get_stylesheet( array( 'styles', 'presets' ) )
);
$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;}',
$theme_json->get_stylesheet( 'css_variables' )
$theme_json->get_stylesheet( array( 'variables' ) )
);
}

Expand Down
18 changes: 9 additions & 9 deletions phpunit/class-wp-theme-json-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() {
);
$this->assertEquals(
'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; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}',
$theme_json->get_stylesheet( 'block_styles' )
$theme_json->get_stylesheet( array( 'styles', 'presets' ) )
);
}

Expand Down Expand Up @@ -260,7 +260,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() {

$expected = '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; }';
$this->assertEquals( $expected, $theme_json->get_stylesheet() );
$this->assertEquals( $expected, $theme_json->get_stylesheet( 'block_styles' ) );
$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets' ) ) );
}

function test_get_stylesheet_renders_enabled_protected_properties() {
Expand Down Expand Up @@ -289,7 +289,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() {

$expected = 'body{--wp--style--block-gap: 1em;}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; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }.wp-block-columns{--wp--style--block-gap: 24px;}';
$this->assertEquals( $expected, $theme_json->get_stylesheet() );
$this->assertEquals( $expected, $theme_json->get_stylesheet( 'block_styles' ) );
$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets' ) ) );
}

function test_get_stylesheet() {
Expand Down Expand Up @@ -418,11 +418,11 @@ function test_get_stylesheet() {
);
$this->assertEquals(
'body{color: var(--wp--preset--color--grey);}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; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}',
$theme_json->get_stylesheet( 'block_styles' )
$theme_json->get_stylesheet( array( 'styles', 'presets' ) )
);
$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;}',
$theme_json->get_stylesheet( 'css_variables' )
$theme_json->get_stylesheet( array( 'variables' ) )
);
}

Expand All @@ -449,7 +449,7 @@ function test_get_stylesheet_preset_classes_work_with_compounded_selectors() {

$this->assertEquals(
'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: var(--wp--preset--color--white) !important;}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}h1.has-white-border-color,h2.has-white-border-color,h3.has-white-border-color,h4.has-white-border-color,h5.has-white-border-color,h6.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}',
$theme_json->get_stylesheet( 'block_styles' )
$theme_json->get_stylesheet( array( 'styles', 'presets' ) )
);
}

Expand Down Expand Up @@ -489,7 +489,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() {
);
$this->assertEquals(
'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; }.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
$theme_json->get_stylesheet( 'block_styles' )
$theme_json->get_stylesheet( array( 'styles', 'presets' ) )
);
}

Expand Down Expand Up @@ -524,11 +524,11 @@ function test_get_stylesheet_generates_proper_classes_from_slugs() {

$this->assertEquals(
'.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-dark-grey-color{color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-color{color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-color{color: var(--wp--preset--color--white-2-black) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-background-color{background-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-background-color{background-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-background-color{background-color: var(--wp--preset--color--white-2-black) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-border-color{border-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-border-color{border-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-border-color{border-color: var(--wp--preset--color--white-2-black) !important;}',
$theme_json->get_stylesheet( 'block_styles' )
$theme_json->get_stylesheet( array( 'styles', 'presets' ) )
);
$this->assertEquals(
'body{--wp--preset--color--grey: grey;--wp--preset--color--dark-grey: grey;--wp--preset--color--light-grey: grey;--wp--preset--color--white-2-black: grey;}',
$theme_json->get_stylesheet( 'css_variables' )
$theme_json->get_stylesheet( array( 'variables' ) )
);

}
Expand Down