how to enqueue stylesheet before block library style

  • hozefasmile

    (@hozefasmile)


    3 years ago

    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 https://uniquesweb.co.in/ntheme/ , 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

    (@alanfuller)

    3 years ago

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

    https://developer.wordpress.org/reference/functions/wp_enqueue_style/

    Thread Starter hozefasmile

    (@hozefasmile)

    3 years ago

    @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:https://uniquesweb.co.in/ntheme/

    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{box-sizing:border-box}
.wp-block-group.has-background{padding:1.25em 2.375em}
</style>

    etc are coming first and then the bootstrap link file
    <link rel='stylesheet' id='unibsstyle-css' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css' 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

    (@alanfuller)

    3 years ago

    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.

    https://developer.wordpress.org/reference/hooks/print_styles_array/

    There may well be a better approach though.

    Thread Starter hozefasmile

    (@hozefasmile)

    2 years, 11 months ago

    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:https://uniquesweb.co.in/demo/practice/test-page/ , 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

    (@hozefasmile)

    2 years, 9 months ago

    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', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css', 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.