tl;dr
As part of our initiative to enhance the Store Editing experience to allow for no-code customization, we are making some improvements to the way WooCommerce Blocks enqueues its stylesheets.
Starting from WooCommerce Blocks 10.7 (released on July 18th) and WooCommerce core 8.1 (expected to be released on August 21st), WooCommerce Blocks will stop using one single stylesheet for the styles of all blocks. Instead, each block will enqueue its own stylesheet when the block is rendered. This will bring performance improvements to all stores, but might impact stores or themes that were dequeuing the WooCommerce Blocks stylesheets.
The details
Until now, WooCommerce included some stylesheets on the page, such as wc-blocks-vendors-style.css and wc-blocks-style.css. These stylesheets contained styles for all the blocks provided by WooCommerce. This method worked well initially, as the number of blocks included in WooCommerce was limited. However, as the number of blocks grew, it became more efficient to switch to a per-block stylesheet approach. This change will optimize resource usage and improve page speed. Visitors will now only have to download the smaller stylesheets for the blocks being used in the page they are viewing, rather than a single large file with styles for all the blocks.
A side effect of this is that stores which had been dequeueing WooCommerce Blocks default stylesheets might see some style conflicts if they had custom styling for the blocks. We strongly advise against dequeueing the default WooCommerce Blocks stylesheets and, if your theme or store has custom code that is dequeueing any of the WooCommerce Blocks default stylesheets, we recommend removing that code and testing the frontend of your site with WooCommerce Blocks 10.7.
How can I tell if this affects me?
This improvement will benefit all stores using WooCommerce and, in most cases, no action is required.
If, for some reason, you have some custom code or are using a theme that dequeues the WooCommerce Blocks stylesheets, this change might impact the styles of your store.
What action should I take?
As long as your store or theme is not dequeuing WooCommerce Blocks stylesheets, you shouldn’t do anything.
If your theme or your store has some custom code that dequeues WooCommerce Blocks stylesheets (it would look something like this wp_dequeue_style( 'wc-blocks-style' );) we recommend testing the posts, pages and templates of your site containing WooCommerce blocks with WooCommerce Blocks 10.7.
We also strongly recommend you to remove the code that dequeues the WooCommerce Blocks stylesheet. The reason is that as WooCommerce Blocks evolves and we introduce new features and updates to blocks, the stylesheets are being updated in parallel. That means that if the WooCommerce Blocks stylesheet is being dequeued, the store will get the updated blocks’ markup but not the updated blocks stylesheets, which might cause styles to break the entire site.
If your store or theme was dequeuing the WooCommerce Blocks stylesheets for performance reasons, so the stylesheets were not loaded unnecessarily, the change mentioned in this article should have you covered, as starting from now stylesheets will be loaded only for the blocks being rendered on the page.
If your store or theme was dequeuing the WooCommerce Blocks stylesheets in order to provide different styles, we recommend you to override the styles using global styles when possible or using CSS with higher specificity when global styles are not an option. This is a more future-proof approach than dequeuing the default stylesheets.
Leave a Reply