Understanding Revv gulp tasks & enqueuing scripts

sage
1

I wanted to enqueue a css stylesheet on the WP Login page.

Then I decided I could just call the main.css style sheet to keep things simple and write my styles in a Less partial for maintainability.

I used the standard function shown below:

// Enque Style Sheet on WP Login Page
function enqueue_login_style() {
    wp_enqueue_style( 'core', get_template_directory_uri() . '/dist/styles/main.css', false ); 
    }

add_action( 'login_enqueue_scripts', 'enqueue_login_style', 10 );

However, the gulp --production task uses Gulp Rev to append a hash to the style sheet, presumable to prevent caching issues, so I’m not sure how to properly enqueue the style sheet.

So I started poking around…

And on line 97-98 in /lib/assets.php the main css stylesheet is enqueued.

    function assets() {
  wp_enqueue_style('sage_css', asset_path('styles/main.css'), false, null);

What I don’t understand is how the script above determines the revision hash that’s appended to the filename, or how to use this to enqueue the sheet on the login page.

2

Here is where the “magic” happens. And by magic I mean reading a JSON file full of key/value pairs.

The JSON in the dist/ folder looks like this:

{
    "css/unicorn.css": "css/unicorn-098f6bcd.css",
    "js/unicorn.js": "js/unicorn-273c2cin.js"
}

So when you call asset_path it looks in the JSON file for the the key you just called and returns it accordingly. So

asset_path('css/unicorn.css')
// => css/unicorn-098f6bcd.css

It should be noted that this is a fairly standard concept and that rails uses it as well as lots of libraries for laravel, symfony, etc.

2 Likes
3

I’m guessing I can’t call asset_path outside of assets.php since below modification caused an error:

    // Enque Style Sheet on WP Login Page
function enqueue_login_style() {
    wp_enqueue_style( 'core', asset_path('styles/main.css'), false ); 
}

Fatal error: Call to undefined function asset_path() in /srv/www/example.com/web/app/themes/example/lib/admin-custom.php on line 56

4

You’re forgetting the namespace

5

For posterity

2 Likes
6

ty good sir :kissing_heart:

7

Could you provide an example? Enqueuing a script just got a lot more complex :smile:

I suppose I should enqueue this in the assets.php file

8

Not really. All of the stock functions and classes in Sage are now namespaced. It’s explained in that article. Either call functions by their full namespace or use the use keyword at the top of your PHP file.

9

I added a style sheet for the wp-admin area of my theme. The admin.css file loads in development mode because it’s just calling the admin.css file but on staging and production it does not add the hash to the file name like main-5467tgy.css gets. The JSON file in the dist/ folder does have my admin.css file listed with its corresponding hash file name but in production it still tries to load admin.css which is not in the dist/ folder on the staging and production server. Any idea what the deal is??? Thanks in advance:) Basically I need to call the hashed file on production. here is my style include for the admin.css file

    // Adds an admin style to wp-admin - TAS
function load_custom_wp_admin_style() {
        wp_register_style( 'sage_css', get_template_directory_uri() . '/dist/styles/admin.css', false, '1.0.0' );
        wp_enqueue_style( 'sage_css' );
}

add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
1 Like