Happy holidays everyone.
I am a huge fan of ACF v2 blocks and the use of block.json. However, I recently started seeing issues with cumulative layout shift based on the order of CSS and JS assets that are loaded on pages. This is a visual issue that can be seen when pages load.
When ACF 6 was released, I noticed the changes in (v2) block asset loading caused all ACF block assets (CSS & JS) to be loaded on all pages. This occurred whether or not ACF blocks were actually loaded on individual pages. ACF block assets were no longer loaded as needed.
I submitted a support request to ACF who were kind enough to provide a solution that I was not aware of. My issue, as it turns out, was not actually an ACF issue. Rather, ACF v2 blocks now mirror native Gutenberg block asset loading, and ACF support suggested using the filter below as a solution:
/**
* Load block.json assets as required.
*
* https://developer.wordpress.org/reference/hooks/should_load_separate_core_block_assets/
*
*/
add_filter( 'should_load_separate_core_block_assets', '__return_true' );
The filter allows for loading individual block assets only as needed – which was was perfect at first. However, there is a tradeoff if you are using a PHP based Classic theme.
My understanding is that with an FSE theme, blocks get parsed and placed in HEAD. However, when using the filter above with a PHP based Classic theme, blocks get parsed on-render which places assets in the footer. I have found that the placement of block styles can lead to visible, cumulative layout shift during page load (and issues with block styles overriding theme styles).
I was hoping to learn how others handle ACF block asset loading. Has anyone implemented a solution to load block assets only as needed, with CSS in HEAD, JS in the footer, using a PHP/classic theme?
