Enqueue Wordpress child theme CSS files after Toolset Blocks style\.css

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

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 vor 3 Jahren, 5 Monaten. 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+01:00)

Dieses Thema enthält 6 Antworten, hat 3 Stimmen.

Zuletzt aktualisiert von cassianS vor 3 Jahren, 5 Monaten.

Assistiert von: Jamal.

Author

Artikel

Juni 24, 2021 at 9:55 pm #2098499

cassianS

- 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?
versteckter Link

Juni 25, 2021 at 9:49 am #2099025

Nigel

Supporter

Sprachen: Englisch (English ) Spanisch (Español )

Zeitzone: 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.

Juni 25, 2021 at 4:05 pm #2099371

cassianS

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...

Juni 25, 2021 at 4:50 pm #2099415

Jamal

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 versteckter 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>versteckter Link</u></em>';}else{ j.rel='stylesheet';j.href='<em><u>versteckter 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>versteckter 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.

Juni 25, 2021 at 6:09 pm #2099441

cassianS

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)

Juni 29, 2021 at 10:59 am #2102107

Jamal

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 versteckter 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.

Juni 29, 2021 at 3:56 pm #2102313

cassianS

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