Add pre 6.5 compat for viewStyles

[gaambo]

What?

Closes #54491.

This is a follow-up to #55492 and the related commit in core. It provides support for the new viewStyle block metadata property to sites running core versions < 6.5 but the newest Gutenberg version.

Why?

Since the Gutenberg plugin should provide support for the two latest WordPress versions and the code in the Gutenberg repository has the documentation about the new property, it may makes sense to also provide this functionality to sites running older core versions but the newest plugin.
The same thing was done for the viewModules field in #57437.

This also allows core blocks to use the new viewStyle field in the future and makes it work on older core sites as well.

How?

The code just directly copies what core does in 6.5+. Unfortunately the functions register_block_style_handle and generate_block_asset_handle had to be copied and changed, because otherwise the new postfix (view-style) would not have been appended or the style handle name would be wrong.
The handles are generated/registered on block_type_metadata_settings (just like in core) and enqueued on render_block (just like core).
The field has also been added to the rest api.

Testing Instructions

To test this, use the gutenberg plugin on a WordPress 6.4/6.3 instance (eg locally by using .wp-env.override.json and adding "core": "WordPress/WordPress#6.4",).

Original testing instructions:

I've created a simple test block which uses the new property here: https://github.com/gaambo/test-block-viewStyle

1. cd src/wp-content/plugins && git clone [email protected]:gaambo/test-block-viewStyle.git
2. npm run dev
3. npm run env:start && npm run env:install
4. Enable the "Test Block" plugin
5. Create a new post and insert the "Test block"
6. In the editor the block should have a green background (as set in the editorStyle editor.scss)
7. Save the post. In the frontend the block should have a red background (as set in the viewStyle view.scss)

You can't check the network tab in developer tools for loaded assets, since both are so small and are inlined.

Alternative: Use your custom block and add a viewStyle property in block.json. The property has the same schema as style and editorStyle - so a singular string or array is allowed and style handles as well as file: links to files. See the test block repository above for an example.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @chimok.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: chimok.

Co-authored-by: gaambo <[email protected]>
Co-authored-by: gziolo <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[gaambo]

wordpress-playground.zip
Here's an export from WordPress playground. You can import it there and go to /?p=6/ URL and see the viewStyle loaded.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: [Feature] Block API, [Type] New API, Backport from WordPress Core.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[gziolo]

wordpress-playground.zip Here's an export from WordPress playground. You can import it there and go to /?p=6/ URL and see the viewStyle loaded.

That was very helpful as I was able to confirm everything works as expected with WP 6.4 using my phone 🎉 I'll review the code later but overall it should be in good shape already. Thank you for adding the compat layer.

[gziolo]

Nice work, @gaambo. You had to copy some functionality from WP core, but I like how you guarded it with the check and removed unrelated logic 👍🏻

There are two nitpicks to address before committing. I'm not sure why CI complains about the wrong labels. @priethor, any insights?

[gaambo]

@gziolo Thanks, just pushed a commit with the feedback applied 👍