[wp-trac] [WordPress Trac] #59673: Add viewStyle block.json property for frontend-only block styles

[WordPress Trac]

#59673: Add viewStyle block.json property for frontend-only block styles
--------------------------------------+------------------------------
 Reporter:  gaambo                    |       Owner:  (none)
     Type:  enhancement               |      Status:  new
 Priority:  normal                    |   Milestone:  Awaiting Review
Component:  Editor                    |     Version:
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:
--------------------------------------+------------------------------

Comment (by gaambo):

 I've added a PR which adds the `viewStyle` handling to core.

 - Added asset handle generation and asset registering
 - Added asset enqueueing in the frontend
 - Added property to REST API for blocks
 - Added php unit tests

 == How to test
 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 git at github.com: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.

 == TODO
 - In Gutenberg we need to add the `viewStyle` property to the block.json
 schema. See GitHub issue
 https://github.com/WordPress/gutenberg/issues/54491
 - At the moment there are no e2e/phpunit tests which check if
 `viewStyle`/`viewScript` get only enqueued in the frontend. Should I add
 tests for that? And if yes, could someone help me where they have to go?
 Are those e2e? Are there some other tests testing the rendering of blocks?
 - I didn't add any special handling for core blocks, since no core block
 uses `viewStyle` obviously. But in the future that might be the case. So I
 think the phpunit tests checking for the correct core styles to be loaded
 in regard to `should_load_separate_core_block_assets` must be adapted. But
 I'm not fully sure I understand those. Maybe someone can help me with
 that.
 - The checks in GitHub seem to fail but running `composer run lint`
 locally and manually for the changed files shows no errors in my changes.
 Need to check that.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59673#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform