Query Pagination: Add typography support

[aaronrobertshaw]

Related:

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

What?

Adds typography support to the Query Pagination block.

Why?

• Improves consistency of our design tools across blocks.
• Adds higher level typography styling for the inner blocks of the Query Pagination block.

How?

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

Testing Instructions

1. In the site editor, edit a template with a Query block.
2. Navigate to Global Styles > Blocks > Query Pagination > Typography and apply typography styles there.
3. Confirm the Query Pagination block within the preview updates accordingly.
4. Save and check the styling is correct on the frontend.
5. Back in the site editor, select the Query Pagination block.
6. Navigate to the Settings sidebar and the block tab.
7. Adjust the block's typography settings here and confirm they are reflected in the preview.
8. Save and check the frontend again.
9. Clear your customizations.
10. Test that the block can be styled via theme.json.

Example theme.json snippet:

			"core/query-pagination": {
				"typography": {
					"fontWeight": "100"
				}
			}

Screenshots or screencast

Screen.Recording.2022-08-24.at.6.07.14.pm.mp4

[andrewserong]

This is testing nicely for me:

✅ Each control works correctly at the block level
✅ Each control works correctly in global styles and when saved and viewed on the site frontend
✅ Values entered in theme.json at the block level appear to be output correctly

LGTM! ✨