Pattern code with json-styled variable paths is not acceptable, producing error #69477
Description
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