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

Make global styles available to all themes #34334

Merged
merged 2 commits into from
Sep 2, 2021
Merged

Make global styles available to all themes #34334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7a1387
Make global styles available to all themes
oandregal Aug 26, 2021
a59775a
Do not enqueue block styles if theme does not have theme.json
oandregal Aug 26, 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
65 changes: 40 additions & 25 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 @@ -799,8 +799,33 @@ private function get_css_variables( $nodes ) {
* style-property-one: value;
* }
*
* Additionally, it'll also create new rulesets
* as classes for each preset value such as:
* @param array $style_nodes Nodes with styles.
*
* @return string The new stylesheet.
*/
private function get_block_classes( $style_nodes ) {
$block_rules = '';

foreach ( $style_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
}

$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$selector = $metadata['selector'];
$declarations = self::compute_style_properties( $node );
$block_rules .= self::to_ruleset( $selector, $declarations );

if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
}
}

return $block_rules;
}

/**
* Creates new rulesets as classes for each preset value such as:
*
* .has-value-color {
* color: value;
Expand All @@ -821,30 +846,14 @@ private function get_css_variables( $nodes ) {
* p.has-value-gradient-background {
* background: value;
* }
*
* @param array $style_nodes Nodes with styles.

* @param array $setting_nodes Nodes with settings.
*
* @return string The new stylesheet.
*/
private function get_block_styles( $style_nodes, $setting_nodes ) {
$block_rules = '';
foreach ( $style_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
}

$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$selector = $metadata['selector'];
$declarations = self::compute_style_properties( $node );
$block_rules .= self::to_ruleset( $selector, $declarations );

if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
}
}

private function get_preset_classes( $setting_nodes ) {
$preset_rules = '';

foreach ( $setting_nodes as $metadata ) {
if ( null === $metadata['selector'] ) {
continue;
Expand All @@ -855,7 +864,7 @@ private function get_block_styles( $style_nodes, $setting_nodes ) {
$preset_rules .= self::compute_preset_classes( $node, $selector );
}

return $block_rules . $preset_rules;
return $preset_rules;
}

/**
Expand Down Expand Up @@ -1053,7 +1062,11 @@ 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 we want accepts 'all', 'block_styles', and 'css_variables'.
* @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.
* @return string Stylesheet.
*/
public function get_stylesheet( $type = 'all' ) {
Expand All @@ -1063,11 +1076,13 @@ public function get_stylesheet( $type = 'all' ) {

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

Expand Down
11 changes: 9 additions & 2 deletions lib/class-wp-theme-json-resolver-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,10 +407,17 @@ public static function get_user_data() {
* @return WP_Theme_JSON_Gutenberg
*/
public static function get_merged_data( $settings = array(), $origin = 'user' ) {
$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( $settings );

$result = new WP_Theme_JSON_Gutenberg();
$result->merge( self::get_core_data() );

if (
! get_theme_support( 'experimental-link-color' ) && // link color support needs the presets CSS variables regardless of the presence of theme.json file.
! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support()
) {
return $result;
}

$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( $settings );
$result->merge( self::get_theme_data( $theme_support_data ) );

if ( 'user' === $origin ) {
Expand Down
14 changes: 6 additions & 8 deletions lib/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* the corresponding stylesheet.
*
* @param WP_Theme_JSON_Gutenberg $tree Input tree.
* @param string $type Type of stylesheet we want accepts 'all', 'block_styles', and 'css_variables'.
* @param string $type Type of stylesheet we want accepts 'all', 'block_styles', 'css_variables', and 'presets'.
*
* @return string Stylesheet.
*/
Expand Down Expand Up @@ -48,16 +48,14 @@ function gutenberg_experimental_global_styles_get_stylesheet( $tree, $type = 'al
* and enqueues the resulting stylesheet.
*/
function gutenberg_experimental_global_styles_enqueue_assets() {
if (
! get_theme_support( 'experimental-link-color' ) && // link color support needs the presets CSS variables regardless of the presence of theme.json file.
! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
return;
}

$settings = gutenberg_get_default_block_editor_settings();
$all = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $settings );

$stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $all );
$type = 'all';
if ( ! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
$type = 'presets';
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't this $type check be part of gutenberg_experimental_global_styles_get_stylesheet directly? Meaning if there's no theme.json just pint the presets otherwise print everything?

Copy link
Contributor

@youknowriad youknowriad Sep 2, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Could be inside this function that way it works consistently regardless of the caller.

gutenberg/lib/class-wp-theme-json-gutenberg.php

Line 1072 in a59775a

public function get_stylesheet( $type = 'all' ) {

Copy link
Member Author

Choose a reason for hiding this comment

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

🤔 not sure how to do it. There're other calls below where, in the same code path, where want to build two different stylesheets (pseudocode):

$block_styles  = gutenberg_experimental_global_styles_get_stylesheet( $tree, 'block_styles' );
$css_variables = gutenberg_experimental_global_styles_get_stylesheet( $tree 'css_variables' );

Copy link
Contributor

Choose a reason for hiding this comment

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

As I understand it, themes without theme.json shouldn't return just the "presets" like always. It shouldn't be the responsibility of the caller to switch the "type" depending on the theme, the caller just asks for the stylesheet and returning the right styles should be internal logic.

$stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $all, $type );
if ( empty( $stylesheet ) ) {
return;
}
Expand Down