Try: Remove intrinsic block margins, rely on cascade

This PR is round 2 of #8350. The ultimate goal is to make it easier for themes to style the editor, and to do less CSS overriding in order to do so. Problem: Currently, every single block is born with an intrinsic top and bottom margin. This margin matches the padding that sits between the block and the "selected block" border, plus 2px of space. This margin is the same regardless of whether the block needs a margin or not, and it is applied to nesting containers as well. In the case of the Columns block for example, that means the _column_ block (singular) has top and bottom margin, even though it shouldn't have that. Since then a number of changes have been made to the editor to make it a good time to revisit this: - The block outlines and toolbars have been refactored to not rely on margins at all to position themselves. These will still be painted correctly outside of the block, though they may overlap content visibly if a zero margin block is selected. - A more solid editor style system has been introduced that makes it easier to customize the editor to look like the front-end. As a result of this, feedback around CSS specificity and having to override these margins have surfaced to a higher degree. Proposed solution: By removing the intrinsic margin, we can re-apply it only to the blocks that actually _should_ be born with an intrinsic margin, such as paragraphs, lists, quotes ,etc. Some discussion points that are likely to surface: where should those vanilla styles be stored? How should they be structured so that themes can easily override them? Should these _not_ be loaded if a theme provides its own editor styles? Should we leverage the cascade and store these generically in one location or should these be applied in the style.scss file for every block in the library? Given these intrinsic margins have been present since day one, can we expect plugin authors to remember to add these margins themselves for every block they make? Is there a back-compat way we provide these default margins to blocks that rely on them? This is a try branch, in order to figure out answers to those questions. This first commit only does a few things: - It rearranges some CSS to put things in more logical locations. - It removes the intrinsic margins, then blanket reapplies them in that new vanilla stylesheet location with a new CSS variable. Next commits will explore how to remove that blanket reapplication, and try to provide those vanilla styles in a per-block basis. See also: #13989 (comment) https://github.com/WordPress/gutenberg/pull/8350/files
WordPress · Mar 15, 2019 · 0ca60f4 · 0ca60f4
1 parent 3cc3c89
commit 0ca60f4
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 69 deletions.
diff --git 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-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
@@ -4,8 +4,7 @@
 	position: relative;
 }
 
-.block-editor-rich-text__editable {
-	margin: 0;
+.editor-rich-text__editable {
 	position: relative;
 	// In HTML, leading and trailing spaces are not visible, and multiple spaces
 	// elsewhere are visually reduced to one space. This rule prevents spaces

diff --git 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/heading/editor.scss b/packages/block-library/src/heading/editor.scss
@@ -6,42 +6,5 @@
 	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/heading/theme.scss b/packages/block-library/src/heading/theme.scss
@@ -0,0 +1,66 @@
+// 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;
+}
diff --git a/packages/block-library/src/paragraph/theme.scss b/packages/block-library/src/paragraph/theme.scss
@@ -0,0 +1,4 @@
+p {
+	margin-top: 2em;
+	margin-bottom: 2em;
+}
diff --git 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
@@ -120,7 +120,7 @@
 	font-size: 13px;
 }
 
-.has-regular-font-size, // not used now, kept because of backward compatibility.
+.has-regular-font-size, // Not used now, kept because of backward compatibility.
 .has-normal-font-size {
 	font-size: 16px;
 }
@@ -133,7 +133,32 @@
 	font-size: 36px;
 }
 
-.has-larger-font-size, // not used now, kept because of backward compatibility.
+.has-larger-font-size, // Not used now, kept because of backward compatibility.
 .has-huge-font-size {
 	font-size: 42px;
 }
+
+
+/**
+ * Vanilla Block Editor Styles
+ * 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.
+ */
+
+// 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.
+// Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only.
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+iframe {
+	width: 100%;
+}
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
@@ -1,7 +1,9 @@
 @import "./code/theme.scss";
+@import "./heading/theme.scss";
 @import "./preformatted/theme.scss";
 @import "./pullquote/theme.scss";
 @import "./quote/theme.scss";
+@import "./paragraph/theme.scss";
 @import "./search/theme.scss";
 @import "./separator/theme.scss";
 @import "./table/theme.scss";
diff --git 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
@@ -70,9 +70,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
@@ -112,8 +112,8 @@ body.block-editor-page {
 }
 
 .block-editor__container {
-	// on mobile the main content area has to scroll
-	// otherwise you can invoke the overscroll bounce on the non-scrolling container, causing (ノಠ益ಠ)ノ彡┻━┻
+	// On mobile the main content area has to scroll, otherwise you can
+	// invoke the overscroll bounce on the non-scrolling container, for a bad experience.
 	@include break-small {
 		position: absolute;
 		top: 0;
@@ -132,15 +132,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
@@ -12,8 +12,8 @@ p {
 
 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.