Make WordPress Core

Opened 8 months ago

Closed 5 months ago

Last modified 5 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
8 months ago

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

#2 @sabernhardt
8 months ago

#58753 was marked as a duplicate.

#3 in reply to: ↑ description ; follow-up: @rose18
7 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
7 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
7 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

Last edited 7 months ago by jastos (previous) (diff)

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


7 months ago

#7 in reply to: ↑ 5 @rose18
7 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
7 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
7 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
7 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
7 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.


7 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:


7 months ago
#13

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

#14 @aurooba
7 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 7 months ago by aurooba (previous) (diff)

#15 @audrasjb
6 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
6 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:


6 months ago
#17

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

#18 @isabel_brison
6 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.


5 months ago

#20 @joemcgill
5 months ago

  • Keywords fixed-major added

Thanks @isabel_brison. The changes look good to me.

#21 @costdev
5 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
5 months ago

  • Keywords dev-reviewed added; dev-feedback removed

@isabel_brison commented on PR #5006:


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