[Block] Navigation: Long Menu Titles do not break-word in order to wrap within Columns block

[cuemarie]

Description

If a Navigation block is set up in a Columns block, and one menu item has a long single word (with no spaces or hyphens), the menu item doesn't wrap at the edge of the column it's nested in; it overflows into the next column.

Step-by-step reproduction instructions

1. Activate a block theme such as TT3
2. On a new post, add a Columns block with a 25/75 split
3. In the left column, add a Navigation Block
4. (For ease of testing, I recommend setting the Nav Block's Orientation to Vertical under the block settings)
5. Create/rename a menu item with a long one-word title, such as Supercalifragilisticexpialidocious

Instead of wrapping the long word to contain it within the column, the nav block flows right off the side of the column.

Context

While Supercalifragilisticexpialidocious is not a likely menu item name, but words such as Documentation, Photojournalism, Notifications could certainly run into this type of issue in a vertical menu / column layout setup.

Screenshots, screen recording, code snippet

It seems this is caused by the word-break: normal in this CSS:

.wp-block-navigation .wp-block-navigation-item__label {
  overflow-wrap: break-word;
  word-break: normal;
}

Screen.Capture.on.2023-07-04.at.17-07-52.mp4

Environment info

• WordPress 6.2.2
• Tested with Gutenberg 16.1.1 active as well as with Gutenberg deactivated.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jordesign]

Tested and confirmed this behaviour 👍

[getdave]

@scruffian We should look to fix this in the 6.4 beta cycle whilst bug fixes are still allowed to be shipped. What do you think?