Skip Navigation

[Resolved] Enqueue WordPress child theme CSS files after Toolset Blocks style\.css

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user would like to enqueue his child theme's styles after blocks styles.

Solution:
Toolset Blocks has implemented a lazy load mechanism for its styles, using Javascript. If you want to use its style as a dependency, you will need to disable the lazy loading mechanism. That can be done using a constant in the wp-config.php file:

define( 'TB_SCRIPT_STYLE_LAZY_LOAD', false );

After that, the styles will be enqueued in the default way, and you will be able to set it as a dependency for your child theme's styles.

So you can depend on the "toolset-blocks-css". For example:

if ( !function_exists( 'child_theme_configurator_css' ) ):
    function child_theme_configurator_css() {
        wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'twenty-twenty-one-style','twenty-twenty-one-style','twenty-twenty-one-print-style', 'toolset-blocks-css' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css', 10 );
This support ticket is created 2 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+00:00)

This topic contains 6 replies, has 3 voices.

Last updated by cassianS 2 years, 9 months ago.

Assisted by: Jamal.

Author
Posts
#2098499

- Tell us what you are trying to do?
Enqueue WordPress child theme CSS files after Toolset Blocks style.css
As I see Toolset Blocks style.css is getting embeded without stylesheet name (or maybe I am wrong...) so I am not able to link it as dependency for my child theme CSS files.
Would you advice any workaround? And maybe you could also add a stylesheet name for Toolset Blocks css files in your future updates?

<b>- Is there any documentation that you are following?</b>
I haven't find any

- What is the link to your site?
hidden link

#2099025

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

If you are referring to the stylesheet toolset-blocks/vendor/toolset/blocks/public/css/style.css then that is registered with the handle "toolset-blocks", so you should be able to declare your child theme style using toolset-blocks as a dependency.

#2099371

Hi Nigel, thank you for a quick reply. Yes, I was asking about /toolset-blocks/vendor/toolset/blocks/public/css/style.css
I tried to add "toolset-blocks" as dependency but it didn't work. The child theme CSS file which has "toolset-blocks" as dependency is not loading at all...

#2099415

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello there! If you don't mind, I'll continue with you on this ticket.

I created a new test site to experiment with it until we find a solution for you. You can log into it with the following URL hidden link

I created a child theme to see what we can do, and it seems that the toolset-blocks/vendor/toolset/blocks/public/css/style.css is loaded dynamically using Javascript instead of using the WordPress enqueue functions. When Javascript is not enabled, it is being loaded without any handle, and this is the code responsible for that:

<script> window.addEventListener("load",function(){ var c={script:false,link:false}; function ls(s) { if(!['script','link'].includes(s)||c[s]){return;}c[s]=true; var d=document,f=d.getElementsByTagName(s)[0],j=d.createElement(s); if(s==='script'){j.async=true;j.src='<em><u>hidden link</u></em>';}else{ j.rel='stylesheet';j.href='<em><u>hidden link</u></em>';} f.parentNode.insertBefore(j, f); }; function ex(){ls('script');ls('link')} window.addEventListener("scroll", ex, {once: true}); if (('IntersectionObserver' in window) && ('IntersectionObserverEntry' in window) && ('intersectionRatio' in window.IntersectionObserverEntry.prototype)) { var i = 0, fb = document.querySelectorAll("[class^='tb-']"), o = new IntersectionObserver(es => { es.forEach(e => { o.unobserve(e.target); if (e.intersectionRatio > 0) { ex();o.disconnect();}else{ i++;if(fb.length>i){o.observe(fb[i])}} }) }); if (fb.length) { o.observe(fb[i]) } } }) </script>
	<noscript>
		<link rel="stylesheet" href="<em><u>hidden link</u></em>">
	</noscript>

I can escalate this to our 2nd Tier and I'll get back to you with his suggestion. However, can you elaborate more on your use case? Maybe we can suggest another way. Please explain, why would you like your child theme's styles to depend on Toolset blocks styles?
This way I can escalate this request with as many details as possible.

#2099441

Hi Jamal, thank you for details.
Basically, I always trying to load child theme CSS files after page editors so that custom style would apply and override them. It makes applying CSS much-much easier for me and with less CSS "!import's". Additionally, I could set some general styling like for <h> <p> elements etc without bothering to edit each element in Blocks individually. Therefore I was wondering whether I can use Toolset Block CSS as a dependency.

I guess as a temporary solution I could add child theme CSS as inline one with <style></style> tags? (my best guess but maybe there is another option)

#2102107

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello and my apologies for the late reply. I did not reply about your suggestion of using inline styles, as it did not make sense to me and I preferred to wait for our 2nd Tier feedback.

Toolset Blocks has implemented a lazy load mechanism for its styles, using Javascript. If you want to use its style as a dependency, you will need to disable the lazy loading mechanism. That can be done using a constant in the wp-config.php file:

define( 'TB_SCRIPT_STYLE_LAZY_LOAD', false );

After that, the styles will be enqueued in the default way, and you will be able to set it as a dependency for your child theme's styles.

I confirm it on my test site hidden link
The child theme's styles are now dependent on the Toolset blocks styles, which are enqueued in the default way instead of the lazy loading way.

I hope this helps. Let me know if you have any questions.

#2102313

My issue is resolved now. Thank you, Jamal!
--
Regarding the adding CSS as internal (my previous message) I was thinking to temporary use internal style as it's printing after most of the external linked CSS files so It could potentially override toolset blocks style

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.