Latest Posts: Add typography supports

[aaronrobertshaw]

Related:

• Tracking: Addressing Design Tooling Consistency #43241
• Tracking: Typography Design Tools Consistency #43242
• Latest Posts: Add support for typography properties #29623

What?

Adds typography supports to the Latest Posts block at the root block level.

This is an alternative approach to specifically targeting post titles only as per #29623.

It is worth considering whether we should start by applying typography settings at the root level or for specific inner blocks. Should we decide on the later, leveraging feature level selectors would likely be our best bet where we could easily target not just the title but dates and authors as well, excluding any post content or excerpt.

Why?

• Improves consistency of our design tools across blocks.
• Provides high level control over the typography of all elements making up the Latest Posts block.

How?

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

Testing Instructions

1. Edit a post, add a Latest Posts block, and select it.
2. Adjust its typography via the sidebar.
3. Experiment with all the various toggles for the Latest Posts block e.g. displaying excerpts or full post content, author names, post dates etc.
4. Ensure the selected styles are reflected in both the editor and frontend.
5. Reset the blocks styles and save.
6. Load the site editor and navigate to Global Styles > Blocks > Latest Posts > Typography.
7. Double check that adjusted typography settings are reflected in the preview and are applied on frontend after saving.
8. Confirm that theme.json styling of the Latest Posts works as expected.
9. See if you can replicate issue raised here: Latest Posts: Add support for typography properties #29623 (comment)

Example theme.json snippet:

			"core/latest-posts": {
				"typography": {
					"fontWeight": "100",
					"textTransform": "uppercase"
				}
			}

Screenshots or screencast

Screen.Recording.2022-08-24.at.11.51.49.am.mp4

[glendaviesnz]

This worked as expected for me:

✅ Typography controls displayed for latest pots block and were applied in editor and front end. They applied to all the children of the block, also, eg. full post content if selected, but as you note this is probably a good first step rather than having no controls until targeting of specific elements is selected
✅ Theme.json setting was applied in editor and frontend
✅ Settings applied in global styles showed in post editor and frontend
✅ I wasn't able to replicate the issue noted here