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

Backport: Fluid typography - adjust font size min and max rules (#45536) #3602

Closed

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Nov 10, 2022

Backporting changes in WordPress/gutenberg#45536

Trac ticket: https://core.trac.wordpress.org/ticket/57075

Updates to the fluid typography rules:

  1. Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a clamp() function.
  2. In the absence of any fluid min / max values, we will enforce the lower bound rule of >16px. This applies to custom values from the editor or single-value theme.json styles. Font sizes below this will not be clamped.
  3. In a preset, if a fluid.min value has been specified, the lower bound rule of >16px won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
  4. In a preset, if there is NOT a fluid.max but there is fluid.min, use the incoming "size" value as the max.
  5. In a preset, if there is NOT a fluid.min but there is a fluid.max, use size * min_size_factor as the min. Here we do enforce the lower bound rule of >16px, because Gutenberg is computing the min value. This is consistent with the way we calculate minimum sizes for single or custom values.

Testing

Using theme 2023

Add some text blocks to the editor, apply presets and custom sizes, and ensure they appear as they should in the editor and frontend at various viewport widths.

The size value should act at the upper bound of any clamp value.

Custom font sizes <=14px will not be clamped.

Please test by playing around with:

  1. Font size presets in theme.json
  2. Global styles in theme.json (global, elements, blocks)
  3. Global styles in the site editor (global, elements, blocks)
  4. Typography block supports at the individual block level in the post/side editor

@ramonjd ramonjd changed the title Fluid typography: adjust font size min and max rules Backport: Fluid typography - adjust font size min and max rules (#45536) Nov 10, 2022
@ramonjd
Copy link
Member Author

ramonjd commented Nov 10, 2022

Failing PHPUnit 7.1 tests look unrelated

- Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a clamp() function.
- Do not clamp value if a font size is lower than 14px
- Always honor a supplied fluid.min value, the lower bound of 14px notwidthstanding
@ramonjd ramonjd force-pushed the update/typography-fluid-min-max-rules branch from 8411dff to f59408e Compare November 10, 2022 21:14
@annezazu
Copy link

@hellofromtonya might you be able to help with this?

@@ -452,6 +452,7 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
* formula depending on available, valid values.
*
* @since 6.1.0
* @since 6.1.1 Adjusted min a
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like this is an incomplete update. @ramonjd could you adjust this?

Copy link
Member Author

Choose a reason for hiding this comment

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

Sorry, just saw this. Thanks @desrosj

I see this PR has been merged. Should I open a new one to update the comment?

Copy link
Member Author

Choose a reason for hiding this comment

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

@desrosj
Copy link
Contributor

desrosj commented Nov 11, 2022

Merged in https://core.trac.wordpress.org/changeset/54823.

@desrosj desrosj closed this Nov 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
3 participants