Skip to content

Commit

Permalink
Make global styles available to all themes (#34334)
Browse files Browse the repository at this point in the history 
They just differ on what data they have:

1. Without theme.json and no experimental-link-color support either:
   the stylesheet contains the core presets & styles.

2. Without theme.json but experimental-link-color support:
   the stylesheet contains the core and theme presets,
   plus the core styles if any.

3. With theme.json:
   the stylesheet contains the core and theme presets,
   plus the result of merging core & theme styles.
  • Loading branch information
@oandregal
oandregal authored Sep 2, 2021
1 parent 0e5d2a1 commit 482650a
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 35 deletions.
65 changes: 40 additions & 25 deletions lib/class-wp-theme-json-gutenberg.php
View file
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
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
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';
}
$stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $all, $type );
if ( empty( $stylesheet ) ) {
return;
}
Expand Down

0 comments on commit 482650a

Please sign in to comment.