Title: Block theme incompatibility? Last modified: March 10, 2023 --- # Block theme incompatibility? * Resolved [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/) * (@ravanh) * [3 years, 3 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/) * Hi, I’m working on a block theme that sets font sizes like this in theme.json: * ```wp-block-code "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: * ```wp-block-code 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: * ```wp-block-code :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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fblock-theme-incompatibility%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 9 replies - 1 through 9 (of 9 total) * Thread Starter [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/) * (@ravanh) * [3 years, 3 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16546968) * I should probably mention this is on WordPress 6.2-RC1 * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [3 years, 3 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16548386) * I believe this issue was also captured in a [GitHub issue](https://github.com/ampproject/amp-wp/issues/7291). 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](https://github.com/sabberworm/PHP-CSS-Parser/issues/388) reported there, but it hasn’t been getting traction. We may need to put in place a workaround. * Thread Starter [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/) * (@ravanh) * [3 years, 3 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16549856) * 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{}: * ```wp-block-code 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: * ```wp-block-code :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](https://wordpress.org/support/users/ravanh/) * (@ravanh) * [3 years, 3 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16549943) * 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 🙂 - This reply was modified 3 years, 3 months ago by [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/). * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [3 years, 2 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16555643) * 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](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [3 years, 2 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16564208) * 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](https://github.com/ampproject/amp-wp/pull/7487#issuecomment-1470990553) * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [3 years, 2 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16577852) * 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](https://wordpress.org/support/users/ravanh/) * (@ravanh) * [3 years, 2 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16581175) * Excellent stuff! Thank you very much for your swift reaction and work! 🙂 * Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/) * (@westonruter) * [3 years, 2 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16586094) * This is now released on the WordPress.org Plugin Directory. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Block theme incompatibility?’ is closed to new replies. * ![](https://ps.w.org/amp/assets/icon.svg?rev=2527602) * [AMP](https://wordpress.org/plugins/amp/) * [Frequently Asked Questions](https://wordpress.org/plugins/amp/#faq) * [Support Threads](https://wordpress.org/support/plugin/amp/) * [Active Topics](https://wordpress.org/support/plugin/amp/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/amp/unresolved/) * [Reviews](https://wordpress.org/support/plugin/amp/reviews/) * 9 replies * 2 participants * Last reply from: [Weston Ruter](https://wordpress.org/support/users/westonruter/) * Last activity: [3 years, 2 months ago](https://wordpress.org/support/topic/block-theme-incompatibility/#post-16586094) * Status: resolved