diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 03ed0f07bd5de3..20efaffd7402f2 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -56,15 +56,6 @@
margin-left: -$block-padding;
margin-right: -$block-padding;
}
-
- // Space every block, and the default appender, using margins.
- // This allows margins to collapse, which gives a better representation of how it looks on the frontend.
- .block-editor-default-block-appender > .block-editor-default-block-appender__content,
- > .block-editor-block-list__block > .block-editor-block-list__block-edit,
- > .block-editor-block-list__layout > .block-editor-block-list__block > .block-editor-block-list__block-edit {
- margin-top: $block-padding * 2 + $block-spacing;
- margin-bottom: $block-padding * 2 + $block-spacing;
- }
}
.block-editor-block-list__layout .block-editor-block-list__block {
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index c11243504016aa..b918ffe4a88a7d 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -6,7 +6,7 @@
background-position: center center;
min-height: 430px;
width: 100%;
- margin: 0 0 1.5em 0;
+ margin: 0 0 2em 0;
display: flex;
justify-content: center;
align-items: center;
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index bc8bbd83911ade..a63652bf404bda 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -9,7 +9,6 @@
@import "./file/editor.scss";
@import "./classic/editor.scss";
@import "./gallery/editor.scss";
-@import "./heading/editor.scss";
@import "./html/editor.scss";
@import "./image/editor.scss";
@import "./latest-comments/editor.scss";
diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss
deleted file mode 100644
index 2a58a2a4155ba5..00000000000000
--- a/packages/block-library/src/heading/editor.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.wp-block-heading {
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- color: inherit;
- margin: 0;
- }
-
- // These follow a Major Third type scale
- h1 {
- font-size: 2.44em;
- }
-
- h2 {
- font-size: 1.95em;
- }
-
- h3 {
- font-size: 1.56em;
- }
-
- h4 {
- font-size: 1.25em;
- }
-
- h5 {
- font-size: 1em;
- }
-
- h6 {
- font-size: 0.8em;
- }
-
- // Adjust line spacing for larger headings.
- h1,
- h2,
- h3 {
- line-height: 1.4;
- }
-
- h4 {
- line-height: 1.5;
- }
-}
diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss
index 1d679a32ece8fc..2a3c258fc9e981 100644
--- a/packages/block-library/src/separator/theme.scss
+++ b/packages/block-library/src/separator/theme.scss
@@ -1,7 +1,7 @@
.wp-block-separator {
border: none;
border-bottom: 2px solid $dark-gray-100;
- margin: 1.65em auto;
+ margin: 2em auto;
// Default, thin style
&:not(.is-style-wide):not(.is-style-dots) {
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 285c139b3b0fa4..ade6f23e4691f3 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -141,8 +141,9 @@
/**
* Vanilla Block Styles
- * These are base styles that apply across blocks.
- * We should have as few of these as possible.
+ * These are base styles that apply across blocks, meant to provide a baseline.
+ * They are applied both to the editor, and the theme, so we should have as few of these as possible.
+ * Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only.
*/
// Caption styles.
@@ -151,3 +152,20 @@
figcaption {
margin-top: 0.5em;
}
+
+// Gutenberg specific elements
+.editor-default-block-appender__content,
+.components-placeholder {
+ margin-top: 2em;
+ margin-bottom: 2em;
+}
+
+// Apply some base margins to blocks that need them.
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+iframe {
+ width: 100%;
+}
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index e925344dc9e3a2..4168a23c297a99 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/edit-post/src/components/text-editor/style.scss
@@ -30,7 +30,7 @@
.editor-post-title__block {
textarea {
border: $border-width solid $light-gray-500;
- margin-bottom: 4px;
+ margin-bottom: $block-spacing;
padding: $block-padding;
}
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index d0ec876d553152..61fc3f17f78b1a 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -63,9 +63,10 @@
margin-left: auto;
margin-right: auto;
- // Space title similarly to other blocks.
- // This uses negative margins so as to not affect the default block margins.
- margin-bottom: -$block-padding - $block-spacing - $border-width - $border-width;
+ // Apply default block margin below the post title.
+ // This ensures the first block on the page is almost in a good position.
+ // This rule can be retired once the title becomes an actual block.
+ margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
// Stack borders.
> div {
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index ae0225bc6c97e7..be47d4c70dc96d 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -88,15 +88,6 @@ body.block-editor-page {
}
}
- img {
- max-width: 100%;
- height: auto;
- }
-
- iframe {
- width: 100%;
- }
-
.components-navigate-regions {
height: 100%;
}
diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss
index 1efafd9445f49a..b0d4890ae6eced 100644
--- a/packages/editor/src/editor-styles.scss
+++ b/packages/editor/src/editor-styles.scss
@@ -1,3 +1,12 @@
+/**
+ * Normalization Styles
+ *
+ * Why do these exist? Why not rely on browser defaults?
+ * These styles are necessary so long as CSS can bleed from the wp-admin into the editing canvas itself.
+ *
+ * Let's continue working to refactor these away, whether through Shadow DOM or better scoping of upstream styles.
+ */
+
body {
font-family: $editor-font;
font-size: $editor-font-size;
@@ -5,15 +14,94 @@ body {
color: $dark-gray-900;
}
+/* Headings */
+// These follow a Major Third type scale
+h1 {
+ font-size: 2.44em;
+}
+
+h2 {
+ font-size: 1.95em;
+}
+
+h3 {
+ font-size: 1.56em;
+}
+
+h4 {
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
+}
+
+h6 {
+ font-size: 0.8em;
+}
+
+// Adjust line spacing for larger headings.
+h1,
+h2,
+h3 {
+ line-height: 1.4;
+}
+
+h4 {
+ line-height: 1.5;
+}
+
+// Default margins.
+h1 {
+ margin-top: 0.67em;
+ margin-bottom: 0.67em;
+}
+
+h2 {
+ margin-top: 0.83em;
+ margin-bottom: 0.83em;
+}
+
+h3 {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+
+h4 {
+ margin-top: 1.33em;
+ margin-bottom: 1.33em;
+}
+
+h5 {
+ margin-top: 1.67em;
+ margin-bottom: 1.67em;
+}
+
+h6 {
+ margin-top: 2.33em;
+ margin-bottom: 2.33em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: inherit;
+}
+
p {
font-size: inherit;
line-height: inherit;
+ margin-top: 2em;
+ margin-bottom: 2em;
}
ul,
ol {
- margin: 0;
- padding: 0;
+ margin: 1em 0;
+ padding: inherit;
li {
// This overrides a bottom margin globally applied to list items in wp-admin.