1.3.9: clamp() is no longer recognized in “contentSize” or “wideSize” in theme.json

[pagelab]

Description

In v1.3.8 of the Gutenberg plugin, it is possible to add a clamp() function in the contentSize and/or wideSize options of theme.json for variable content width. In version 1.3.9 this is no longer possible as values are not recognized.

Step-by-step reproduction instructions

• Using a block theme, edit a post and choose wide width for any block that offers this option.
• Navigate to this post on the frontend and verify that both wide and content widths are set correctly.
• Now, install and activate Gutenberg Nightly in Plugins → Add new.
• Edit theme.json and add any clamp() value to contentSize and wideSize.
• Reload the post on the front end and verify that the content incorrectly takes up the entire width of the page and that max-width values are missing from the CSS file.

Here's the value used in the example:

		"layout": {
			"contentSize": "clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem)",
			"wideSize": "clamp(54.00rem, calc(48.00rem + 15.00vw), 60.00rem)"
		}

Screenshots, screen recording, code snippet

Screen-Recording-2022-08-03-17-20-54.mp4

Environment info

• WordPress version 6.0.1 with Twenty Twenty-Two 1.2
• Gutenberg Nightly plugin (v. 13.9.20220803)
• Desktop (Mac), tested on all modern browsers

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[glendaviesnz]

@ramon, @aristath it looks like the issue might have been introduced by #42452 - have verified that prior to this commit the clamp width values are output as expected.

[andrewserong]

Thanks for reporting this issue! I believe it's because as of #42452 the value is being run through safecss_filter_attr on this line:

gutenberg/packages/style-engine/class-wp-style-engine-css-declarations.php

Line 133 in 2f7e2cd

$filtered_declaration = esc_html( safecss_filter_attr( "{$property}:{$spacer}{$value}" ) );

There's an open Trac ticket that's looking into adding support for min, max, minmax, and clamp which should resolve this issue in the longer term in core: https://core.trac.wordpress.org/ticket/55966

In the shorter-term, it looks like we might need to come up with a workaround and/or a custom implementation of the value filtering in the style engine so that there's sorts of values aren't stripped.

I'm happy to hack around to see if we can come up with a workaround.

[aristath]

I ran into some similar issues when trying to implement the style-engine for global-styles, so in #42893 I have included some fixes for this to account for CSS vars, display:flex, min(), max(), clamp() in values.

[aristath]

I submitted a separate PR in #42968 to fix this 👍