Enhance content wrapping with text-wrap (#119)

Enhance content with text-wrap Balance headings and captions. Prevent orphans in longer form content.
WordPress · Dec 18, 2023 · f238779 · f238779
1 parent 3e45255
commit f238779
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/source/wp-content/themes/wporg-parent-2021/sass/base/_elements.scss b/source/wp-content/themes/wporg-parent-2021/sass/base/_elements.scss
@@ -1,3 +1,23 @@
+// Create balanced text blocks
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+caption,
+figcaption {
+	text-wrap: var(--wp--custom--heading--typography--text-wrap);
+}
+
+// Prevent orphans
+p,
+ul,
+ol,
+blockquote {
+	text-wrap: var(--wp--custom--body--typography--text-wrap);
+}
+
 // Links
 a {
 	cursor: pointer;

diff --git a/source/wp-content/themes/wporg-parent-2021/theme.json b/source/wp-content/themes/wporg-parent-2021/theme.json
@@ -283,7 +283,8 @@
 			},
 			"body": {
 				"typography": {
-					"lineHeight": 1.875
+					"lineHeight": 1.875,
+					"textWrap": "pretty"
 				},
 				"short-text": {
 					"typography": {
@@ -328,7 +329,8 @@
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--eb-garamond)",
 					"fontWeight": 400,
-					"lineHeight": 1.3
+					"lineHeight": 1.3,
+					"textWrap": "balance"
 				},
 				"cta": {
 					"typography": {