Reduce the specificity of block styles to simplify editor styles slig…

…htly (#14407) * 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 * Try a new "Safety Margin" This commit includes a few typo fixes, documentation cleanup, general polish. But moreso than that, it does a few things: - It removes as many margins as it can, now only bottom margins remain. - It introduces a new "safety margin" rule that targets every block. More on this in a bit. If you look over the code, you can see that it's quite a few steps forward with regards to simplifying selectors and cleaning up the code. But due to the [data-block] selector targetting the _wrapper_ of a block, rather than where the block starts (which is usually the first encounter of a `wp-block-*` class), this margin is actually applied outside of the content of the block. Which means this aspect is only the tiniest step forward, compared to the selector it replaces, which was also outside the content of the block. * Add top margin also.
WordPress · Apr 17, 2019 · 5430dce · 5430dce
1 parent 76fc248
commit 5430dce
Show file tree

Hide file tree

Showing 26 changed files with 198 additions and 113 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: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $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,6 @@ $blocks-button__height: 56px;
 
 .wp-block-button {
 	color: $white;
-	margin-bottom: 1.5em;
 
 	&.aligncenter {
 		text-align: center;

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
@@ -107,12 +107,18 @@
 					margin-left: -$border-width;
 				}
 
-				// The Column block is a child of the Columns block and is mostly a passthrough container.
-				// Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins.
-				// @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way.
+				// Zero out margins.
+				> [data-block] {
+					margin-top: 0;
+					margin-bottom: 0;
+				}
+
+				// The Columns block is a flex-container, therefore it nullifies margin collapsing.
+				// Therefore, blocks inside this will appear to create a double margin.
+				// We compensate for this using negative margins.
 				> div > .block-core-columns > .editor-inner-blocks {
-					margin-top: -$block-padding - $block-padding;
-					margin-bottom: -$block-padding - $block-padding;
+					margin-top: -$default-block-margin;
+					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,6 @@
 	background-position: center center;
 	min-height: 430px;
 	width: 100%;
-	margin: 0 0 1.5em 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
@@ -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";
@@ -34,3 +33,18 @@
 @import "./text-columns/editor.scss";
 @import "./verse/editor.scss";
 @import "./video/editor.scss";
+
+
+/**
+ * Editor Normalization Styles
+ *
+ * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
+ * This allows us to create normalization styles that are easily overridden by editor styles.
+ */
+
+// Provide every block with a default base margin. This margin provides a consistent spacing
+// between blocks in the editor.
+[data-block] {
+	margin-top: $default-block-margin;
+	margin-bottom: $default-block-margin;
+}
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -1,8 +1,15 @@
-// Override the default list style type _only in the editor_
-// to avoid :not() selector specificity issues.
-// See https://github.com/WordPress/gutenberg/pull/10358
-ul.wp-block-gallery li {
-	list-style-type: none;
+ul.wp-block-gallery {
+	// Override the default list style type _only in the editor_
+	// to avoid :not() selector specificity issues.
+	// See https://github.com/WordPress/gutenberg/pull/10358
+	li {
+		list-style-type: none;
+	}
+
+	// Override the bottom margin every block gets.
+	.is-selected & {
+		margin-bottom: 0;
+	}
 }
 
 .blocks-gallery-item {

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/html/editor.scss b/packages/block-library/src/html/editor.scss
@@ -1,17 +1,21 @@
-.wp-block-html .block-editor-plain-text {
-	font-family: $editor-html-font;
-	color: $dark-gray-800;
-	padding: 0.8em 1em;
-	border: 1px solid $light-gray-500;
-	border-radius: 4px;
+.wp-block-html {
+	margin-bottom: $default-block-margin;
 
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: $mobile-text-min-font-size;
-	@include break-small {
-		font-size: $default-font-size;
-	}
+	.block-editor-plain-text {
+		font-family: $editor-html-font;
+		color: $dark-gray-800;
+		padding: 0.8em 1em;
+		border: 1px solid $light-gray-500;
+		border-radius: 4px;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
 
-	&:focus {
-		box-shadow: none;
+		&:focus {
+			box-shadow: none;
+		}
 	}
 }
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/theme.scss b/packages/block-library/src/pullquote/theme.scss
@@ -1,6 +1,7 @@
 .wp-block-pullquote {
 	border-top: 4px solid $dark-gray-500;
 	border-bottom: 4px solid $dark-gray-500;
+	margin-bottom: $default-block-margin;
 	color: $dark-gray-600;
 
 	cite,

diff --git a/packages/block-library/src/quote/editor.scss b/packages/block-library/src/quote/editor.scss
@@ -1,7 +1,3 @@
-.wp-block-quote {
-	margin: 0;
-
-	&__citation {
-		font-size: $default-font-size;
-	}
+.wp-block-quote__citation {
+	font-size: $default-font-size;
 }
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
@@ -1,6 +1,6 @@
 .wp-block-quote {
 	border-left: 4px solid $black;
-	margin: 20px 0;
+	margin: 0 0 $default-block-margin 0;
 	padding-left: 1em;
 
 	cite,

diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss
@@ -1,7 +1,8 @@
 .wp-block-separator {
 	border: none;
 	border-bottom: 2px solid $dark-gray-100;
-	margin: 1.65em auto;
+	margin-left: auto;
+	margin-right: 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,7 @@
 	background-color: $dark-opacity-light-200;
 	font-size: $default-font-size;
 	font-family: $default-font;
+	margin-bottom: $default-block-margin;
 
 	label {
 		display: flex;

diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss
@@ -1,3 +1,7 @@
 .block-library-spacer__resize-container.is-selected {
 	background: $light-gray-200;
 }
+
+.block-library-spacer__resize-container {
+	margin-bottom: $default-block-margin;
+}
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 styles to blocks that need them.
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+iframe {
+	width: 100%;
+}
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
@@ -1,5 +1,5 @@
 .components-placeholder {
-	margin: 0;
+	margin-bottom: $default-block-margin;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -8,17 +8,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 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%;
 	}