theme json, fluid font sizes : what is the preferred size used for ?

  • Resolved charlie67p

    (@charlie67p)


    3 months ago

    Hi,

    In the block theme json, using fluid typography, I do not understand what is the ”size” used for…

    I’ve read here (https://fullsiteediting.com/lessons/theme-json-font-size/) that it is the ”preferred size”, but what means ”preferred”?

    "typography": {
    	"fluid": true,
    	"fontSizes": [
    		{
    			"size": "1rem",
    			"fluid": {
    				"min": "1rem",
    				"max": "2rem"
    			},
    			"slug": "test1",
    			"name": "test1"
    		}
    	]
    }

    Here when I change ”size” from 1rem to 1.5rem, or to 2rem, or to 3rem : the generated Css is always the same…

    So what is it for ? When is it used ?

    Thanks

    • This topic was modified 3 months ago by charlie67p.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Lucian Padureanu

    (@lucianwpwhite)

    2 months, 4 weeks ago

    Hello @charlie67p

    The size value in your example (most certainly) acts as the fallback value when fluid typography cannot be calculated or when the viewport is at the exact breakpoint where min = max.

    However, in your specific example, you wont see any difference when changing size because you’ve explicitly defined both min and max values in the fluid object. When both are present, WordPress uses those values to generate the clamp() function and ignores the size value for the fluid calculation.

    “size” only matters when using fluid as true without specifying a min and/or max. WordPress will then calculate min/max values based on the “size” using default fluid typographic scale.

    I think this should be useful for your question – https://developer.ww.wp.xz.cn/block-editor/how-to-guides/themes/global-settings-and-styles/#typography

    Hope this clarifies things!

    Thread Starter charlie67p

    (@charlie67p)

    2 months, 4 weeks ago

    Hi @lucianwpwhite , thanks for your answer,

    ”when fluid typography cannot be calculated”
    >> does it means : when the browser is too old to calculate/understand clamp Css ?

    “size only matters when using fluid as true without specifying a min and/or max”
    >> so in this case, as I specify the min and the max, why should I keep the line “size:1rem” ? I mean if it’s useless, the following should work…

    "typography": {
    	"fluid": true,
    	"fontSizes": [
    		{
    			"fluid": {
    				"min": "1rem",
    				"max": "2rem"
    			},
    			"slug": "test1",
    			"name": "test1"
    		}
    	]
    }

    I am not sure to fully understand how it works.

    • This reply was modified 2 months, 4 weeks ago by charlie67p.
    Lucian Padureanu

    (@lucianwpwhite)

    2 months, 4 weeks ago

    @charlie67p Yep, exactly – older browsers that don’t support CSS clamp() would fall back to the size value..

    About omitting the size field: technically your code without size might work, but WordPress’s theme.json expects that field to be there. Omitting it could cause validation warnings or unexpected behavior in the block editor

    Just keep the size field and set it to your max value. this ensures fallback support and “keeps WordPress happy”.

    {
    "size": "2rem",
    "fluid": {
    "min": "1rem",
    "max": "2rem"
    },
    "slug": "test1",
    "name": "test1"
    }

    Thread Starter charlie67p

    (@charlie67p)

    2 months, 4 weeks ago

    ah, now it sounds clear to me ! Thanks @lucianwpwhite

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Tags