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 · Apr 12, 2019 · 2cd2b3a · 2cd2b3a
1 parent 0b93ad4
commit 2cd2b3a
Show file tree

Hide file tree

Showing 23 changed files with 146 additions and 84 deletions.
diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
@@ -9,6 +9,7 @@ $default-line-height: 1.4;
 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
 $editor-font-size: 16px;
+$default-block-margin: 2em; // Becomes 32px with the 16px base font size, which gives a nice 2px gap with the 14px block padding.
 $text-editor-font-size: 14px;
 $editor-line-height: 1.8;
 $big-font-size: 18px;

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/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -13,6 +13,8 @@
 		outline: $border-width solid transparent;
 		transition: 0.2s outline;
 		resize: none;
+		margin-top: $default-block-margin;
+		margin-bottom: $default-block-margin;
 
 		// Emulate the dimensions of a paragraph block.
 		// On mobile and in nested contexts, the plus to add blocks shows up on the right.

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -10,14 +10,17 @@
 }
 
 .wp-block-button {
-	display: inline-block;
-	margin-bottom: 0;
 	position: relative;
 
 	[contenteditable] {
 		cursor: text;
 	}
 
+	// Don't let placeholder expand parent width.
+	.block-editor-rich-text {
+		display: inline-block;
+	}
+
 	// Make placeholder text white unless custom colors or outline versions are chosen.
 	&:not(.has-text-color):not(.is-style-outline) .block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable {
 		color: $white;

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -2,7 +2,7 @@ $blocks-button__height: 56px;
 
 .wp-block-button {
 	color: $white;
-	margin-bottom: 1.5em;
+	margin-bottom: $default-block-margin;
 
 	&.aligncenter {
 		text-align: center;

diff --git a/packages/block-library/src/code/theme.scss b/packages/block-library/src/code/theme.scss
@@ -5,4 +5,5 @@
 	padding: 0.8em 1em;
 	border: 1px solid $light-gray-500;
 	border-radius: 4px;
+	margin-bottom: $default-block-margin;
 }
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
@@ -1,5 +1,6 @@
 .wp-block-columns {
 	display: flex;
+	margin-bottom: $default-block-margin;
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;

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-bottom: $default-block-margin;
 	display: flex;
 	justify-content: center;
 	align-items: center;

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -10,7 +10,6 @@
 @import "./classic/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/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/embed/style.scss b/packages/block-library/src/embed/style.scss
@@ -11,7 +11,7 @@
 .wp-block-embed {
 	// The embed block is in a `figure` element, and many themes zero this out.
 	// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
-	margin-bottom: 1em;
+	margin-bottom: $default-block-margin;
 }
 
 .wp-embed-responsive {

diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss
diff --git a/packages/block-library/src/more/editor.scss b/packages/block-library/src/more/editor.scss
@@ -1,6 +1,8 @@
 .block-editor-block-list__block[data-type="core/more"] {
 	max-width: 100%;
 	text-align: center;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 }
 
 .block-editor .wp-block-more { // needs specificity

diff --git a/packages/block-library/src/nextpage/editor.scss b/packages/block-library/src/nextpage/editor.scss
@@ -1,5 +1,7 @@
 .block-editor-block-list__block[data-type="core/nextpage"] {
 	max-width: 100%;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 }
 
 .wp-block-nextpage {

diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
@@ -2,6 +2,7 @@
 	padding: 3em 0;
 	margin-left: 0;
 	margin-right: 0;
+	margin-bottom: $default-block-margin;
 	text-align: center;
 
 	&.alignleft,

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: $default-block-margin auto;
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {

diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
@@ -5,6 +5,8 @@
 	background-color: $dark-opacity-light-200;
 	font-size: $default-font-size;
 	font-family: $default-font;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 
 	label {
 		display: flex;

diff --git 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,13 @@
 figcaption {
 	margin-top: 0.5em;
 }
+
+// Apply some base margins to blocks that need them.
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+iframe {
+	width: 100%;
+}
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
@@ -1,4 +1,6 @@
 .wp-block-table {
+	margin-bottom: $default-block-margin;
+
 	$subtle-light-gray: #f3f4f5;
 	$subtle-pale-green: #e9fbe5;
 	$subtle-pale-blue: #e7f5fe;

diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
@@ -1,5 +1,6 @@
 .components-placeholder {
-	margin: 0;
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -8,17 +9,22 @@
 	min-height: 200px;
 	width: 100%;
 	text-align: center;
-	font-family: $default-font;
-	font-size: $default-font-size;
 
-	// use opacity to work in various editor styles
+	// Use opacity to work in various editor styles.
 	background: $dark-opacity-light-200;
 
 	.is-dark-theme & {
 		background: $light-opacity-light-200;
 	}
 }
 
+.components-placeholder__instructions,
+.components-placeholder__label,
+.components-placeholder__fieldset {
+	font-family: $default-font;
+	font-size: $default-font-size;
+}
+
 .components-placeholder__label {
 	display: flex;
 	align-items: center;

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;
 
 			&:focus {

diff --git 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
@@ -88,15 +88,6 @@ body.block-editor-page {
 		}
 	}
 
-	img {
-		max-width: 100%;
-		height: auto;
-	}
-
-	iframe {
-		width: 100%;
-	}
-
 	.components-navigate-regions {
 		height: 100%;
 	}