Block API: Add viewStyle property support to block.json

[gaambo]

What?

This PR adds the viewStyle property to the block.json schema, the documentation for block meta data and also enabled using it in the create-block package.
It's the Gutenberg part to the track ticket 59673. See also the Gutenberg issue #54491.

Why?

See issue #54491. The code to register and enqueue the viewStyles happens in core and on trac. In Gutenberg the block.json schema and documentation needs to be changed.

How?

Block metadata
Add property to JSON schema, add property to documentation about block metadata.

@wordpress/create-block
Add property as configurable in create-block, but don't use it by default, because most simple blocks won't need it. But creators of create-block templates can use it. That's also how the viewScript property is handled as far as I can see.

@wordpress/scripts
As far as I can see, no changes in the @wordpress/scripts package are necessary, since just using a view.js which imports a view.scss (for example) works out of the box and can be set. If the view.js is in the block.json, it's automatically recognized by the webpack config.

Testing Instructions

The Gutenberg part alone has no functional changes per se. Only the schema changes, which helps in IDEs and for validation of block.json.

Regarding the create-block part: That actually adds functionality, in that a template can set a viewStyle property - I guess? But I'm not 100 percent certain, how to test that. I probably would need to create a new template type? Anybody knows?

[fabiankaegy]

I would like to change the status of this PR to draft till the actual change to add the viewStyle property was actually merged

[gziolo]

One important consideration when documenting viewStyle would be emphasizing the actual use cases or better the thought process when to use it. One thing to speaks to me is explaining that it applies to the CSS necessary to render these parts of the block that will ever become interactive on the front end after uses performs some action. In effect, they should never be needed in the editor's context even when using the preview mode. Well, unless we change in the future how the preview mode works.

[gziolo]

All the necessary changes for WordPress core are ready to review in WordPress/wordpress-develop#5531. I have just tested, and there are no changes necessary for wp-scripts build as noted in https://core.trac.wordpress.org/ticket/59673#comment:4.

[gaambo]

@gziolo

One important consideration when documenting viewStyle would be emphasizing the actual use cases or better the thought process when to use it. One thing to speaks to me is explaining that it applies to the CSS necessary to render these parts of the block that will ever become interactive on the front end after uses performs some action. In effect, they should never be needed in the editor's context even when using the preview mode. Well, unless we change in the future how the preview mode works.

I've put a more detailed explanation to the property documentation in block-metadata.md. I also thought about adding a section further down below, explaining the different style/script properties and when to use them. But maybe this would be better suited for the how-to guide for scripts and stylesheets?

[gziolo]

I would like to change the status of this PR to draft till the actual change to add the viewStyle property was actually merged

The changes on the WordPress Core side are ready. See https://core.trac.wordpress.org/ticket/59673 for details. There are some merge conflicts to resolve, so this branch needs to be updated with the latest changes from trunk.

Do we want to add support for viewStyle when using Gutenberg with WordPress 6.4 and 6.3, which are currently supported by the plugin?

[gaambo]

I just rebased and committed the suggestions from your side.

I've marked the PR for review and am happy to add any further documentation or testing if needed.

[gziolo]

@fabiankaegy, do you think we have enough to land it?

[fabiankaegy]

@gziolo This looks good to me and I think it is enough to land it 👍