Fluid Font Sizes not working in 6.3 nightly

[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.

[sabernhardt]

#58753 was marked as a duplicate.

[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.

[jastos]

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.

[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

[rose18]

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

[isabel_brison]

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.

[jastos]

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

[jastos]

@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';

[isabel_brison]

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.

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.)

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

[aurooba]

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.

[audrasjb]

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.

[isabel_brison]

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.

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

[isabel_brison]

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.

[joemcgill]

Thanks @isabel_brison. The changes look good to me.

[costdev]

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.

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