Pattern code with json-styled variable paths is not acceptable, producing error

[EldarAgalarov]

Description

For example, I want to style border-radius using variable defined in theme.json. Using CSS-styled path var(--wp--custom--border-radius--large) works ok:

<!-- wp:group {"style":{"border":{"radius":"var(--wp--custom--border-radius--large)"}},"backgroundColor":"brand-accent-1","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-brand-accent-1-background-color has-background" style="border-radius:var(--wp--custom--border-radius--large)"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

But using json-styled variable path var:custom|border-radius|large produces error that block contains invalid content:

<!-- wp:group {"style":{"border":{"radius":"var:custom|border-radius|large"}},"backgroundColor":"brand-accent-1","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-brand-accent-1-background-color has-background" style="border-radius:var(--wp--custom--border-radius--large)"><!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Step-by-step reproduction instructions

.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[carolinan]

Hi
Can you share the information from the validation error?

[EldarAgalarov]

Hi Can you share the information from the validation error?

[carolinan]

I apologize for being unclear, I meant the JavaScript error in the browser console.

blocks.js?ver=6a8234334dbdc1fec346:11937 Block validation: Block validation failed for `core/group` ({name: 'core/group', icon: {…}, keywords: Array(4), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<div class="wp-block-group has-brand-accent-1-background-color has-background" style="border-radius:var:custom|border-radius|large"></div>

Content retrieved from post body:

<div class="wp-block-group has-brand-accent-1-background-color has-background" style="border-radius:var(--wp--custom--border-radius--large)"></div>

[carolinan]

Can you share how your custom var is added under "custom" in theme.json?

[EldarAgalarov]

Hi @carolinan

I have following error trace from the console:

Block validation: Block validation failed for `core/group` ( 
Object { name: "core/group", icon: {…}, keywords: (4) […], attributes: {…}, providesContext: {}, usesContext: [], selectors: [], supports: {…}, styles: [], blockHooks: [], … }
​
__experimentalLabel: function __experimentalLabel(e)
​
apiVersion: 3
​
attributes: Object { tagName: {…}, templateLock: {…}, allowedBlocks: {…}, … }
​
blockHooks: Array []
​
category: "design"
​
deprecated: Array(5) [ {…}, {…}, {…}, … ]
​
description: "Gather blocks in a layout container."
​
edit: function Gu()
​
example: Object { attributes: {…}, innerBlocks: (4) […], viewportWidth: 600 }
​
icon: Object { src: {…} }
​
keywords: Array(4) [ "container", "wrapper", "row", … ]
​
name: "core/group"
​
providesContext: Object {  }
​
save: function save()
​
selectors: Array []
​
styles: Array []
​
supports: Object { __experimentalOnEnter: true, __experimentalOnMerge: true, __experimentalSettings: true, … }
​
title: "Group"
​
transforms: Object { from: (1) […] }
​
usesContext: Array []
​
variations: Array(4) [ {…}, {…}, {…}, … ]
​
<prototype>: Object { … }
 ).

Content generated by `save` function:

<div class="wp-block-group has-brand-accent-1-background-color has-background" style="border-radius:var:custom|border-radius|large"></div>

Content retrieved from post body:

<div class="wp-block-group has-brand-accent-1-background-color has-background" style="border-radius:var(--wp--custom--border-radius--large)"></div> blocks.min.js:19:26898

My custom vars added following way (there are no errors in theme.json, all content are valid according to json schema):

{	
	"settings": {		
		"custom": {			
			"borderRadius": {
				"large": "clamp(0.625rem, 0.4808rem + 0.641vw, 1.25rem)"
			}
		}
	}
}

[t-hamano]

To me, this seems like a bug, because border-style, border-color, and border-width do not cause such a block validation error.

<!-- wp:paragraph {"style":{"border":{"color":"var:custom|test","width":"var:custom|test","style":"var:custom|test"}}} -->
<p class="has-border-color" style="border-color:var(--wp--custom--test);border-style:var(--wp--custom--test);border-width:var(--wp--custom--test)">Hello World</p>
<!-- /wp:paragraph -->

The problem occurs only with border-radius.