Try alternate list item jump fix.

This PR is an alternative to #12590, and also fixes #12526. Props @Naerriel for initial work and inspiration. The different approach taken here is to embrace that we are applying a specific margin to our list items and overrides bleed from wp-admin. In doing so it moves these margins to the editor styles stylesheet, which is a more appropriate place for it.
WordPress · Dec 17, 2018 · 9c1c5b1 · 9c1c5b1
1 parent e1092c0
commit 9c1c5b1
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss
@@ -14,6 +14,11 @@ ul,
 ol {
 	margin: 0;
 	padding: 0;
+
+	li {
+		// This overrides a bottom margin globally applied to list items in wp-admin.
+		margin-bottom: 0.5em;
+	}
 }
 
 ul {
@@ -27,6 +32,9 @@ ol {
 ul ul,
 ol ul {
 	list-style-type: circle;
+
+	// This, combined with the margin applied on line 20, ensures there are no "jumps" when you indent a list item.
+	margin-top: 0.5em;
 }
 
 .mce-content-body {