Column Block: Adopt typography supports

[aaronrobertshaw]

Related:

• Tracking: Addressing Design Tooling Consistency #43241
• Tracking: Typography Design Tools Consistency #43242
• Columns Block: Add typography supports #43253

What?

Opts into typography block supports for the Column block.

Why?

• Allows a user to set typography styles at the column level rather than have to do it to every inner block. Mileage will still vary based on block styles.
• Contributes towards efforts to increase consistency in terms of design tools across blocks.

How?

• Opts into all available typography block supports.
• Only exposes the font size control by default as that seems the most common configuration across blocks at the moment. It will be addressed further as part of follow-ups for Tracking: Addressing Design Tooling Consistency #43241

Testing Instructions

1. Load the site editor and navigate to Global Styles > Blocks > Column > Typography.
2. Adjust styles and confirm they are applied in the preview (this likely won't really be desired but illustrates that theme.json / global styles application of column typography works).
3. Save and check column styles are correct on frontend.
4. Optionally, clear those global styles. Then load the block editor.
5. Add a columns block and select columns configuration.
6. Add multiple paragraphs to a single column.
7. Select that column block and play around with all typography styles. They should be applied correctly in the editor and frontend.

Screenshots or screencast

Screen.Recording.2022-08-16.at.6.20.02.pm.mp4

[ramonjd]

✅ In a single column, typography values apply to paragraph and other text blocks correctly in the post editor
✅ In the site editor, setting typography values at both the individual block level, and Global Styles > Blocks > Columns > Typography, the column's text appears as expected (global styles apply to all columns)
✅ Frontend is 1:1 with the editor
✅ Tested in block and classic themes