Home Link: Add typography support

[aaronrobertshaw]

Related:

• Tracking: Addressing Design Tooling Consistency #43241
• Tracking: Typography Design Tools Consistency #43242

What?

Adds typography support to the Home Link block.

Why?

• Improves consistency of our design tools across blocks.
• Allows applying typographic styles to the Home link independent of other navigation links.

How?

• Opts into typography supports.
• Makes only the font size control displayed by default

Testing Instructions

1. Edit a post, add a Navigation block with a menu including a Home Link.
2. Select the Home Link block and confirm font size control displayed by default.
3. Test various typography settings ensuring styles are applied in the editor.
4. Save and confirm the application on the frontend.
5. Switch to the site editor and select a page with a Navigation block including a Home Link.
6. Navigate to Global Styles > Blocks > Home Link > Typography and apply typography styles there.
7. Confirm the selected styles are reflected in the preview and on the frontend.

Screenshots or screencast

Screen.Recording.2022-08-17.at.5.31.14.pm.mp4

[carolinan]

The control works fine, but there are CSS specificity issues. Should this be adressed in another PR?

1. Add a size to the navigation block.
2. Add a different size to the home link.
3. In the block editor, the sizes are correct.
4. On the front, the size that is added to the navigation block is used.

[tellthemachines]

Code looks good!
Tested on post and site editor as well as global styles and everything works fine. It's nice to be able to style Home Link differently from the regular links too:

[tellthemachines]

So we don't seem to ever list the full set of typography options, right? I notice other blocks look the same.

[aaronrobertshaw]

This is the output from the automatic doc generation. I believe it doesn't include any experimental APIs.

One of the later phases of the design tool consistency effort will be to stabilize our block support APIs. These docs will be updated again we that happens.

[tellthemachines]

@carolinan that's an interesting problem! (Also thanks for your comprehensive testing 😄 )

The classname for the Navigation-level styles is being added to each li in the block's index.php, before the block support adds its own class. I'm not sure why we need to add the class to each li in the front end, because in the editor we just add it to the Navigation wrapper. That would be worth looking into separately, I reckon.

[aaronrobertshaw]

That would be worth looking into separately, I reckon.

Agreed. Investigating via a separate follow-up looking specifically at the Navigation block sounds like a plan.

I'll add a note about the follow-up to the tracking issue and then merge this.