Home Link: Add Color and Radius support to Home Link Navigation element

[yogeshbhutkar]

What problem does this address?

The Home Link block currently lacks customization options for Color and Radius properties, limiting users' ability to style it according to their specific design requirements. Without these properties, achieving custom designs – such as those matching the provided reference image – is only possible through Custom CSS implementation. This limitation reduces the block's flexibility and forces users to rely on additional code solutions.

While potential workarounds exist, such as encapsulating the Home Link within a Group Block, this approach presents two significant challenges. First, the Home Link Block does not support adding Group as a parent container, as specified in its block.json configuration, which strictly limits the parent element to core/navigation. Second, implementing Group blocks introduces additional DOM elements, potentially impacting performance in resource-intensive scenarios.

What is your proposed solution?

We can add Color and Radius support to the Home Link block to customize it further and let the users adjust the Home Link component according to their needs.

[yogeshbhutkar]

@t-hamano would love to hear your thoughts on this.

[carolinan]

I understand the use case of styling the home link differently from other links in the navigation block.
But editing wise, it is not a great experience if only one navigation menu item has these options.

[carolinan]

This is the corresponding PR for the navigation link block: #66483
Except it doesn't add the colors.

This is the corresponding PR for the submenu #68455
Except it doesn't add the colors.

The page list has both text, background, and link color options, but it is for the whole list: Not the individual menu items.

[yogeshbhutkar]

I wonder if the colors should also apply to submenu items, given that the labels submenu & overlay text and submenu & overlay background suggest they affect both. At the very least, the labels should be clarified for better clarity—or maybe it’s just me who finds them a bit unclear.

Regardless, having the ability to style sub-menu items and the home link separately with different color options could be a useful feature in the future.