From 7f97d5c3da65c73ea026171e3d9335c087ab2dde Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 9 Aug 2021 08:59:53 +0200
Subject: [PATCH] Try: Reduce specificity of reset & classic styles. (#32659)

* Try: Reduce specificity of reset & classic styles.

* Restore specificity of classic auto margin rule.
---
 packages/block-library/src/reset.scss |  4 +++-
 packages/edit-post/src/classic.scss   | 10 ++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss
index deaa6774abcc9e..06199037876c5e 100644
--- 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
index a58b9b07052b90..cf3a016d38f6b7 100644
--- 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