Squiggly line looks like spelling mistake not link in interface

[karmatosed]

I 'think' the squiggly line indicates that the navigation is a link, but typically a wiggly line would indicate that something, for example, might be a spelling mistake or problem, not that it's a link.

I would recommend that another visual is used in this case, even going back to having an underline as the wiggly line means a mistake and could easily get read as that here. Whilst typically the 'error' underline squiggly is also red, it feels just too similar to be used to mean link. I also might totally have it wrong what this is meant to mean, though.

[karmatosed]

@melchoyce just informed me that this squiggle means it could be a link but isn't linked up. That makes a little more sense and shows how confused I was in the first place about the squiggle. I think iterating on this makes sense as it seems very hard to understand what it is meant to infer.

[jasmussen]

The squiggly line is indeed in place to indicate: this menu item needs your attention because it doesn't link anywhere so if you publish, it won't show up. The common use case is to insert a block pattern featuring a call to action button which due to being from a pattern, doesn't link anywhere. The hope with the squiggly was exactly to be grammar-like, and while it's specific to the navigation block at the moment, ideally the pattern could scale to, and be the same, for additional blocks such as Buttons.

Though I agree it'd be nice to explore some design improvements:

• Make the squiggly less likely to be affected by padding, so it more commonly aligns with the text.
• Explore making the squiggly line red, and see what, if anything, we can do in contrast situations.
• Possibly: disable it entirely on the navigation screen, as the entire context is about building menus.

What do you think?

[karmatosed]

@jasmussen I think the issue though is it's not a spelling mistake though, which is why I'd probably say even for missing links the squiggly line might not work.

Possibly: disable it entirely on the navigation screen, as the entire context is about building menus.

This feels right to me. Although, I also think I might be on the side of wanting the squiggly line to go for every case.

[jasmussen]

I think the issue though is it's not a spelling mistake though, which is why I'd probably say even for missing links the squiggly line might not work.

There's definitely an opportunity to explore other designs, including dots or other underlines, as well as supporting indicators in List View or pre-publish flows. But as an in-canvas indicator of an error, I think the squiggly line can work, even if the current implementation isn't ideal. Consider that it's also used for grammar issues, as well as linting issues or compiler errors in VS code.

Although, I also think I might be on the side of wanting the squiggly line to go for every case.

The idea with the indicator is to get your attention: there's an error here, select the block to correct it. In the case of the navigation block menu items with squiggly lines are visible only in the editor, they do not get published. So if the squiggly line isn't working, we probably should think about what to replace it with. There's a good adjacent ticket in #32373, which goes into some of the underline explorations in the comments.

[karmatosed]

as an in-canvas indicator of an error, I think the squiggly line can work

I agree in that case. Perhaps that might be the issue, I'm not sure I see not having a link as an error. I see it as more of an unset. Which I know might sound like a context issue but it feels like an important experience differentiator. I do feel like the anti-squiggler though :)

[jasmussen]

I took a stab at improvements in #34954.