Block theme incompatibility?

  • Resolved Rolf Allard van Hagen

    (@ravanh)


    2 years ago

    Hi, I’m working on a block theme that sets font sizes like this in theme.json:

    "typography": {
	"dropCap": false,
	"fluid": true,
	"fontFamilies": [ ... ]
	"fontSizes": [
		{
			"fluid": {
				"max": "1rem",
				"min": "0.875rem"
			},
			"size": "1rem",
			"slug": "small"
		},
		{
			"fluid": {
				"max": "1.125rem",
				"min": "1rem"
			},
			"size": "1.125rem",
			"slug": "medium"
		},
		{
			"fluid": {
				"max": "1.625rem",
				"min": "1.5rem"
			},
			"size": "1.5rem",
			"slug": "large"
		},
		{
			"fluid": {
				"max": "2rem",
				"min": "1.75rem"
			},
			"size": "1.75rem",
			"slug": "x-large"
		},
		{
			"fluid": {
				"max": "2.75rem",
				"min": "2rem"
			},
			"size": "2rem",
			"slug": "xx-large"
		}
	]
},

    On non-AMP pages, these are then translated into these global style variables as expected:

    body {
    ...
    --wp--preset--font-size--small: clamp(.875rem,.875rem + ((1vw - .48rem)*0.24),1rem);
    --wp--preset--font-size--medium: clamp(1rem,1rem + ((1vw - .48rem)*0.24),1.125rem);
    --wp--preset--font-size--large: clamp(1.5rem,1.5rem + ((1vw - .48rem)*0.24),1.625rem);
    --wp--preset--font-size--x-large: clamp(1.75rem,1.75rem + ((1vw - .48rem)*0.481),2rem);
    --wp--preset--font-size--xx-large: clamp(2rem,2rem + ((1vw - .48rem)*1.442),2.75rem);
    ...
}

    But on AMP pages, these particular global variables are missing. All other --wp--preset-- variables like colors, spacing and even font families are there, but not font sizes.

    Why is that?

    You can see the result (small post title and content titles) on the shared URL.

    I did notice these in amp-custom.css:

    :root {
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--huge: 42px;
}

    But they are not used anywhere…

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Rolf Allard van Hagen

    (@ravanh)

    I should probably mention this is on WordPress 6.2-RC1

    Plugin Author Weston Ruter

    (@westonruter)

    I believe this issue was also captured in a GitHub issue. It appears due to a limitation in the php-css-parser library that we rely on. Namely, complex CSS values that have nested functions can fail to get parsed. There is an issue reported there, but it hasn’t been getting traction. We may need to put in place a workaround.

    Thread Starter Rolf Allard van Hagen

    (@ravanh)

    Ok, I see…

    Some possible work-around ideas:

    1. Remove rules that use “dropped” variables
    2. Add common variables with fallback values to :root

    Explanations:

    1) In my case example, specifically these rules in amp-custom.css are failing because of their missing varaibles in body{}:

    h1 {
    font-size: var(--wp--preset--font-size--xx-large);
}
h2 {
    font-size: var(--wp--preset--font-size--x-large);
}
...

    If those rules were removed, the browser would default titles to the browser element default (h1/2/3 etc.) instead of the browser common default (16px) or body font size.

    This way, work-around 1 would be better than the current situation, at least for elements like titles.

    2) Extend the :root font size rules that are already there with some commonly used size variables like from the twenty twenty-three theme:

    :root {
    --wp--preset--font-size--small: 14px;
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
    --wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.24), 1.125rem);
    --wp--preset--font-size--large: clamp(1.75rem, 1.75rem + ((1vw - 0.48rem) * 0.24), 1.875rem);
    --wp--preset--font-size--x-large: 2.25rem;
    --wp--preset--font-size--xx-large: clamp(4rem, 4rem + ((1vw - 0.48rem) * 11.538), 10rem);
}
    Thread Starter Rolf Allard van Hagen

    (@ravanh)

    Or maybe best:

    3) Ask the Gutenberg people to try to either simplify or simply wrap the “fluid” calculations like 1.75rem + ((1vw - .48rem)*0.481) in calc(...) so that the parser used for AMP can handle it ??

    Plugin Author Weston Ruter

    (@westonruter)

    I’m looking into a workaround in the AMP plugin itself, or perhaps patching php-css-parser to prevent this issue from happening.

    Plugin Author Weston Ruter

    (@westonruter)

    I’ve opened a pull request with what I believe will fix the issue for you. It updates php-css-parser to include patches from an unmerged pull request that implements parsing of complex expressions. You can try a pre-release build here: https://github.com/ampproject/amp-wp/pull/7487#issuecomment-1470990553

    Plugin Author Weston Ruter

    (@westonruter)

    The pull request was merged and the fix will be included in the next release, which we are planning for this week.

    Thread Starter Rolf Allard van Hagen

    (@ravanh)

    Excellent stuff! Thank you very much for your swift reaction and work! ??

    Plugin Author Weston Ruter

    (@westonruter)

    This is now released on the www.remarpro.com Plugin Directory.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Block theme incompatibility?’ is closed to new replies.