mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2025-10-16 12:05:38 +00:00
Editor: Backport block supports filter callback, registrations and tests to 6.1.
This changeset backports the following changes: - Implement [https://github.com/WordPress/gutenberg/pull/42880 gutenberg#42880]: Backport script loader: enqueue stored block supports styles - Allow a way to bypass `SCRIPT_DEBUG` in tests. See [https://github.com/WordPress/wordpress-develop/pull/3259#issuecomment-1250403735 comment] and the related [https://github.com/WordPress/gutenberg/pull/44248 Gutenberg pull request] Props ramonopoly, gziolo, bernhard-reiter, audrasjb, costdev. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54214 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jb Audras
parent
a647192d7c
commit
c7baffbbc3
@ -575,6 +575,10 @@ add_action( 'admin_head', 'wp_check_widget_editor_deps' );
|
||||
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' );
|
||||
|
||||
@ -2966,6 +2966,75 @@ function wp_enqueue_block_support_styles( $style, $priority = 10 ) {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches, processes and compiles stored core styles, then combines and renders them to the page.
|
||||
* Styles are stored via the style engine API.
|
||||
*
|
||||
* @link https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
|
||||
*
|
||||
* @since 6.1.0
|
||||
*
|
||||
* @param array $options {
|
||||
* Optional. An array of options to pass to wp_style_engine_get_stylesheet_from_context(). Default empty array.
|
||||
*
|
||||
* @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
|
||||
* @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
|
||||
* }
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
function wp_enqueue_stored_styles( $options = array() ) {
|
||||
$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';
|
||||
// Adds comment if code is prettified to identify core styles sections in debugging.
|
||||
$should_prettify = isset( $options['prettify'] ) ? true === $options['prettify'] : defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
|
||||
foreach ( $core_styles_keys as $style_key ) {
|
||||
if ( $should_prettify ) {
|
||||
$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, $options );
|
||||
}
|
||||
|
||||
// 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 );
|
||||
}
|
||||
|
||||
// Prints out any other stores registered by themes or otherwise.
|
||||
$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, $options );
|
||||
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.
|
||||
*
|
||||
|
||||
@ -54,6 +54,17 @@ class Tests_Theme_wpGetGlobalStylesheet extends WP_UnitTestCase {
|
||||
parent::tear_down();
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleans up global scope.
|
||||
*
|
||||
* @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;
|
||||
}
|
||||
@ -199,4 +210,64 @@ class Tests_Theme_wpGetGlobalStylesheet extends WP_UnitTestCase {
|
||||
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',
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
// Enqueues some other styles.
|
||||
wp_style_engine_get_stylesheet_from_css_rules(
|
||||
$my_styles_to_enqueue,
|
||||
array(
|
||||
'context' => 'my-styles',
|
||||
)
|
||||
);
|
||||
|
||||
wp_enqueue_stored_styles( array( 'prettify' => false ) );
|
||||
|
||||
$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->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.'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user