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

Navigation Link: Add typography support #44005

Merged
merged 1 commit into from
Sep 12, 2022

Conversation

aaronrobertshaw
Copy link
Contributor

Related:

What?

Adds typography supports to the Navigation Link block.

Why?

  • Improves consistency of our design tools across blocks.
  • Allows typographic styling of custom navigation links independent of the parent Navigation block's styles.

How?

  • Opts into all typography supports.
  • Makes font size control displayed by default as per the majority of blocks currently.

Testing Instructions

  1. In the site editor, edit a template with a Navigation block and add a couple of custom Navigation Links.
  2. Navigate to Global Styles > Blocks > Custom Link > Typography. (Navigation Link block is named Custom Link)
  3. Experiment with typography styles and ensure they are applied to the custom Navigation Link blocks in the preview.
  4. Select one of your custom Navigation Link blocks and open the settings toolbar.
  5. Within the typography panel, configure some overriding styles. These should be reflected in the preview.
  6. Save and confirm styles on the frontend.
  7. For bonus points, you can also test theme.json to be thorough.

Example theme.json snippet:

			"core/navigation-link": {
				"typography": {
					"fontWeight": "100",
					"textTransform": "uppercase"
				}
			}

Screenshots or screencast

Screen.Recording.2022-09-09.at.3.22.45.pm.mp4

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Block] Navigation Link Affects the Navigation Link Block [Feature] Typography Font and typography-related issues and PRs labels Sep 9, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this Sep 9, 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.

Worked as advertised for me:

✅ Could set global styles Custom link typography and this was reflected in site editor and frontend
✅ Could override global styles with block specific styles in editor
✅ Settings added to theme.json were applied

@aaronrobertshaw aaronrobertshaw merged commit 99092c4 into trunk Sep 12, 2022
@aaronrobertshaw aaronrobertshaw deleted the add/typography-supports-to-navigation-link branch September 12, 2022 05:27
@github-actions github-actions bot added this to the Gutenberg 14.1 milestone Sep 12, 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] Navigation Link Affects the Navigation Link 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