diff --git a/backport-changelog/6.7/6750.md b/backport-changelog/6.7/6750.md new file mode 100644 index 00000000000000..257ebe3a5aa698 --- /dev/null +++ b/backport-changelog/6.7/6750.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6750 + +* https://github.com/WordPress/gutenberg/pull/62357 \ No newline at end of file diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php index 53668e114e04cb..defd7cd391b16b 100644 --- a/lib/block-editor-settings.php +++ b/lib/block-editor-settings.php @@ -58,7 +58,7 @@ function gutenberg_get_block_editor_settings( $settings ) { * entered by users does not break other global styles. */ $global_styles[] = array( - 'css' => gutenberg_get_global_styles_custom_css(), + 'css' => gutenberg_get_global_stylesheet( array( 'custom-css' ) ), '__unstableType' => 'user', 'isGlobalStyles' => true, ); diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index a1e79a56a683bf..b00767dbf9abdb 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1355,6 +1355,12 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins ); } + // Load the custom CSS last so it has the highest specificity. + if ( in_array( 'custom-css', $types, true ) ) { + // Add the global styles root CSS. + $stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); + } + return $stylesheet; } @@ -1399,10 +1405,12 @@ protected function process_blocks_custom_css( $css, $selector ) { * Returns the global styles custom css. * * @since 6.2.0 + * @deprecated 6.7.0 Use {@see 'get_stylesheet'} instead. * * @return string The global styles custom CSS. */ public function get_custom_css() { + _deprecated_function( __METHOD__, '6.7.0', 'get_stylesheet' ); $block_custom_css = ''; $block_nodes = $this->get_block_custom_css_nodes(); foreach ( $block_nodes as $node ) { @@ -1415,23 +1423,23 @@ public function get_custom_css() { /** * Returns the global styles base custom CSS. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @return string The global styles base custom CSS. */ public function get_base_custom_css() { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_stylesheet' ); return isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : ''; } /** * Returns the block nodes with custom CSS. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @return array The block nodes. */ public function get_block_custom_css_nodes() { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_block_nodes' ); $block_nodes = array(); // Add the global styles block CSS. @@ -1455,8 +1463,7 @@ public function get_block_custom_css_nodes() { /** * Returns the global styles custom CSS for a single block. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @param array $css The block css node. * @param string $selector The block selector. @@ -1464,6 +1471,7 @@ public function get_block_custom_css_nodes() { * @return string The global styles custom CSS for the block. */ public function get_block_custom_css( $css, $selector ) { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_styles_for_block' ); return $this->process_blocks_custom_css( $css, $selector ); } @@ -2646,6 +2654,7 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { 'selectors' => $feature_selectors, 'duotone' => $duotone_selector, 'variations' => $variation_selectors, + 'css' => $selector, ); if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) { @@ -2855,6 +2864,11 @@ static function ( $pseudo_selector ) use ( $selector ) { $block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations ); } + // 7. Generate and append any custom CSS rules. + if ( isset( $node['css'] ) && ! $is_root_selector ) { + $block_rules .= $this->process_blocks_custom_css( $node['css'], $selector ); + } + return $block_rules; } diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php index 4ceade6c7125b1..79c7028e32543e 100644 --- a/lib/global-styles-and-settings.php +++ b/lib/global-styles-and-settings.php @@ -144,6 +144,7 @@ function gutenberg_get_global_settings( $path = array(), $context = array() ) { * @return string */ function gutenberg_get_global_styles_custom_css() { + _deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_get_global_stylesheet' ); // Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow. $can_use_cached = ! WP_DEBUG; $cache_key = 'gutenberg_get_global_custom_css'; @@ -177,6 +178,7 @@ function gutenberg_get_global_styles_custom_css() { * @return string The global base custom CSS. */ function gutenberg_get_global_styles_base_custom_css() { + _deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_get_global_stylesheet' ); if ( ! wp_theme_has_theme_json() ) { return ''; } @@ -211,6 +213,7 @@ function gutenberg_get_global_styles_base_custom_css() { * @global WP_Styles $wp_styles */ function gutenberg_add_global_styles_block_custom_css() { + _deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_add_global_styles_for_blocks' ); global $wp_styles; if ( ! wp_theme_has_theme_json() || ! wp_should_load_separate_core_block_assets() ) { diff --git a/lib/script-loader.php b/lib/script-loader.php index 01008a0da8967e..59df13556e9cfc 100644 --- a/lib/script-loader.php +++ b/lib/script-loader.php @@ -43,45 +43,29 @@ function gutenberg_enqueue_global_styles() { add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' ); $stylesheet = gutenberg_get_global_stylesheet(); - if ( empty( $stylesheet ) ) { - return; - } - - wp_register_style( 'global-styles', false ); - wp_add_inline_style( 'global-styles', $stylesheet ); - wp_enqueue_style( 'global-styles' ); - - // Add each block as an inline css. - gutenberg_add_global_styles_for_blocks(); /* - * Add the custom CSS for the global styles. - * Before that, dequeue the Customizer's custom CSS + * Dequeue the Customizer's custom CSS * and add it before the global styles custom CSS. - * Don't enqueue Customizer's custom CSS separately. */ remove_action( 'wp_head', 'wp_custom_css_cb', 101 ); + // Get the custom CSS from the Customizer and add it to the global stylesheet. + $custom_css = wp_get_custom_css(); + $stylesheet .= $custom_css; - $custom_css = wp_get_custom_css(); + // Add the global styles custom CSS at the end. + $stylesheet .= gutenberg_get_global_stylesheet( array( 'custom-css' ) ); - if ( ! wp_should_load_separate_core_block_assets() ) { - /* - * If loading all block assets together, add both - * the base and block custom CSS at once. Else load - * the base custom CSS only, and the block custom CSS - * will be added to the inline CSS for each block in - * gutenberg_add_global_styles_block_custom_css(). - */ - $custom_css .= gutenberg_get_global_styles_custom_css(); - } else { - $custom_css .= gutenberg_get_global_styles_base_custom_css(); + if ( empty( $stylesheet ) ) { + return; } - if ( ! empty( $custom_css ) ) { - wp_add_inline_style( 'global-styles', $custom_css ); - } + wp_register_style( 'global-styles', false ); + wp_add_inline_style( 'global-styles', $stylesheet ); + wp_enqueue_style( 'global-styles' ); - gutenberg_add_global_styles_block_custom_css(); + // Add each block as an inline css. + gutenberg_add_global_styles_for_blocks(); } add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles' ); add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 ); diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index bcf0d238400a08..59dcf07c040b52 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4850,12 +4850,31 @@ public function test_get_top_level_background_image_styles() { $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background image as string type does not match expectations' ); } - public function test_get_custom_css_handles_global_custom_css() { + /** + * Tests that base custom CSS is generated correctly. + */ + public function test_get_stylesheet_handles_base_custom_css() { + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'css' => 'body {color:purple;}', + ), + ) + ); + + $custom_css = 'body {color:purple;}'; + $this->assertSame( $custom_css, $theme_json->get_stylesheet( array( 'custom-css' ) ) ); + } + + /** + * Tests that block custom CSS is generated correctly. + */ + public function test_get_styles_for_block_handles_block_custom_css() { $theme_json = new WP_Theme_JSON_Gutenberg( array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, 'styles' => array( - 'css' => 'body {color:purple;}', 'blocks' => array( 'core/paragraph' => array( 'css' => 'color:red;', @@ -4865,8 +4884,17 @@ public function test_get_custom_css_handles_global_custom_css() { ) ); - $custom_css = 'body {color:purple;}:root :where(p){color:red;}'; - $this->assertSame( $custom_css, $theme_json->get_custom_css() ); + $paragraph_node = array( + 'name' => 'core/paragraph', + 'path' => array( 'styles', 'blocks', 'core/paragraph' ), + 'selector' => 'p', + 'selectors' => array( + 'root' => 'p', + ), + ); + + $custom_css = ':root :where(p){color:red;}'; + $this->assertSame( $custom_css, $theme_json->get_styles_for_block( $paragraph_node ) ); } /**