Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Column Block: Adopt typography supports #43252

Merged
merged 1 commit into from
Aug 16, 2022

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented Aug 16, 2022

Related:

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

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Block] Columns Affects the Columns Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Aug 16, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this Aug 16, 2022
@aaronrobertshaw aaronrobertshaw added the [Feature] Typography Font and typography-related issues and PRs label Aug 16, 2022
Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen Shot 2022-08-16 at 8 06 38 pm

✅ 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

@aaronrobertshaw aaronrobertshaw merged commit 920394b into trunk Aug 16, 2022
@aaronrobertshaw aaronrobertshaw deleted the add/column-typography-support branch August 16, 2022 10:11
@github-actions github-actions bot added this to the Gutenberg 14.0 milestone Aug 16, 2022
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Typography Font and typography-related issues and PRs Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants