Skip to content

Font Family Picker: allow selecting the "Default" font for all text elements and blocks, which didn't work with some themes#44355

Open
mpkelly wants to merge 1 commit into
WordPress:trunkfrom
mpkelly:update/default-font-family-logic
Open

Font Family Picker: allow selecting the "Default" font for all text elements and blocks, which didn't work with some themes#44355
mpkelly wants to merge 1 commit into
WordPress:trunkfrom
mpkelly:update/default-font-family-logic

Conversation

@mpkelly
Copy link
Copy Markdown
Contributor

@mpkelly mpkelly commented Sep 22, 2022

Quick Summary

This PR makes "Default" a valid font family choice for all themes and for all elements and blocks. What "Default" means depends on where you set it. The inheritance hierarchy looks like this:

Browser default (serif)
  Text
    Blocks that have a `font-family` e.g Quotation
    Links
    Buttons
    All Headings
      H1
	H1 Heading Blocks (e.g. Site Title, Post Title)
      H2
	H2 Heading Blocks 
      H3
	H3 Heading Blocks 
      H4
	H4 Heading Blocks 
      H5
	H5 Heading Blocks 
      H6
	H6 Heading Blocks 

Setting "Default" for H1-H6 means they will use the All Headings font-family. If that is also set to "Default" it will use the Text font-family. If Text is also set to "Default" then it will use the browser default which is normally serif e.g. Times.

I don't think this hierarchy will be clear to all of Gutenberg's users and I have another PR which includes a hint. That Post Title doesn't update when you set the heading it is based on, e.g. H2, is something that caught me out during testing.

What?

  • Allow users to select the "Default" font on themes that specify fontFamily at element or block-level, e.g. Pendant.
  • Update TypographyPanel so it reflects the Editor & Site font-family
  • This PR also links heading elements and blocks. Now, if you set, say, Site Title font to "Default", it will update whenever you change the heading element, e.g. H1, that it is based on.

Why?

  • If you wanted to set your "All" heading font to "X" and then set, say, your H2 to "Default", then you would expect the H2 font-family to use the "X" font, but this didn't work on some themes like Pendant.

How?

The "Default" font value was '' which is removed by the config merge logic and meant the base value was always used if it was present. This PR allows empty values to pass through and means the "Default" font style can be applied from a higher level.

Note: there is a question about using this approach: was the use of cleanEmptyObject intended to stop unnecessary network traffic, or was it for some other reason? An empty value is valid and necessary according to my tests with various Global Style controls, but maybe I missed something. Please check this as part of the review.

Testing Instructions

  1. Using the Pendant theme, try to change a heading style, e.g. H2, to "Default" in the Global Styles > Typography > Headings menu.
  2. Note how it always defaults to "Headings (System Font)". You can try different themes to compare. Disco, for example, does not have this problem because it doesn't specify fontFamily at the element level in themes.json.
  3. Now checkout this branch and start your local dev environment
  4. You should now be able to change heading fonts to "Default, " meaning they use the "All" heading font. If you also set a heading block, like Site Title, to "Default", it will inherit the font from the regular H2 block, which means you can now manage all of your headings via the Global Styles > Typography > Headings menu.
  5. Check any combination of typography styles you can think of for any element or block and verify the TypographyPanel Preview, Editor and Site reflect the styles correctly. I tested with Blockbase, Pendant and Twenty Twenty-Two, plus several others.
  6. Check for regressions. This PR relaxes a check for empty values, which will now show as unsaved changes and be sent to the server.

Screenshots or screencast

Example of the problem (from WordPress.com):

Screen.Capture.on.2565-09-22.at.16-10-48.mp4

…lements and blocks, which didn't work with some themes
@github-actions github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 22, 2022
@github-actions
Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @mpkelly! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant