From d383d87a8a1c0ecdd5f6ddebe76bc4b66d1b0dba Mon Sep 17 00:00:00 2001 From: Andrea Fercia 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 d33a5ae22c0fd..fac5deef18f71 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 5a7f96433518a..a6309ae2a895c 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 2e78903d72c71..ae850c3bb78fe 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" ); }