How to enqueue theme styles before global?

[catkit]

I'm using Bootstrap at my theme but since 5.9.1, when global styles were moved up from the html bottom to its head, Bootstrap css is overriding my global styles because it loads after them. How to fix that, please?

[Mamaduka]

Hello, @catkit

Global styles are loaded using default priority - 10. You can load Bootstrap using lower priority for the wp_enqueue_scripts hook, maybe 9 or 5.

[catkit]

Thanks, @Mamaduka!! That was easy!

[catkit]

Hi @Mamaduka ,

The issue returned after the most recent release (13.5.1). It seems that Global Styles are now loaded on init . Changing priority won't fix it and there isn't any other hook that can be used instead of wp_enqueue_scripts.

Is there a solution for this? This issue also happens with other plugin's css. Shouldn't Global Styles load after them?

Thanks!

[aristath]

It seems that Global Styles are now loaded on init .

Where exactly do you see that? From what I can tell, global-styles still get enqueued properly in the wp_enqueue_scripts hook.. unless I missed something? 🤔

[catkit]

Hi @aristath

Thanks for your answer.

I understand in this PR Global styles are set as dependency for block styles so it loads before them. I thought block styles are enqueued when the block is registered, so on init, right?

Anyway, I tried loading Bootstrap using lower priority for the wp_enqueue_scripts hook as suggested above and it didn't work.

[aristath]

Ah OK, I see the confusion now.
There's a difference between global styles and block styles, they are not the same thing.
Global styles are the styles generated dynamically from theme.json files and other sources, while block styles consist of CSS files that get enqueued.
Global styles are still enqueued the same way in wp_enqueue_scripts.
Block styles are registered on init, however, when they get enqueued depends on a multitude of factors; It can change depending on whether you're building a block-theme or a classic theme, if you opt-in to loading separate block styles or a single style with all styles for all blocks and so on.
In block themes, they only get enqueued when the block itself gets rendered. Tracking down the code I see that the styles get registered on init, then rendering the blocks happens in template-canvas.php. When a block gets rendered, it calls wp_enqueue_style, but the template-canvas.php file gets loaded in the locate_block_template function, which is loaded in _add_template_loader_filters, which gets added in the wp_loaded hook with a priority of 10.

Classic themes are a bit more complicated because you have the option to opt-in to separate styles loading etc.
If you opt-in to separate styles loading by adding add_filter( 'should_load_separate_core_block_assets', '__return_true' ); then block styles get enqueued on-render again, but this time since classic themes don't have a template-canvas, styles get added to the wp_footer hook.
If you don't opt-in to separate styles loading, then block-styles get enqueued in the wp_common_block_scripts_and_styles function, which gets hooked in wp_enqueue_scripts with a priority of 10.

If wp_enqueue_scripts doesn't work in your specific scenario, I would advise to simply try using a different hook. You can find a list of all the hooks and the order in which they run on https://codex.wordpress.org/Plugin_API/Action_Reference, so you can try using a hook that is above wp_enqueue_scripts and see which one accomplishes the result you're after. 👍

I'm afraid there's no one-size-fits-all response to your question... It really all depends on your implementation!

[catkit]

Thanks for thoroughly explaining this to me. I used wp_loaded hook, making sure it isn't enqueued in the admin area.