Commit bffbd380ade for woocommerce
commit bffbd380adefcccfe2b0cffab128ce9402b8844c
Author: Jill Q. <jill.quek@automattic.com>
Date: Mon May 4 13:22:53 2026 +0800
Fix widows in admin body copy not covered by the global rule (#64453)
* Prevent widows in inbox note body copy
Apply `text-wrap: pretty` to `.woocommerce-inbox-message__text` so
browsers avoid leaving a single word on the last line of the note body.
Falls back to default wrapping in older browsers — no breakage.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Extend widow fix to seven more admin components
Apply `text-wrap: pretty` to body copy in the stepper, tour kit, task
list, store alerts, feedback modal, shipping dismiss modal, and cart
modal. Same systemic fix as the inbox note — applied per-selector to
multi-line description copy only, not globally, to avoid awkward
rebalancing in table cells and short strings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Drop expandable-content wrapper from task-item widow fix
Limit `text-wrap: pretty` to the description paragraph itself
(`.woocommerce-task__additional-info`). The wrapper selector was
unnecessary scope — it inherits to the action button inside.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Address Chi's review: use <p> tags so global widow rule applies
The WooCommerce admin already has a global text-wrap rule in
client/admin/client/stylesheets/shared/_global.scss covering p, ul,
ol, blockquote inside body.woocommerce-admin-page. Most of the
selectors in this PR were redundant with that rule — the affected
components are already rendered as <p>.
The stepper step description was rendered as a <span>, so the global
rule didn't reach it. Render it as a <p> instead, matching the
component's documented "block-level description" intent. The CSS
margin shorthand replaces the previous margin-top to handle the
default <p> bottom margin.
Drop the now-redundant text-wrap declarations and changelog entries
from the other affected packages. Net change: one component (stepper)
gets a tag fix; the rest is reverted.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Restore widow fix for inbox notes, task list, and store alerts
These three components render their body copy inside `<span>` or
`<div>` wrappers via dangerouslySetInnerHTML — the global widow rule
in _global.scss only matches `<p>` elements, so these were never
covered. Restore `text-wrap: pretty` on the wrapping selectors.
The other reverts in the previous commit stand: tour kit, feedback
modal, and shipping banner already render as `<p>` and are covered
by the global rule. Cart modal is dead code.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/packages/js/components/changelog/fix-stepper-description-tag b/packages/js/components/changelog/fix-stepper-description-tag
new file mode 100644
index 00000000000..d5eeb83d085
--- /dev/null
+++ b/packages/js/components/changelog/fix-stepper-description-tag
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Render the stepper step description as a `<p>` so it picks up the global widow-prevention rule in the WooCommerce admin.
diff --git a/packages/js/components/src/stepper/index.tsx b/packages/js/components/src/stepper/index.tsx
index fe631f34639..94dc88a1566 100644
--- a/packages/js/components/src/stepper/index.tsx
+++ b/packages/js/components/src/stepper/index.tsx
@@ -109,9 +109,9 @@ export const Stepper = ( {
{ label }
</span>
{ description && (
- <span className="woocommerce-stepper__step-description">
+ <p className="woocommerce-stepper__step-description">
{ description }
- </span>
+ </p>
) }
</div>
</LabelWrapper>
diff --git a/packages/js/components/src/stepper/style.scss b/packages/js/components/src/stepper/style.scss
index 38c8af2fb30..739cb1587de 100644
--- a/packages/js/components/src/stepper/style.scss
+++ b/packages/js/components/src/stepper/style.scss
@@ -44,7 +44,7 @@
font-size: 14px;
color: $gray-700;
font-weight: 400;
- margin-top: 2px;
+ margin: 2px 0 0;
}
.woocommerce-stepper__step-icon svg {
diff --git a/packages/js/experimental/changelog/fix-inbox-note-and-task-widows b/packages/js/experimental/changelog/fix-inbox-note-and-task-widows
new file mode 100644
index 00000000000..7d702380a15
--- /dev/null
+++ b/packages/js/experimental/changelog/fix-inbox-note-and-task-widows
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Prevent widows in inbox note and task list description copy with text-wrap: pretty.
diff --git a/packages/js/experimental/src/experimental-list/task-item/style.scss b/packages/js/experimental/src/experimental-list/task-item/style.scss
index 1870f683a31..d3c5ebf5dce 100644
--- a/packages/js/experimental/src/experimental-list/task-item/style.scss
+++ b/packages/js/experimental/src/experimental-list/task-item/style.scss
@@ -63,6 +63,10 @@ $task-alert-yellow: #f0b849;
font-size: 12px;
}
+ .woocommerce-task__additional-info {
+ text-wrap: pretty;
+ }
+
.woocommerce-task__estimated-time {
margin-top: $gap-smallest;
}
diff --git a/packages/js/experimental/src/inbox-note/style.scss b/packages/js/experimental/src/inbox-note/style.scss
index fd7122cfb5b..05c67fcec5d 100644
--- a/packages/js/experimental/src/inbox-note/style.scss
+++ b/packages/js/experimental/src/inbox-note/style.scss
@@ -94,6 +94,7 @@
font-weight: normal;
@include font-size( 14 );
line-height: 20px;
+ text-wrap: pretty;
& > p:first-child {
margin-top: 0;
}
diff --git a/plugins/woocommerce/changelog/fix-store-alerts-widows b/plugins/woocommerce/changelog/fix-store-alerts-widows
new file mode 100644
index 00000000000..fae0f991592
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-store-alerts-widows
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Prevent widows in store alerts message body copy with text-wrap: pretty.
diff --git a/plugins/woocommerce/client/admin/client/layout/store-alerts/style.scss b/plugins/woocommerce/client/admin/client/layout/store-alerts/style.scss
index 5088f29c868..0f1efe81146 100644
--- a/plugins/woocommerce/client/admin/client/layout/store-alerts/style.scss
+++ b/plugins/woocommerce/client/admin/client/layout/store-alerts/style.scss
@@ -135,6 +135,7 @@
.components-card__body .woocommerce-store-alerts__message {
margin-bottom: 12px;
+ text-wrap: pretty;
}
.woocommerce-store-alerts__pagination {