Custom Block, theme.json definitions not loaded with latest RC Gutenberg Plugin

[SGr33n]

Description

Hi,
I'm just trying the latest Gutenberg RC and I can see that something is not working anymore.
The issue is that I created a custom excerpt block, called theme/single-post-excerpt and I added some css to the theme.json:

"theme/single-post-excerpt": { "typography": { "lineHeight": "var(--wp--custom--typography--line-height--small)", "fontSize": "var(--wp--preset--font-size--large)", "fontWeight": "500" } }

That definitions works good on the latest WP 6.0.1 but if I install the latest Gutenberg RC they are ignored.

Step-by-step reproduction instructions

Create a custom block.
Add css definitions for that block on the theme.json
Check if they are applied.

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

[talldan]

Hi @SGr33n, would you be able to provide some more detailed steps for reproduction. Either fuller code snippets that a developer can paste, or a link to another repo/plugin that has the problem. Thanks.

[SGr33n]

Hi @talldan!
Sure, how can I send you my code?
Or I could enable you on a staging environment with this issue already on.

[t-hamano]

I was able to reproduce it.

Test Code

plugins/my-custom-block/src/index.js

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import metadata from './block.json';

registerBlockType( metadata.name, {
	edit: () => <p { ...useBlockProps() }>My Custom  Block</p>,
	save: () => <p { ...useBlockProps.save() }>My Custom Block</p>,
} );

plugins/my-custom-block/src/block.json

{
	"apiVersion": 2,
	"name": "create-block/test-block",
	"title": "My Custom Block",
	"category": "text",
	"textdomain": "test-block",
	"editorScript": "file:./index.js"
}

themes/twenty-twenty-two/theme.json

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/heading": {
				"border": {
					"width": "3px",
					"color": "#f00",
					"style": "solid"
				},
				"color": {
					"text": "#fff",
					"background": "#000"
				}
			},
			"create-block/test-block": {
				"border": {
					"width": "3px",
					"color": "#f00",
					"style": "solid"
				},
				"color": {
					"text": "#fff",
					"background": "#000"
				}
			}
		}
	}
}

My test results show that when I activate the latest Gutenberg, the styles defined in theme.json aren't applied to the custom block only on the front-end.

d3401bd253dff73a7de297ef614c1343.mp4

[SGr33n]

@t-hamano exactly what happened to me.

[t-hamano]

@SGr33n
Thank you for the reply.
I believe #44053 will fix this issue.

[t-hamano]

On behalf of #44053, #44018 will fix this issue.

[t-hamano]

@SGr33n
This issue should have been resolved by #44018, so I would like to close this issue.
If you have any issues, please feel free to reopen.

[SGr33n]

Sure, thanks @t-hamano !