Update custom CSS handling to be consistent with block global styles.

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,
 		);

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;
 	}
 
@@ -2646,6 +2652,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 +2862,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'] ) ) {
+			$block_rules .= $this->process_blocks_custom_css( $node['css'], $selector );
+		}
+
 		return $block_rules;
 	}
 

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 );