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

Backport script loader: enqueue stored block supports styles (refresh) #3259

Closed
wants to merge 6 commits into from
Closed

Backport script loader: enqueue stored block supports styles (refresh) #3259

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
db90f69
Initial commit.
ramonjd Sep 9, 2022
8d10a6e
Added test
ramonjd Sep 9, 2022
311df00
Remove unused global from test
ramonjd Sep 9, 2022
3c3a710
Formatting
ramonjd Sep 9, 2022
23a38f8
Move test
ockham Sep 15, 2022
ca40bbb
Remove obsolete PHPDoc
ockham Sep 15, 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
4 changes: 4 additions & 0 deletions src/wp-includes/default-filters.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -575,6 +575,10 @@
add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
add_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );

// Block supports, and other styles parsed and stored in the Style Engine.
add_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' );
add_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );

// SVG filters like duotone have to be loaded at the beginning of the body in both admin and the front-end.
add_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
add_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
Expand Down
58 changes: 58 additions & 0 deletions src/wp-includes/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2959,6 +2959,64 @@ static function () use ( $style ) {
);
}

/**
* Fetches, processes and compiles stored core styles, then combines and renders them to the page.
* Styles are stored via the Style Engine API.
* See: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
*
* @since 6.1.0
*/
function wp_enqueue_stored_styles() {
$is_block_theme = wp_is_block_theme();
$is_classic_theme = ! $is_block_theme;

/*
* For block themes, this function prints stored styles in the header.
* For classic themes, in the footer.
*/
if (
( $is_block_theme && doing_action( 'wp_footer' ) ) ||
( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) )
) {
return;
}

$core_styles_keys = array( 'block-supports' );
$compiled_core_stylesheet = '';
$style_tag_id = 'core';
foreach ( $core_styles_keys as $style_key ) {
// Adds comment to identify core styles sections in debugging.
if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
$compiled_core_stylesheet .= "/**\n * Core styles: $style_key\n */\n";
}
// Chains core store ids to signify what the styles contain.
$style_tag_id .= '-' . $style_key;
$compiled_core_stylesheet .= wp_style_engine_get_stylesheet_from_context( $style_key );
}

// Combines Core styles.
if ( ! empty( $compiled_core_stylesheet ) ) {
wp_register_style( $style_tag_id, false, array(), true, true );
wp_add_inline_style( $style_tag_id, $compiled_core_stylesheet );
wp_enqueue_style( $style_tag_id );
}

// If there are any other stores registered by themes etc, print them out.
$additional_stores = WP_Style_Engine_CSS_Rules_Store::get_stores();
foreach ( array_keys( $additional_stores ) as $store_name ) {
if ( in_array( $store_name, $core_styles_keys, true ) ) {
continue;
}
$styles = wp_style_engine_get_stylesheet_from_context( $store_name );
if ( ! empty( $styles ) ) {
$key = "wp-style-engine-$store_name";
wp_register_style( $key, false, array(), true, true );
wp_add_inline_style( $key, $styles );
wp_enqueue_style( $key );
}
}
}

/**
* Enqueues a stylesheet for a specific block.
*
Expand Down
72 changes: 72 additions & 0 deletions tests/phpunit/tests/theme/wpGetGlobalStylesheet.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,18 @@ public function tear_down() {
parent::tear_down();
}

/**
* Cleans up global scope.
*
* @global WP_Scripts $wp_scripts
gziolo marked this conversation as resolved.
Show resolved Hide resolved
* @global WP_Styles $wp_styles
*/
public function clean_up_global_scope() {
global $wp_styles;
parent::clean_up_global_scope();
$wp_styles = null;
}

public function filter_set_theme_root() {
return $this->theme_root;
}
Expand Down Expand Up @@ -199,4 +211,64 @@ public function test_variables_in_classic_theme_with_presets_using_defaults() {
remove_theme_support( 'editor-font-sizes' );
}

/**
* Tests that stored CSS is enqueued.
*
* @ticket 56467
*
* @covers ::wp_enqueue_stored_styles
*/
public function test_should_enqueue_stored_styles() {
$core_styles_to_enqueue = array(
array(
'selector' => '.saruman',
'declarations' => array(
'color' => 'white',
'height' => '100px',
'border-style' => 'solid',
),
),
);

// Enqueues a block supports (core styles).
wp_style_engine_get_stylesheet_from_css_rules(
$core_styles_to_enqueue,
array(
'context' => 'block-supports',
)
);

$my_styles_to_enqueue = array(
array(
'selector' => '.gandalf',
'declarations' => array(
'color' => 'grey',
'height' => '90px',
'border-style' => 'dotted',
),
),
);

// Enqueue some other styles.
Copy link
Member

Choose a reason for hiding this comment

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

I forgot to change this verb tense from imperative to third person present

Suggested change
// Enqueue some other styles.
// Enqueues some other styles.

wp_style_engine_get_stylesheet_from_css_rules(
$my_styles_to_enqueue,
array(
'context' => 'my-styles',
)
);

wp_enqueue_stored_styles();

$this->assertEquals(
Copy link
Member

Choose a reason for hiding this comment

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

This is a hangover from my original PR.

I think it's better to use assertSame here for string comparisons and assertEquals for objects etc

Suggested change
$this->assertEquals(
$this->assertSame(

array( '.saruman{color:white;height:100px;border-style:solid;}' ),
wp_styles()->registered['core-block-supports']->extra['after'],
'Registered styles with handle of "core-block-supports" do not match expected value from Style Engine store.'
);

$this->assertEquals(
Copy link
Member

Choose a reason for hiding this comment

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

As above.

Suggested change
$this->assertEquals(
$this->assertSame(

array( '.gandalf{color:grey;height:90px;border-style:dotted;}' ),
wp_styles()->registered['wp-style-engine-my-styles']->extra['after'],
'Registered styles with handle of "wp-style-engine-my-styles" do not match expected value from the Style Engine store.'
);
}
}