Menu.ItemHelpText: better line breaking (WordPress#67011)

* Fix: Use break-word instead of break-all in attribute description Changed break-all to use word-break for better readability. * CSS: Replace deprecated word-break with overflow-wrap Replace deprecated `word-break: break-word` with the modern equivalent `overflow-wrap: anywhere` to handle text wrapping. This change maintains the same text wrapping behavior while using the current standard CSS property. * Docs: Add changelog entry for MenuItemHelpText text wrapping fix * Docs: Update changelog entry for Menu.ItemHelpText to internal section Co-authored-by: himanshupathak95 <[email protected]> Co-authored-by: juanfra <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: im3dabasia <[email protected]> Co-authored-by: jasmussen <[email protected]>
carstingaxion · Nov 21, 2024 · 9a6f48b · 9a6f48b
1 parent e0d5ee6
commit 9a6f48b
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -35,6 +35,7 @@
 
 -   `SlotFill`: fix dependencies of `Fill` registration effects ([#67071](https://github.com/WordPress/gutenberg/pull/67071)).
 -   `SlotFill`: rewrite the `Slot` component from class component to functional ([#67153](https://github.com/WordPress/gutenberg/pull/67153)).
+-   `Menu.ItemHelpText`: Fix text wrapping to prevent unintended word breaks ([#67011](https://github.com/WordPress/gutenberg/pull/67011)).
 
 ## 28.12.0 (2024-11-16)
 

diff --git a/packages/components/src/menu/styles.ts b/packages/components/src/menu/styles.ts
@@ -380,7 +380,7 @@ export const MenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
 	color: ${ LIGHTER_TEXT_COLOR };
-	word-break: break-all;
+	overflow-wrap: anywhere;
 
 	[data-active-item]:not( [data-focus-visible] )
 		*:not( ${ MenuPopoverInnerWrapper } )