Calendar: Add typography supports (except text-decoration)

[aaronrobertshaw]

Related:

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

What?

Adds typography support to the Calendar block (except text-decoration).

Note: Text decoration support was deliberately omitted as it would conflict with how the Calendar block displays dates with active links etc

Why?

• Allows for typographic styling of the Calendar block.
• Improves consistency of our design tools across blocks.

How?

• Opts into all typography supports except text-decoration.
• Only the font size control will display by default.

Testing Instructions

1. Edit a post, add an Calendar block and select it.
2. The font size control should be displayed by default.
3. Test various typography settings ensuring styles are applied in the editor.
4. Confirm text decoration support isn't available,
5. Save and confirm the application of styles on the frontend.
6. Switch to the site editor, and select a page or template with an Calendar block.
7. Navigate to Global Styles > Blocks > Calendar > Typography and apply typography styles there.
8. Confirm the selected styles are reflected in the preview and on the frontend.
9. Test theme.json styling of the block.

Example theme.json snippet

			"core/calendar": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
					"fontWeight": "100",
					"fontStyle": "italic",
					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
					"fontSize": "var(--wp--custom--typography--font-size--gigantic)",
					"letterSpacing": "2px"
				}
			},

Screenshots or screencast

Screen.Recording.2022-09-08.at.5.17.18.pm.mp4

[glendaviesnz]

LGTM:

✅ Could add typography supports, except decoration, in post editor tools panel and changes were reflected in editor and frontend
✅ Could set calendar typography in global styles and change reflected in site editor, post editor and frontend
✅ Could set calendar typography in theme.json and reflected in editor and frontend