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

Latest Posts: Add typography supports #43540

Merged
merged 1 commit into from
Aug 26, 2022

Conversation

aaronrobertshaw
Copy link
Contributor

Related:

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

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Block] Latest Posts Affects the Latest Posts 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 Aug 24, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this Aug 24, 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.

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

@aaronrobertshaw aaronrobertshaw merged commit 03d6d85 into trunk Aug 26, 2022
@aaronrobertshaw aaronrobertshaw deleted the add/typography-supports-to-latest-posts branch August 26, 2022 00:02
@github-actions github-actions bot added this to the Gutenberg 14.1 milestone Aug 26, 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] Latest Posts Affects the Latest Posts 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