Make WordPress Core

Opened 12 months ago

Closed 10 months ago

Last modified 9 months ago

#58754 closed defect (bug) (fixed)

Fluid Font Sizes not working in 6.3 nightly

Reported by: jastos's profile jastos Owned by: costdev's profile costdev
Milestone: 6.3.2 Priority: normal
Severity: normal Version: 6.3
Component: Editor Keywords: has-patch has-unit-tests fixed-major dev-reviewed
Focuses: Cc:

Description (last modified by sabernhardt)

Fluid typography works in 6.2.2 with this is theme.json:

"typography":{
  "fluid": true,
    "fontSizes":[
      {
        "slug":"normal",
	"name":"Normal",
	"size":"16px",
	"fluid": {
	  "min": "15px",
	  "max": "20px"
	}
     ]
}

In 6.3 the fluid typography seems to be ignored.

Change History (23)

#1 @sabernhardt
12 months ago

  • Component changed from General to Editor
  • Description modified (diff)
  • Version set to trunk

#2 @sabernhardt
12 months ago

#58753 was marked as a duplicate.

#3 in reply to: ↑ description ; follow-up: @rose18
11 months ago

I am experiencing the same thing, do you have a solution to this? Thanks!

Replying to jastos:

Fluid typography works in 6.2.2 with this is theme.json:

"typography":{
  "fluid": true,
    "fontSizes":[
      {
        "slug":"normal",
	"name":"Normal",
	"size":"16px",
	"fluid": {
	  "min": "15px",
	  "max": "20px"
	}
     ]
}

In 6.3 the fluid typography seems to be ignored.

#4 in reply to: ↑ 3 @jastos
11 months ago

No solution yet. I just tested this with a fresh install of the Twenty Twenty-Three theme (which uses fluid font sizes) and they are not working.

Replying to rose18:

I am experiencing the same thing, do you have a solution to this? Thanks!

Replying to jastos:

Fluid typography works in 6.2.2 with this is theme.json:

"typography":{
  "fluid": true,
    "fontSizes":[
      {
        "slug":"normal",
	"name":"Normal",
	"size":"16px",
	"fluid": {
	  "min": "15px",
	  "max": "20px"
	}
     ]
}

In 6.3 the fluid typography seems to be ignored.

#5 follow-up: @jastos
11 months ago

It looks like the issue has to do with having a fluid layout is what breaks fluid typography:

"layout":{

"contentSize":"clamp(1076px, 80vw, 1716px),
"wideSize":"clamp(1076px, 85vw, 2120px)"

}

If you switch layout to static values it works:

"layout":{

"contentSize":"1800px",
"wideSize":"2200px"

}

This was not the case in 6.2

Version 0, edited 11 months ago by jastos (next)

This ticket was mentioned in Slack in #core by jastos. View the logs.


11 months ago

#7 in reply to: ↑ 5 @rose18
11 months ago

My layout values are static and it's still not working. Any clue?
Replying to jastos:

It looks like the issue has to do with having a fluid layout is what breaks fluid typography:

"layout":{
  "contentSize":"clamp(1076px, 80vw, 1716px),
  "wideSize":"clamp(1076px, 85vw, 2120px)"
}

If you switch layout to static values it works:

"layout":{
  "contentSize":"1800px",
  "wideSize":"2200px"
}

This was not the case in 6.2

#8 @isabel_brison
11 months ago

  • Milestone changed from Awaiting Review to 6.3.1

Thanks for the report @jastos ! I can reproduce this by changing the wideSize value in theme.json to a fluid value. Looking into it now.

#9 @jastos
11 months ago

Thank you @isabel_brison. Pretty sure it has to do with the work being done here:
https://github.com/WordPress/WordPress/blob/master/wp-includes/block-supports/typography.php

#10 @jastos
11 months ago

@rose18

I would take a look at the file above and see what was changed for 6.3. The problem in my case was the June 20th commit:

https://github.com/WordPress/WordPress/commit/b4a8c95238e8e2eb4bcdefd169ab2166b2babfb8

$default_maximum_viewport_width       = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px';

I think using clamp must break the calculation somewhere. Changing back to this lets clamp work again with a fluid layout:

$default_maximum_viewport_width   = '1600px';

#11 @isabel_brison
11 months ago

I have a fix for this here: https://github.com/WordPress/gutenberg/pull/53551. It will need manual syncing of the PHP changes to core; we can use this ticket to track that.

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


11 months ago
#12

  • Keywords has-patch has-unit-tests added

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

Adds the PHP changes from https://github.com/WordPress/gutenberg/pull/53551 and https://github.com/WordPress/gutenberg/pull/53554 to core.

To test: using Twenty Twenty Three or another block theme with fluid typography enabled, change the value of settings.layout.wideSize in theme.json to use a fluid value such as clamp(1000px, 85vw, 2000px). Check that font sizes remain fluid in the front end. (For the editor part, an npm package update will be required; that will be done separately.)

@isabel_brison commented on PR #5006:


11 months ago
#13

Thanks for the reviews folks! Looks like all the tests are passing now.

#14 @aurooba
11 months ago

I can also confirm that this issue occurs even if you have static values for your layout. Layout settings in my theme.json:

"contentSizes": {

"default": "650px",
"wide": "1200px"

},

But this breaks the fluid typography and we see only static values instead of clamped values on the front-end.

Edit: having css variables in contentSizes is what was breaking it for us. And those CSS variables are technically dynamic, so I see the problem. Replacing it with true static values does fix the issue on our end.

Last edited 11 months ago by aurooba (previous) (diff)

#15 @audrasjb
11 months ago

  • Milestone changed from 6.3.1 to 6.3.2

WP 6.3.1 is going to be released in the next few days, so let's move this ticket to 6.3.2 to give it more time to be committed and backported.

#16 @isabel_brison
11 months ago

In 56503:

Editor: Don't use fluid layout value in typography.

Changes fluid typography calculation to use fallback value if layout wide size is a fluid value.

Props ramonopoly, mukesh27, jastos, aurooba.
See #58754.

@isabel_brison commented on PR #5006:


11 months ago
#17

Committed to trunk inr56503; leaving this PR open for commit to the 6.3 release branch.

#18 @isabel_brison
11 months ago

  • Keywords dev-feedback added

The fix from https://github.com/WordPress/wordpress-develop/pull/5006 has now been committed to trunk; waiting for second committer review for the release branch.

This ticket was mentioned in Slack in #core by joemcgill. View the logs.


10 months ago

#20 @joemcgill
10 months ago

  • Keywords fixed-major added

Thanks @isabel_brison. The changes look good to me.

#21 @costdev
10 months ago

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

In 56737:

Editor: Don't use fluid layout value in typography.

Changes fluid typography calculation to use fallback value if layout wide size is a fluid value.

Props ramonopoly, mukesh27, jastos, aurooba.
Merges [56503] to the 6.3 branch.
Fixes #58754.

#22 @costdev
10 months ago

  • Keywords dev-reviewed added; dev-feedback removed

@isabel_brison commented on PR #5006:


9 months ago
#23

Closing as this was committed to the 6.3 branch in https://core.trac.wordpress.org/changeset/56737

Note: See TracTickets for help on using tickets.