Section Styles: Prevent flash of variation styles in post editor (#63071

)

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
Co-authored-by: justintadlock <greenshady@git.wordpress.org>

backport-changelog/6.6/6959.md

@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6959
+
+* https://github.com/WordPress/gutenberg/pull/63071
+

lib/compat/wordpress-6.6/rest-api.php

@@ -87,3 +87,20 @@ function gutenberg_register_global_styles_revisions_endpoints() {
 }
 
 add_action( 'rest_api_init', 'gutenberg_register_global_styles_revisions_endpoints' );
+
+/**
+ * Preload theme and global styles paths to avoid flash of variation styles in post editor.
+ *
+ * @param array                   $paths REST API paths to preload.
+ * @param WP_Block_Editor_Context $context Current block editor context.
+ * @return array Filtered preload paths.
+ */
+function gutenberg_block_editor_preload_paths_6_6( $paths, $context ) {
+	if ( 'core/edit-post' === $context->name ) {
+		$paths[] = '/wp/v2/global-styles/themes/' . get_stylesheet();
+		$paths[] = '/wp/v2/themes?context=edit&status=active';
+		$paths[] = '/wp/v2/global-styles/' . WP_Theme_JSON_Resolver::get_user_global_styles_post_id() . '?context=edit';
+	}
+	return $paths;
+}
+add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_6', 10, 2 );

packages/core-data/src/resolvers.js

@@ -543,13 +543,17 @@ export const __experimentalGetCurrentGlobalStylesId =
 		const globalStylesURL =
 			activeThemes?.[ 0 ]?._links?.[ 'wp:user-global-styles' ]?.[ 0 ]
 				?.href;
-		if ( globalStylesURL ) {
-			const globalStylesObject = await apiFetch( {
-				url: globalStylesURL,
-			} );
-			dispatch.__experimentalReceiveCurrentGlobalStylesId(
-				globalStylesObject.id
-			);
+		if ( ! globalStylesURL ) {
+			return;
+		}
+
+		// Regex matches the ID at the end of a URL or immediately before
+		// the query string.
+		const matches = globalStylesURL.match( /\/(\d+)(?:\?|$)/ );
+		const id = matches ? Number( matches[ 1 ] ) : null;
+
+		if ( id ) {
+			dispatch.__experimentalReceiveCurrentGlobalStylesId( id );
 		}
 	};