From e67853bc313a525c880a7f4fb2fec103c7da046a Mon Sep 17 00:00:00 2001
From: Khokan Sardar <itzmekhokan@gmail.com>
Date: Wed, 20 May 2026 14:56:00 +0530
Subject: [PATCH] Administration: Fix black flash on Connectors screen before
 hydration.

Use the boot layout background token for #wpwrap critical CSS instead of a
foreground color fallback that rendered as near-black before React mounted.

Fixes #65247.
---
 .../options-connectors/page-wp-admin.php      |  2 +-
 .../wpOptionsConnectorsWpAdminRenderPage.php  | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 tests/phpunit/tests/connectors/wpOptionsConnectorsWpAdminRenderPage.php

diff --git a/src/wp-includes/build/pages/options-connectors/page-wp-admin.php b/src/wp-includes/build/pages/options-connectors/page-wp-admin.php
index b8937db2e2b91..0315291ae9fc4 100644
--- a/src/wp-includes/build/pages/options-connectors/page-wp-admin.php
+++ b/src/wp-includes/build/pages/options-connectors/page-wp-admin.php
@@ -245,7 +245,7 @@ function wp_options_connectors_wp_admin_render_page() {
 
 		/* Background colors */
 		#wpwrap {
-			background: var(--wpds-color-fg-content-neutral, #1e1e1e);
+			background: var(--wpds-color-bg-surface-neutral-weak, #f0f0f0);
 			overflow-y: auto;
 		}
 		body {
diff --git a/tests/phpunit/tests/connectors/wpOptionsConnectorsWpAdminRenderPage.php b/tests/phpunit/tests/connectors/wpOptionsConnectorsWpAdminRenderPage.php
new file mode 100644
index 0000000000000..4f87b12c81168
--- /dev/null
+++ b/tests/phpunit/tests/connectors/wpOptionsConnectorsWpAdminRenderPage.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Tests for the Connectors wp-admin page render output.
+ *
+ * @group connectors
+ */
+class Tests_Connectors_WpOptionsConnectorsWpAdminRenderPage extends WP_UnitTestCase {
+
+	/**
+	 * Critical styles should use a background token for #wpwrap, not a foreground color.
+	 *
+	 * @ticket 65247
+	 */
+	public function test_render_page_critical_styles_use_background_token_for_wpwrap() {
+		if ( ! function_exists( 'wp_options_connectors_wp_admin_render_page' ) ) {
+			$this->markTestSkipped( 'Connectors build files are not available.' );
+		}
+
+		ob_start();
+		wp_options_connectors_wp_admin_render_page();
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString(
+			'background: var(--wpds-color-bg-surface-neutral-weak, #f0f0f0)',
+			$output,
+			'#wpwrap should use the same background token as .boot-layout before hydration.'
+		);
+		$this->assertStringNotContainsString(
+			'background: var(--wpds-color-fg-content-neutral, #1e1e1e)',
+			$output,
+			'#wpwrap must not use a foreground color token as its background fallback.'
+		);
+	}
+}