From d3606ad9a3871414b45eee86770fc56b5e9443da Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 17:38:05 +0100
Subject: [PATCH] Preload: fix multiple regressions around global styles
 (#66468)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 backport-changelog/6.8/7661.md                |  3 ++
 lib/compat/wordpress-6.8/preload.php          | 29 +++++++++++++++++++
 lib/load.php                                  |  1 +
 packages/core-data/src/resolvers.js           |  2 ++
 .../global-styles-provider/index.js           | 26 +++++++++++++----
 5 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 backport-changelog/6.8/7661.md
 create mode 100644 lib/compat/wordpress-6.8/preload.php

diff --git a/backport-changelog/6.8/7661.md b/backport-changelog/6.8/7661.md
new file mode 100644
index 00000000000000..2170f50c2a4e86
--- /dev/null
+++ b/backport-changelog/6.8/7661.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7661
+
+* https://github.com/WordPress/gutenberg/pull/66468
diff --git a/lib/compat/wordpress-6.8/preload.php b/lib/compat/wordpress-6.8/preload.php
new file mode 100644
index 00000000000000..057cdc0965757b
--- /dev/null
+++ b/lib/compat/wordpress-6.8/preload.php
@@ -0,0 +1,29 @@
+<?php
+
+/**
+ * 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_8( $paths, $context ) {
+	$excluded_paths = array();
+	if ( 'core/edit-site' === $context->name || 'core/edit-post' === $context->name ) {
+		$stylesheet       = get_stylesheet();
+		$global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
+		$paths[]          = '/wp/v2/global-styles/themes/' . $stylesheet . '?context=view';
+		$paths[]          = '/wp/v2/global-styles/themes/' . $stylesheet . '/variations?context=view';
+		$paths[]          = array( '/wp/v2/global-styles/' . $global_styles_id, 'OPTIONS' );
+		$excluded_paths[] = '/wp/v2/global-styles/themes/' . $stylesheet;
+		$excluded_paths[] = '/wp/v2/global-styles/' . $global_styles_id;
+	}
+	foreach ( $paths as $key => $path ) {
+		if ( in_array( $path, $excluded_paths, true ) ) {
+			unset( $paths[ $key ] );
+		}
+	}
+	return $paths;
+}
+add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_8', 10, 2 );
diff --git a/lib/load.php b/lib/load.php
index b91118cbced985..d2229a973142f1 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -47,6 +47,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/compat/wordpress-6.7/rest-api.php';
 
 	// WordPress 6.8 compat.
+	require __DIR__ . '/compat/wordpress-6.8/preload.php';
 	require __DIR__ . '/compat/wordpress-6.8/remove-default-css.php';
 	require __DIR__ . '/compat/wordpress-6.8/block-comments.php';
 	require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php';
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 91a73a0b3511c2..a5c33e18efbc60 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -644,6 +644,7 @@ export const __experimentalGetCurrentThemeBaseGlobalStyles =
 	() =>
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
+		// Please adjust the preloaded requests if this changes!
 		const themeGlobalStyles = await apiFetch( {
 			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }?context=view`,
 		} );
@@ -657,6 +658,7 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations =
 	() =>
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
+		// Please adjust the preloaded requests if this changes!
 		const variations = await apiFetch( {
 			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations?context=view`,
 		} );
diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
index 6f2d8177056cb1..3f3a3389801eb6 100644
--- a/packages/editor/src/components/global-styles-provider/index.js
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -56,13 +56,27 @@ function useGlobalStylesUserConfig() {
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 
 			let record;
-			const userCanEditGlobalStyles = canUser( 'update', {
-				kind: 'root',
-				name: 'globalStyles',
-				id: _globalStylesId,
-			} );
 
-			if ( _globalStylesId ) {
+			// We want the global styles ID request to finish before triggering
+			// the OPTIONS request for user capabilities, otherwise it will
+			// fetch `/wp/v2/global-styles` instead of
+			// `/wp/v2/global-styles/{id}`!
+			// Please adjust the preloaded requests if this changes!
+			const userCanEditGlobalStyles = _globalStylesId
+				? canUser( 'update', {
+						kind: 'root',
+						name: 'globalStyles',
+						id: _globalStylesId,
+				  } )
+				: null;
+
+			if (
+				_globalStylesId &&
+				// We want the OPTIONS request for user capabilities to finish
+				// before getting the records, otherwise we'll fetch both!
+				typeof userCanEditGlobalStyles === 'boolean'
+			) {
+				// Please adjust the preloaded requests if this changes!
 				if ( userCanEditGlobalStyles ) {
 					record = getEditedEntityRecord(
 						'root',