From d383d87a8a1c0ecdd5f6ddebe76bc4b66d1b0dba Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 6 Jul 2023 14:15:05 +0200
Subject: [PATCH] Scope CSS rules for the wp admin reset to js support only.

---
 packages/edit-post/src/style.scss    |  8 +-------
 packages/edit-site/src/style.scss    | 22 ++++++++++------------
 packages/edit-widgets/src/style.scss | 10 ++--------
 3 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index d33a5ae22c0fd9..fac5deef18f717 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -41,13 +41,7 @@
 	}
 }
 
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
-html.wp-toolbar {
-	background: $white;
-}
-
-body.block-editor-page {
+body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );
 }
 
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 5a7f96433518ab..a6309ae2a895c2 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -47,27 +47,20 @@
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 
-html #wpadminbar {
+body.js #wpadminbar {
 	display: none;
 }
 
-html #wpbody {
+body.js #wpbody {
 	padding-top: 0;
 }
 
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
-html.wp-toolbar {
-	background: $white;
-	padding-top: 0;
-}
-
-body.appearance_page_gutenberg-template-parts,
-body.site-editor-php {
+body.js.appearance_page_gutenberg-template-parts,
+body.js.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }
 
-body.site-editor-php {
+body.js.site-editor-php {
 	background: $gray-900;
 }
 
@@ -91,6 +84,11 @@ body.site-editor-php {
 		top: 0;
 	}
 
+	.no-js & {
+		min-height: 0;
+		position: static;
+	}
+
 	.interface-interface-skeleton {
 		top: 0;
 	}
diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
index 2e78903d72c714..ae850c3bb78fee 100644
--- a/packages/edit-widgets/src/style.scss
+++ b/packages/edit-widgets/src/style.scss
@@ -11,14 +11,8 @@
 @import "./components/widget-areas-block-editor-content/style.scss";
 @import "./components/secondary-sidebar/style.scss";
 
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
-html.wp-toolbar {
-	background: $white;
-}
-
-body.appearance_page_gutenberg-widgets,
-body.widgets-php {
+body.js.appearance_page_gutenberg-widgets,
+body.js.widgets-php {
 	@include wp-admin-reset( ".blocks-widgets-container" );
 }