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

Calendar: Add typography supports (except text-decoration) #43969

Merged
merged 1 commit into from
Sep 8, 2022

Conversation

aaronrobertshaw
Copy link
Contributor

Related:

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

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Block] Calendar Affects the Calendar 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 labels Sep 8, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this Sep 8, 2022
Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

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

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

@aaronrobertshaw aaronrobertshaw merged commit e9c0da7 into trunk Sep 8, 2022
@aaronrobertshaw aaronrobertshaw deleted the add/typography-supports-to-calendar branch September 8, 2022 23:51
@github-actions github-actions bot added this to the Gutenberg 14.1 milestone Sep 8, 2022
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Calendar Affects the Calendar 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