From 80a9c8574325e08d03c6679cddb7544499b87a50 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 3 Jun 2024 13:30:13 +0200 Subject: [PATCH 1/3] Update instances of text-wrap: pretty to fall back to balance --- .../dimension-control/test/__snapshots__/index.test.js.snap | 4 ++++ .../components/src/heading/test/__snapshots__/index.tsx.snap | 1 + packages/components/src/text/styles.ts | 1 + .../components/src/text/test/__snapshots__/index.tsx.snap | 1 + packages/editor/src/components/post-panel-row/style.scss | 1 + packages/editor/src/components/post-publish-panel/style.scss | 1 + 6 files changed, 9 insertions(+) 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 index 73c8ebcfb49276..7994f5573555fa 100644 --- 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; /* Fallback for Safari. */ 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; /* Fallback for Safari. */ 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; /* Fallback for Safari. */ 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; /* Fallback for Safari. */ 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 index 9a779613f56c22..804594d2c24437 100644 --- 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; /* Fallback for Safari. */ 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 index 1a0a6383363df8..c7d48552795938 100644 --- 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 index d2caecd9bf0593..23b8abde7c4954 100644 --- a/packages/components/src/text/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap @@ -54,6 +54,7 @@ exports[`Text snapshot tests should render correctly 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; + text-wrap: balance; /* Fallback for Safari. */ 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 index baa7d7dd98977d..024394c3aaf331 100644 --- 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 index c0ddec29253e33..996d0be26fc533 100644 --- 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; } } From 79b4f2ecd7adadf88000963c3b46b3675c15800e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 3 Jun 2024 13:39:32 +0200 Subject: [PATCH 2/3] fix update snapshots --- .../test/__snapshots__/index.test.js.snap | 8 ++++---- .../src/heading/test/__snapshots__/index.tsx.snap | 2 +- .../components/src/text/test/__snapshots__/index.tsx.snap | 3 ++- 3 files changed, 7 insertions(+), 6 deletions(-) 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 index 7994f5573555fa..608cadbcf544f2 100644 --- 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,7 +68,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; - text-wrap: balance; /* Fallback for Safari. */ + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; @@ -348,7 +348,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; - text-wrap: balance; /* Fallback for Safari. */ + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; @@ -638,7 +638,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] color: #1e1e1e; line-height: 1.4; margin: 0; - text-wrap: balance; /* Fallback for Safari. */ + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; @@ -940,7 +940,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] color: #1e1e1e; line-height: 1.4; margin: 0; - text-wrap: balance; /* Fallback for Safari. */ + 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 index 804594d2c24437..cf863c4b2bb2ef 100644 --- a/packages/components/src/heading/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/heading/test/__snapshots__/index.tsx.snap @@ -5,7 +5,7 @@ exports[`props should render correctly 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; - text-wrap: balance; /* Fallback for Safari. */ + text-wrap: balance; text-wrap: pretty; color: #1e1e1e; font-size: calc(1.95 * 13px); diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap index 23b8abde7c4954..1b98c0853ac549 100644 --- 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,7 +55,7 @@ exports[`Text snapshot tests should render correctly 1`] = ` color: #1e1e1e; line-height: 1.4; margin: 0; - text-wrap: balance; /* Fallback for Safari. */ + text-wrap: balance; text-wrap: pretty; font-size: calc((13 / 13) * 13px); font-weight: normal; From 235c48ce27a6ef4ae6669c4bdcde1a26a1e2852b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Mon, 3 Jun 2024 13:41:55 +0200 Subject: [PATCH 3/3] add changelog entry --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4ad4dd4ec63125..e8d65cfd9ce837 100644 --- 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