Wrapping probably should happen for navigation

[karmatosed]

This is a stress case but there is no wrapping so this can be created:

If we decide to just let someone do this, that's ok but it looks like this on front.

[mapk]

Should we solve for this with a design exploration around fading out long words into a smaller space?

I'm thinking of something like this specifically, but am completely aware it may not be a great solution.

[getdave]

I would love to see a consistent UI pattern for:

1. Handling long strings of unbreaking text.
2. Handling overflowing content which is "hidden" off screen but designed to be scrolled to (eg: a scrollable list of links where some items are hidden due to the scroll and fixed height).

[karmatosed]

My slight caution over a fading out is it can look like a mistake. There are a few options we could have from '...' through to having the fading out. I would also love to see a consistent way to deal with this.

[ItsJonQ]

👋 Hi there!! Navigation x Long content is always challenging. Especially with the inline-editing interactions that the Navigation Block is trying to achieve.

I experimented a bit and created this prototype:
https://codesandbox.io/s/navigation-link-truncation-interaction-sbg0y

I think truncation may be a good option when viewing the nav links (not editing). This can be achieved by having a max-width of some kind, and indicating the truncation with ....

When editing the link, the NavigationItem should expand to full to enable the RichText editor to do its thing.

---

Thoughts on the fading UI.

From a technical perspective, this is more challenging compared to a ... . The reason is because the Fade UI requires knowledge of the background color in order to render the fade effect (e.g. white -> transparent). This is okay if the Gutenberg editor's background is always white... but that might not always be the case. Therefore, we'd need background color awareness for both the Gutenberg back-end + front-end to achieve this effect.

Whereas with ..., it's just adding ... into the UI.

I'm not saying the fade effect is impossible :). It just requires more technical considerations.

Hopefully the prototype + thoughts help!~

[karmatosed]

@mapk what do you think in this case about adding ... for now?

[mapk]

Truncating the text with an ellipses is fine. Either case feels really odd in context to the block though. I'd love to get a fix in that helps resolve the long text issue right now and then iterate later on a more holistic, contextual approach.

[karmatosed]

@mapk I think you are suggesting we get in '...' and consider an iteration? Do you have ideas on a more holistic approach here?

[mapk]

Yep, that's what I'm suggesting. I think ellipses ... could work for now.

As for a holistic approach, I don't have anything fantastic. Maybe we break it similarly to how it breaks when editing the text?

[obenland]

How are default themes handling these cases currently?

[tellthemachines]

Yep, that's what I'm suggesting. I think ellipses ... could work for now.

As for a holistic approach, I don't have anything fantastic. Maybe we break it similarly to how it breaks when editing the text?

If we're likely to go with breaking long words in the future, I'd suggest that we implement it straightaway instead of the ellipses solution, because word-break is much easier (literally one line of CSS). We'll have to add that line in anyway if we go with the ellipses, because we should be displaying the whole text when focused, and we'll want the whole of our super-long word to be visible on the page while it's editable.

If we do end up going with ellipses though, what character limit should be set? In English words are generally pretty short, but that's not the case in all languages. We'll need a value long enough that it doesn't cut off legitimate one-word navigation items 😅

[mapk]

@tellthemachines, let's try a simple CSS break-word for now. I'm not sure about a character limit. Translating a simple menu over to German gave me this.

The longest German word, Dienstleistungen, is 13 characters. So let's go with that?