Twenty Twenty One: Fix editor spacing with inner blocks.

joedolson · joedolson · commit 945619c89728 · 2025-10-31T22:23:37.000Z
Fix margin on inner blocks (e.g. list item blocks) and body line-height in the editor styles for Twenty Twenty One. Props nidhidhandhukiya, rishabhwp, shailu25, ugyensupport, sabernhardt, karmatosed, sandeepdahiya, mleraygp, sirlouen, skithund, dilip2615. Fixes #60196, #63549. git-svn-id: https://develop.svn.wordpress.org/trunk@61106 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
@@ -2331,7 +2331,7 @@ pre.wp-block-verse {
 	color: #28303d;
 }
 
-[data-block] {
+[data-block]:where(:not(.wp-block-list-item)) {
 	margin-top: 30px;
 	margin-bottom: 30px;
 }
@@ -2439,13 +2439,10 @@ pre.wp-block-verse {
 	left: 5px;
 }
 
-html {
-	line-height: 1.7;
-}
-
 html,
 body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	line-height: 1.7;
 }
 
 body {
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css.map b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css.map
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css
@@ -2268,7 +2268,7 @@ pre.wp-block-verse {
 	color: var(--global--color-primary);
 }
 
-[data-block] {
+[data-block]:where(:not(.wp-block-list-item)) {
 	margin-top: var(--global--spacing-vertical);
 	margin-bottom: var(--global--spacing-vertical);
 }
@@ -2340,6 +2340,7 @@ body {
 	font-family: var(--global--font-secondary);
 	font-size: var(--global--font-size-base);
 	font-weight: normal;
+	line-height: var(--global--line-height-body);
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css.map b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css.map
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss
@@ -70,7 +70,7 @@
 }
 
 // Spacing Overrides
-[data-block] {
+[data-block]:where(:not(.wp-block-list-item)) {
 	margin-top: var(--global--spacing-vertical);
 	margin-bottom: var(--global--spacing-vertical);
 }
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss
@@ -10,6 +10,7 @@ body {
 	font-family: var(--global--font-secondary);
 	font-size: var(--global--font-size-base);
 	font-weight: normal;
+	line-height: var(--global--line-height-body);
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }

Original file line number	Diff line number	Diff line change
`@@ -2331,7 +2331,7 @@ pre.wp-block-verse {`
`2331`	`2331`	`color: #28303d;`
`2332`	`2332`	`}`
`2333`	`2333`
`2334`		`-[data-block] {`
	`2334`	`+[data-block]:where(:not(.wp-block-list-item)) {`
`2335`	`2335`	`margin-top: 30px;`
`2336`	`2336`	`margin-bottom: 30px;`
`2337`	`2337`	`}`
`@@ -2439,13 +2439,10 @@ pre.wp-block-verse {`
`2439`	`2439`	`left: 5px;`
`2440`	`2440`	`}`
`2441`	`2441`
`2442`		`-html {`
`2443`		`- line-height: 1.7;`
`2444`		`-}`
`2445`		`-`
`2446`	`2442`	`html,`
`2447`	`2443`	`body {`
`2448`	`2444`	`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;`
	`2445`	`+ line-height: 1.7;`
`2449`	`2446`	`}`
`2450`	`2447`
`2451`	`2448`	`body {`
Original file line number	Diff line number	Diff line change
`@@ -2268,7 +2268,7 @@ pre.wp-block-verse {`
`2268`	`2268`	`color: var(--global--color-primary);`
`2269`	`2269`	`}`
`2270`	`2270`
`2271`		`-[data-block] {`
	`2271`	`+[data-block]:where(:not(.wp-block-list-item)) {`
`2272`	`2272`	`margin-top: var(--global--spacing-vertical);`
`2273`	`2273`	`margin-bottom: var(--global--spacing-vertical);`
`2274`	`2274`	`}`
`@@ -2340,6 +2340,7 @@ body {`
`2340`	`2340`	`font-family: var(--global--font-secondary);`
`2341`	`2341`	`font-size: var(--global--font-size-base);`
`2342`	`2342`	`font-weight: normal;`
	`2343`	`+ line-height: var(--global--line-height-body);`
`2343`	`2344`	`-moz-osx-font-smoothing: grayscale;`
`2344`	`2345`	`-webkit-font-smoothing: antialiased;`
`2345`	`2346`	`}`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`// Spacing Overrides`
`73`		`-[data-block] {`
	`73`	`+[data-block]:where(:not(.wp-block-list-item)) {`
`74`	`74`	`margin-top: var(--global--spacing-vertical);`
`75`	`75`	`margin-bottom: var(--global--spacing-vertical);`
`76`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ body {`
`10`	`10`	`font-family: var(--global--font-secondary);`
`11`	`11`	`font-size: var(--global--font-size-base);`
`12`	`12`	`font-weight: normal;`
	`13`	`+ line-height: var(--global--line-height-body);`
`13`	`14`	`-moz-osx-font-smoothing: grayscale;`
`14`	`15`	`-webkit-font-smoothing: antialiased;`
`15`	`16`	`}`