Extremely rough POC for block-styles (only in the stock-filter block)

[aristath]

trafficstars

This is just a rough proof of concept and should not, under any circumstances, be seriously reviewed. Its only purpose is as an experiment with block-styles. Everything here is hacky because doing things properly would require more time, and I only want to show what's possible and if it makes sense to do some things.

• Deleted contents of assets/js/blocks/stock-filter/style.scss and added compiled CSS manually in assets/css/blocks/stock-filter.css. This should be handled by a webpack task, but for the purpose of this POC it's good enough this way
• In the woocommerce-gutenberg-products-block.php file I'm registering the block-style, and then using the render_block filter enqueue it when needed. This approach is buggy and hacky, but the only quick way to show the benefits without refactoring some things.

Ideally, we'd add a style handle in block.json files and then WP would take over and properly enqueue that when needed. From what I can tell however, this doesn't currently work with the current structure. I did not debug it to figure out why, and instead just hacked the solution mentioned above. If the block.json files work, then all the PHP I added as a workaround can be removed.

I only applied my changes to the stock-filter block so we can test things easier. In this test, the main stylesheet was reduced by ~3kb, and these styles only get loaded when the block exists on the frontend.

cc @Aljullu

[senadir]

Ideally, we'd add a style handle in block.json files and then WP would take over and properly enqueue that when needed. From what I can tell however, this doesn't currently work with the current structure. I did not debug it to figure out why, and instead just hacked the solution mentioned above. If the block.json files work, then all the PHP I added as a workaround can be removed.

Is this proven to work on Gutenberg (somewhere else) or is it a general issue with style in block.json?

[aristath]

Is this proven to work on Gutenberg (somewhere else) or is it a general issue with style in block.json?

It's how all block styles get added in Gutenberg & Core, so proven to work there 👍

[github-actions[bot]]

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

[danielwrobert]

Hi, @aristath 👋

Just dropping a quick note to let you know we haven't forgotten about this! We'll plan to have a deeper look at everything during the next cooldown phase, if not sooner.

Thank you for your work on getting things going here!

[aristath]

Hey there @danielwrobert!

No worries, with the upcoming WP 6.1 release we're currently in panic mode anyway, so this one takes a back seat for a while.

There is great potential to improve things though, so when you have time and come back to exploring this, let me know and we can chat, collaborate and figure out a solution to this issue 👌

[github-actions[bot]]

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

[github-actions[bot]]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[Aljullu]

@aristath given that we have merged https://github.com/woocommerce/woocommerce-blocks/pull/9831, do you think we should close this PR?

Btw, thanks for your work here, it was a great inspiration when working on the other PR! :slightly_smiling_face: