Try: Reduce specificity of reset & classic styles. (#32659)

* Try: Reduce specificity of reset & classic styles. * Restore specificity of classic auto margin rule.
WordPress · Aug 9, 2021 · 7f97d5c · 7f97d5c
1 parent f9f6cf0
commit 7f97d5c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss
@@ -5,7 +5,9 @@
  * of the editor by themes.
  */
 
-.editor-styles-wrapper {
+// We use :where to keep specificity minimal.
+// https://css-tricks.com/almanac/selectors/w/where/
+html :where(.editor-styles-wrapper) {
 	padding: 8px;
 
 	/**

diff --git a/packages/edit-post/src/classic.scss b/packages/edit-post/src/classic.scss
@@ -1,12 +1,14 @@
-// This needs specificity to override the editor styles.
+// Provide baseline auto margin for centering blocks.
+// Specificity is kept at this level as many classic themes output
+// rules like figure { margin: 0; } which would break centering.
 .editor-styles-wrapper .wp-block {
 	margin-left: auto;
 	margin-right: auto;
 }
 
-// Depreacted style needed for the block widths and alignments.
-// for themes that don't support the new layout (theme.json)
-.wp-block {
+// Deprecated style needed for the block widths and alignments.
+// for themes that don't support the new layout (theme.json).
+html :where(.wp-block) {
 	max-width: $content-width;
 
 	// Provide every block with a default base margin. This margin provides a consistent spacing