From eecacc18eb27d94c4e5e66b55e8fa19de4a23b59 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 27 Nov 2023 16:49:49 +0100 Subject: [PATCH 1/2] Editor styles: scope without adding specificity --- packages/block-library/src/editor.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 5f3d962ae7afae..f2e8668c1b2498 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -74,19 +74,19 @@ // // The reason we add the editor class wrapper here is // to avoid enqueing the classes twice: here and in ./editor.scss -.editor-styles-wrapper .has-regular-font-size { +:where(.editor-styles-wrapper) .has-regular-font-size { font-size: 16px; } -.editor-styles-wrapper .has-larger-font-size { +:where(.editor-styles-wrapper) .has-larger-font-size { font-size: 42px; } -.editor-styles-wrapper .has-normal-font-size { +:where(.editor-styles-wrapper) .has-normal-font-size { font-size: var(--wp--preset--font-size--normal); } -.editor-styles-wrapper .has-huge-font-size { +:where(.editor-styles-wrapper) .has-huge-font-size { font-size: var(--wp--preset--font-size--huge); } @@ -98,6 +98,6 @@ */ // Remove the browser default border for iframe in Custom HTML block, Embed block, etc. -.editor-styles-wrapper iframe:not([frameborder]) { +:where(.editor-styles-wrapper) iframe:not([frameborder]) { border: 0; } From d20fb7901c828accf669c08f95cac296ea41a380 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 27 Nov 2023 17:57:10 +0000 Subject: [PATCH 2/2] Lower specificity of the `.editor-styles-wrapper` selector --- packages/block-library/src/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index f2e8668c1b2498..e3642868034a5a 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -65,7 +65,7 @@ // This CSS Custom Properties aren't used anymore as defaults, // but we still need to keep them for backward compatibility. -.editor-styles-wrapper { +:where(.editor-styles-wrapper) { --wp--preset--font-size--normal: 16px; --wp--preset--font-size--huge: 42px; }