Text links need improved styles

[kjellr]

From the mockups:

---

---

• Links need more refined text-decoration styles, so that the thin font isn't paired with a horribly thick underline. (I think we could probably elevate this issue from "enhancement" to a "bug" because of this bullet).
• Link underlines should become dotted on hover and in their active state.
• Focus state should be dotted.
• The mockups indicate that large post titles should not have underlines by default, but that their hover and active states should have a solid underline.

May end up being related to: #99
Upstream issue: WordPress/gutenberg#27075

[kjellr]

Links need more refined text-decoration styles, so that the thin font isn't paired with a horribly thick underline. (I think we could probably elevate this issue from "enhancement" to a "bug" because of this bullet).

If we get desperate, this would take like two lines of CSS to fix:

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25ch;
}

Before	After

[jffng]

Regarding those two lines of CSS, I wonder if they will be supported via the theme.json elements API.

In other words, should we be able to declare styles.elements.link.typography.textDecorationThickness and .textUnderlineOffset?

[gregrickaby]

@kjellr @jffng Could I pick this one up? I'll try using theme.json first, and fall back to CSS.

[kjellr]

You're welcome to give it a shot, @gregrickaby! Just know that this might be a little difficult to sort out. I'm really hesitant to use CSS (so far, we don't even enqueue style.css in the editor yet since it's not needed), but the mechanisms to make this happen in theme.json don't exist yet. The most ideal solution is to get those built into Gutenberg somehow as part of WordPress/gutenberg#27075. There's been very little movement there yet, so this may end up being a little bit of a dead end.

[gregrickaby]

Good to know. I'll look for another issue then. 😅

Appreciate the heads up @kjellr!

[carolinan]

Here is how to manipulate theme.json to include the thickness:

	"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
					"fontWeight": "300",
					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
					"fontSize": "var(--wp--custom--typography--font-size--gigantic)"
				},
				"elements":{
					"link": {
						"typography": {
							"textDecoration": ";text-decoration-thickness: 1px; text-underline-offset: 0.25ch;"
						}
					}
				}
			},

The key is closing the textDecoration with the extra ;

It's definitely hacky. Its also very small.