Discussion: Gutenberg Blocks and Global Stylesheet Loading Issue

[EthanVaz11]

As a developer implementing Gutenberg Blocks on my WordPress site, I have encountered an issue regarding how stylesheets are loaded. Specifically, I noticed that stylesheets smaller than 20KB are correctly loaded only on pages where the block is rendered. However, stylesheets larger than 20KB are being loaded globally across all page. This contradicts the expected behavior where styles should only be loaded when the block is in use on a page.

Observations:

1. Stylesheet Greater Than 20KB:

   • Blocks having styles.scss greater than 20KB are getting globally loaded even when the block is not being used on any page
   • This happens when the block is activated as a plugin.

2. Stylesheet Less than 20KB:

   • Blocks having styles.scss less than 20KB are getting loaded inline and only when the blocks are rendered on that page

3. File Size Threshold Impact:

   • Based on this reference, when the stylesheet size exceeds approximately 20KB, WordPress stops pushing the styles inline.
   • Instead, the styles get included in a style-index.css file, which is loaded globally, even on pages where the block is not used.

Contradiction with Expected Behavior:

The issue contradicts the resolution mentioned in this GitHub discussion, which states that Javascript and stylesheets should not be loaded on pages where blocks are not rendered. However, in practice, I am seeing styles being globally enqueued under certain conditions.

Questions:

• Has anyone else faced this issue where Gutenberg blocks' styles are loaded globally despite not being used?
• Is there a particular way developers handle styles to ensure that the stylesheet renders only when the block is rendered on that page?

Looking forward to insights and possible solutions from the community.