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