Home Link block doesn't work well outside of menus

[iandunn]

What problem does this address?

Menus aren't the only place that people add links to the homepage. For example, a 404.html template could say:

This page doesn’t exist.
Go to the homepage, or try searching from the field below.

When used in that kind of context, the link is wrapped in an unnecessary li tag and there's no corresponding ul (which isn't valid HTML).

I could wrap the block in a ul, but then I have to add extra CSS to reverse its styles, so that it doesn't appear to be a list.

Related #32939

What is your proposed solution?

Add support for the tagName attribute, and default to li.

If the value is a, then just output the link without any wrapper element.

[carolinan]

How are you adding the home link block outside the navigation block?
I did not think that was possible or intended, it is limited to the navigation block:
"parent": [ "core/navigation" ],

I also think adding a block inline inside a paragraph, to add a link to the home would be much more complicated than just selecting the text and adding the link?

[iandunn]

Not in the editor, I'm adding it directly to my 404.html file.

<!--
  -- Right now, this is the least-bad way to get a dynamic link to the homepage (rather than hardcoding the URL).
  -- @link https://github.com/WordPress/gutenberg/issues/35926
  -- @link https://github.com/WordPress/gutenberg/issues/32939
  -->
<!-- wp:html -->
<div>
	Go to
	<ul class="is-inline"><!-- wp:home-link {"label":"the homepage","tagName":"div"} /--></ul>,
	or try searching from the field below.
</div>
<!-- /wp:html -->

Supporting tagName would fix the issue for my specific use case, but there's also the larger issue that the block "should" be able to be used outside a menu, IMO. So to fix that, we'd also need to allow the editor to add it outside a menu.

[iandunn]

( that approach might break if a user edited it, but i'm building a custom theme for a specific site, not something that's meant to be distributed. a lot of the templates will be locked, at least until issues like this one are resolved )

[iandunn]

A better way to solve this might be to allow template tags like {{ home_url }} (which would map to the PHP home_url() function). That would solve a much wider range of problems than just the specific problem with this block.

@mkaz suggested that in #31815 (comment)

[jordesign]

Currently the Home Link block cannot be inserted outside the Nav (an issue which is raised here) which makes this issue not currently relevant. Accordingly I'll close it for now.

[iandunn]

I think it can, I've done it before, which is how I ran into this issue. See my earlier comment for details.

[carolinan]

There is no tool yet that we can use in our code editors to verify if the markup is correct, not the way that we can lint JavaScript or PHP, so it is possible to write any code in the HTML file manually, but it doesn't mean it will work.

[jordesign]

I'm inclined to agree with @carolinan - whilst it is possible to add the code manually into a template like that - it's certainly not the planned use-case, and wouldn't be expected to particularly work like that.

[carolinan]

At the same time, the use case is clearly described; it just isn't a bug with this block, more a feature request.

If we treat it as a feature request, is it a duplicate of the dynamic token? #39831?
I am trying to think of which issues and current discussions may be closely related.

[iandunn]

Yeah, #39831 seems related, and also #32939, #20966, and #21932 (and probably several others). Those may be alternative/better ways to solve this problem 👍🏻

From the perspective of a plugin dev, it does seems unexpected to me that something called a "home link" would be coupled so tightly to the nav block, rather than working as a standalone block. If #49282 removes the <li>, though, that works for me 👍🏻

Y'all are closer to the project than I am, so feel free to re-close this if that seems best to you. I just re-opened it because at the time I assumed it was closed based on a misunderstanding.

[carolinan]

This developer use case should now be solvable with the block bindings API.