Make WordPress Core

Opened 2 weeks ago

Closed 2 weeks ago

#57075 closed defect (bug) (fixed)

Fluid typography fixes for 6.1.1

Reported by: desrosj's profile desrosj Owned by: desrosj's profile desrosj
Milestone: 6.1.1 Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch has-unit-tests fixed-major
Focuses: Cc:

Description

This ticket is for tracking fluid typography bug fixes independent from dependencies (within PHP code).

Change History (5)

This ticket was mentioned in PR #3602 on WordPress/wordpress-develop by @ramonopoly.


2 weeks ago
#1

  • Keywords has-unit-tests added

Backporting changes in https://github.com/WordPress/gutenberg/pull/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

#2 @desrosj
2 weeks ago

  • Owner set to desrosj
  • Resolution set to fixed
  • Status changed from new to closed

In 54823:

Editor: Improve how min/max font sizes are calculated for fluid typography.

  • 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.
  • In the absence of any fluid min/max values, the lower bound rule of >16px will be enforced. This applies to custom values from the editor or single-value theme.json styles. Font sizes below this will not be clamped.
  • 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.
  • In a preset, if there is NOT a fluid.max but there is fluid.min, use the incoming "size" value as the max.
  • In a preset, if there is NOT a fluid.min but there is a fluid.max, use size * min_size_factor as the min. The lower bound rule of >16px is enforced here, because the block editor is computing the min value. This is consistent with the way minimum sizes are calculated for single or custom values.

Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Fixes #57075.

#4 @desrosj
2 weeks ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backporting to 6.1.1.

#5 @desrosj
2 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 54825:

Editor: Improve how min/max font sizes are calculated for fluid typography.

  • 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.
  • In the absence of any fluid min/max values, the lower bound rule of >16px will be enforced. This applies to custom values from the editor or single-value theme.json styles. Font sizes below this will not be clamped.
  • 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.
  • In a preset, if there is NOT a fluid.max but there is fluid.min, use the incoming "size" value as the max.
  • In a preset, if there is NOT a fluid.min but there is a fluid.max, use size * min_size_factor as the min. The lower bound rule of >16px is enforced here, because the block editor is computing the min value. This is consistent with the way minimum sizes are calculated for single or custom values.

Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Merges [54823] to the 6.1 branch.
Fixes #57075.

Note: See TracTickets for help on using tickets.