Make WordPress Core

Opened 6 weeks ago

Closed 5 weeks ago

Last modified 5 weeks ago

#63404 closed defect (bug) (invalid)

Incorrect endValue for font weights

Reported by: greenskin43's profile greenskin43 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 6.8
Component: Editor Keywords:
Focuses: Cc:

Description

The theme.json documentation for Typography font faces states a range of CSS font-weight values can be used. However the editor logic that builds the options for the font weight appearance control uses the 2nd value from the list as the endValue. See getFontStylesAndWeights() in wp-includes/js/dist/block-editor.js:

let [startValue, endValue] = face.fontWeight.split(' ');

Change History (2)

#1 @sourav08
6 weeks ago

Hello @greenskin43 , Welcome to WordPress Core Trac

The current implementation, while it may appear imprecise at first glance, does correctly handle variable font weight ranges like "100 900".

Here’s what it does:

  1. It parses the first digit of the start and end values (e.g., "100" → 1, "900" → 9).
  1. It then uses a loop from startValue to endValue and multiplies by 100 during formatting:
const fontWeightValue = `${i.toString()}00`;

So for a range like "100 900", the loop iterates from 1 to 9, and produces values "100", "200", ..., "900" — which is correct.

The special case for "1000" converting to 10 is also handled explicitly to support rare variable font cases (e.g., 1000 weight).

While this approach could be made more robust by directly parsing the full numeric values (parseInt(startValue) and parseInt(endValue)), the current logic is functionally correct and does generate the appropriate weight values for editor controls.

Please let me know if there are any other concerns related to this? Thanks

#2 @greenskin43
5 weeks ago

  • Resolution set to invalid
  • Status changed from new to closed

Thanks @sourav08, I understood that from the code before. What I just learned was that font-weight ranges consist of only two values, a start and an end. We were under the impression one could specify each font weight we wanted and that would be the "range", e.g., 100 200 300 400 500 600 700 800 900. In this case the current code would interpret 200 as the end value, which is what I originally described as the issue. However after looking closer at CSS font-face font-weight it does say the value can be either a single number or a pair of numbers. A list of numbers isn't actually supported.

Thanks!

Last edited 5 weeks ago by greenskin43 (previous) (diff)
Note: See TracTickets for help on using tickets.