Update instances of text-wrap: pretty to fall back to balance (#62233)

* Update instances of text-wrap: pretty to fall back to balance * fix update snapshots * add changelog entry --------- Co-authored-by: Fabian Kägy <mail@fabian-kaegy.de>
WordPress · Jun 4, 2024 · 329369b · 329369b
1 parent d93cea5
commit 329369b
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
+
 ## 28.0.0 (2024-05-31)
 
 ### Breaking Changes

diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -68,6 +68,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -347,6 +348,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -636,6 +638,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -937,6 +940,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;

diff --git a/packages/components/src/heading/test/__snapshots__/index.tsx.snap b/packages/components/src/heading/test/__snapshots__/index.tsx.snap
@@ -5,6 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   color: #1e1e1e;
   font-size: calc(1.95 * 13px);

diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts
@@ -12,6 +12,7 @@ export const Text = css`
 	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
+	text-wrap: balance; /* Fallback for Safari. */
 	text-wrap: pretty;
 `;
 

diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap
@@ -22,6 +22,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -54,6 +55,7 @@ exports[`Text snapshot tests should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;

diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
@@ -25,6 +25,7 @@
 	.components-button {
 		max-width: 100%;
 		text-align: left;
+		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
 		height: auto;
 		min-height: $button-size-compact;

diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
@@ -122,6 +122,7 @@
 
 	.components-panel__body-title .components-button {
 		align-items: flex-start;
+		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
 	}
 }