Make Site-Title a link

[david-szabo97]

Description

Closes #24716
Turns Site Title into a link on the frontend.

Caveats

Site Title is not a link in the editor. I tried multiple ways to solve it, but none of them worked properly.

1. If I'm using an a tag as tagName for RichText Block then it gives a warning about using an inline element
2. Using a custom element as a tagName (a element wrapped in the tagName) caused usability issues. The a element hijacked content editing. No matter where I clicked in the text, it always put the caret at the start of the text. If I used pointerEvents: 'none' then it ignored the hover style.

Looking forward to suggestions.

How has this been tested?

1. Add Site Title block
2. Save
3. Site Title should point to the homepage on the frontend

Types of changes

Breaking change? (It breaks styling by adding a new element)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[ockham]

Solving the editor problem might be tricky; it might require some architectural changes.

Some thoughts:

• It makes sense that RichText only accepts a block element as tagName -- it's an editable thing after all, and those tend to look like blocks 😄
• We also know that the (inline) a must be inside of any block elements (h1, p, etc) (that's just how the web works).
• Having a RichText that's used for a block like this is a conceivable use case for e.g. themes: We want control over formatting options of the block (hence RichText), but we also want it to be a link.
• Consequently, maybe we need to add a (bool) prop to RichText that wraps its content in an a.

This will require changes to the RichText component, which is widely used. It might make sense merge this PR as-is, and tackle editing mode in a separate PR (so we don't block progress on this PR).

[david-szabo97]

Yep, that was my thought as well - we might need to touch the RichText component. It would be awesome to add a contentContainer prop. Let's try to merge this as-is and circle back to the editor problem in another PR/issue - as you suggested.

[ockham]

Some e2e tests and JS unit tests are failing (which seems unrelated). I'll restart them.

[david-szabo97]

Seems to fail because of this

    ["Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`"]

[ockham]

Seems to fail because of this

    ["Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`"]

I'll try a rebase.

[ockham]

One note here. Let's also wait for CI to go green. Otherwise looks good to merge 👍

[ockham]

The e2e test errors are a bit weird, I'll try a rebase.

[vindl]

Solving the editor problem might be tricky; it might require some architectural changes.

@ockham is this something that we actually need or want to solve in the editor? What would the behavior be in that case? 🤔

[vindl]

This looks good to me! As a follow-up we might need to update the relevant FSE themes to preserve the existing look, since this will likely introduce underline for site title that previously wasn't there?

[ockham]

Solving the editor problem might be tricky; it might require some architectural changes.

@ockham is this something that we actually need or want to solve in the editor? What would the behavior be in that case?

That's a bit of TBD indeed. The Site Logo does something like that (<a /> tag and event handler with preventDefault IIRC -- so we're at least getting a different cursor, and the link target shows up in the browser's bottom status bar on mouse over), and I think we should represent faithfully in the editor that the site title is going to be a link.

Furthermore, I think there have been some designs on making those links better 'navigable' in the editor -- possible in a similar way as Google Docs (small popover with a few options). So I think it makes sense to pave the way 🤔

[ockham]

This looks good to me! As a follow-up we might need to update the relevant FSE themes to preserve the existing look, since this will likely introduce underline for site title that previously wasn't there?

Yeah, we'll probably need to do that.

[ockham]

Another weird e2e error, this time about a snapshot 🙄 I'll try another rebase.

[ockham]

Tests are finally passing 👍