Support » Fixing WordPress » how to enqueue stylesheet before block library style

  • hozefasmile


    I am enqueuing bootstrap stylesheet in my block theme. I want to keep boostrap stylesheet file loaded before the block library stylesheet files.

    For example see this demo example site , if you look at the source code, you will see that all the inline styles of the block editor core blocks are loading first and then the unibsstyle-css is loading. I want to load it as first stylesheet and then any other, because bootstrap css is overwriting what I am providing in theme.json file, from example, default font family, font size for various heading etc.

    is there a filter or priority parameter to load my own enqueued stylesheet to load first and then the others ?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Alan Fuller


    Can you not use dependencies, i.e. add your style sheet as a dependency of all the others?

    Thread Starter hozefasmile


    @alanfuller , Yes I have used dependencies, for all other css files to be dependent on bootstrap file, so they are coming after bootstrap, but how I can make inline generated css by wordpress to be dependent on bootstrap css file ? If you look at the source view-source:

    for example <style id='global-styles-inline-css' type='text/css'>... or

    <style id='wp-block-group-inline-css' type='text/css'>
    .wp-block-group.has-background{padding:1.25em 2.375em}

    etc are coming first and then the bootstrap link file
    <link rel='stylesheet' id='unibsstyle-css' href='' type='text/css' media='all' />
    , how I can move those inline style tags down the bootstrap link tag ? If its possible through dependencies, how we can give dependencies to those inline style tags ?

    Alan Fuller


    I don’t know the answer but there is a filter

    print_styles_array which I think has an array in order of dependency so you may be able to unset your tag and place it at the top.

    There may well be a better approach though.

    Thread Starter hozefasmile


    I am not much aware about how to use print_styles_array filter, I want to move my bootstrap css file above the style tags generated by wordpress.
    see the link view-source: , I want to move my link handle “unibsstyle” above the style tag with id “global-styles-inline-css” , Can you explain how it could be possible ?

    My goal is to override bootstrap css with theme.json file.

    Thread Starter hozefasmile


    I have found a solution to this issue and want to share it with all.

    Just changing the priority higher then 9 make any custom css included by us comes first in head. Here is my example code

    function unique_styles_topinhead()
        wp_register_style('unibsstyle', '', array(), null, 'all');
        wp_enqueue_style('unibsstyle'); // Enqueue it!
    add_action( 'wp_enqueue_scripts', 'unique_styles_topinhead', 8 );

    Hope this will help someone 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘how to enqueue stylesheet before block library style’ is closed to new replies.