Navigation Link: Add typography support

[aaronrobertshaw]

Related:

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

What?

Adds typography supports to the Navigation Link block.

Why?

• Improves consistency of our design tools across blocks.
• Allows typographic styling of custom navigation links independent of the parent Navigation block's styles.

How?

• Opts into all typography supports.
• Makes font size control displayed by default as per the majority of blocks currently.

Testing Instructions

1. In the site editor, edit a template with a Navigation block and add a couple of custom Navigation Links.
2. Navigate to Global Styles > Blocks > Custom Link > Typography. (Navigation Link block is named Custom Link)
3. Experiment with typography styles and ensure they are applied to the custom Navigation Link blocks in the preview.
4. Select one of your custom Navigation Link blocks and open the settings toolbar.
5. Within the typography panel, configure some overriding styles. These should be reflected in the preview.
6. Save and confirm styles on the frontend.
7. For bonus points, you can also test theme.json to be thorough.

Example theme.json snippet:

			"core/navigation-link": {
				"typography": {
					"fontWeight": "100",
					"textTransform": "uppercase"
				}
			}

Screenshots or screencast

Screen.Recording.2022-09-09.at.3.22.45.pm.mp4

[glendaviesnz]

Worked as advertised for me:

✅ Could set global styles Custom link typography and this was reflected in site editor and frontend
✅ Could override global styles with block specific styles in editor
✅ Settings added to theme.json were applied