Scope CSS rules for the wp admin reset to js support only. (#52376)

WordPress · Jul 10, 2023 · c0e0230 · c0e0230
1 parent 59234d3
commit c0e0230
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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" );
 }