Separate base and per-block custom CSS and enqueue in different places.

src/wp-includes/class-wp-theme-json.php

@@ -1200,6 +1200,45 @@ public function get_custom_css() {
 		return $stylesheet;
 	}
 
+	/**
+	 * Returns the global styles base custom CSS.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @return string The global styles base custom CSS.
+	 */
+	public function get_custom_base_css() {
+		return isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : '';
+	}
+
+
+	/**
+	 * Returns the global styles per-block custom CSS.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @return string The global styles per-block custom CSS.
+	 */
+	public function get_custom_block_css() {
+		$stylesheet = '';
+
+		// Add the global styles block CSS.
+		if ( isset( $this->theme_json['styles']['blocks'] ) ) {
+			foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) {
+				$custom_block_css = isset( $this->theme_json['styles']['blocks'][ $name ]['css'] )
+					? $this->theme_json['styles']['blocks'][ $name ]['css']
+					: null;
+				if ( $custom_block_css ) {
+					$selector    = static::$blocks_metadata[ $name ]['selector'];
+					$stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
+				}
+			}
+		}
+
+		return $stylesheet;
+
+	}
+
 	/**
 	 * Returns the page templates of the active theme.
 	 *

src/wp-includes/global-styles-and-settings.php

@@ -294,6 +294,74 @@ function wp_get_global_styles_custom_css() {
 	return $stylesheet;
 }
 
+/**
+ * Gets the global styles base custom CSS from theme.json.
+ * Logic should follow wp_get_global_styles_custom_css.
+ *
+ * @since 6.5.0
+ *
+ * @return string The global base custom CSS.
+ */
+function wp_get_global_styles_base_custom_css() {
+	if ( ! wp_theme_has_theme_json() ) {
+		return '';
+	}
+
+	$can_use_cached = ! wp_is_development_mode( 'theme' );
+
+	$cache_key   = 'wp_get_global_styles_base_custom_css';
+	$cache_group = 'theme_json';
+	if ( $can_use_cached ) {
+		$cached = wp_cache_get( $cache_key, $cache_group );
+		if ( $cached ) {
+			return $cached;
+		}
+	}
+
+	$tree       = WP_Theme_JSON_Resolver::get_merged_data();
+	$stylesheet = $tree->get_custom_base_css();
+
+	if ( $can_use_cached ) {
+		wp_cache_set( $cache_key, $stylesheet, $cache_group );
+	}
+
+	return $stylesheet;
+}
+
+/**
+ * Gets the global styles per-block custom CSS from theme.json.
+ * Logic should follow wp_get_global_styles_custom_css.
+ *
+ * @since 6.5.0
+ *
+ * @return string The global per-block custom CSS.
+ */
+function wp_get_global_styles_block_custom_css() {
+	if ( ! wp_theme_has_theme_json() ) {
+		return '';
+	}
+
+	$can_use_cached = ! wp_is_development_mode( 'theme' );
+
+	$cache_key   = 'wp_get_global_styles_block_custom_css';
+	$cache_group = 'theme_json';
+	if ( $can_use_cached ) {
+		$cached = wp_cache_get( $cache_key, $cache_group );
+		if ( $cached ) {
+			return $cached;
+		}
+	}
+
+	$tree       = WP_Theme_JSON_Resolver::get_merged_data();
+	$stylesheet = $tree->get_custom_block_css();
+
+	if ( $can_use_cached ) {
+		wp_cache_set( $cache_key, $stylesheet, $cache_group );
+	}
+
+	return $stylesheet;
+}
+
 /**
  * Adds global style rules to the inline style for each block.
  *
@@ -439,6 +507,8 @@ function wp_clean_theme_json_cache() {
 	wp_cache_delete( 'wp_get_global_settings_custom', 'theme_json' );
 	wp_cache_delete( 'wp_get_global_settings_theme', 'theme_json' );
 	wp_cache_delete( 'wp_get_global_styles_custom_css', 'theme_json' );
+	wp_cache_delete( 'wp_get_global_styles_base_custom_css', 'theme_json' );
+	wp_cache_delete( 'wp_get_global_styles_block_custom_css', 'theme_json' );
 	wp_cache_delete( 'wp_get_theme_data_template_parts', 'theme_json' );
 	WP_Theme_JSON_Resolver::clean_cached_data();
 }

src/wp-includes/script-loader.php

@@ -2528,13 +2528,21 @@ function wp_enqueue_global_styles_custom_css() {
 	remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
 
 	$custom_css  = wp_get_custom_css();
-	$custom_css .= wp_get_global_styles_custom_css();
+	$custom_css .= wp_get_global_styles_base_custom_css();
 
 	if ( ! empty( $custom_css ) ) {
 		wp_add_inline_style( 'global-styles', $custom_css );
 	}
+	$block_custom_css .= wp_get_global_styles_block_custom_css();
+
+	if ( ! empty( $block_custom_css ) ) {
+		wp_register_style( 'global-styles-block-custom', false );
+		wp_add_inline_style( 'global-styles-block-custom', $block_custom_css );
+		wp_enqueue_style( 'global-styles-block-custom' );
+	}
 }
 
+
 /**
  * Checks if the editor scripts and styles for all registered block types
  * should be enqueued on the current screen.