Enqueue Custom Stylesheets in Etch

Since Etch now has global stylesheets for your custom global CSS, this snippet is now best used for enqueuing other plugin stylesheets or external stylesheets. When you’re using stylesheets from plugins or external sources on your frontend but they’re missing from the Etch editor, you end up with a mismatch between what you see while building and what your visitors actually see. The etch/canvas/additional_stylesheets hook gives you access to load these stylesheets in the Etch editor. This ensures what you see in the editor matches what you see on the frontend!

How it works

The etch/canvas/additional_stylesheets filter hook accepts an array of stylesheet objects. Each stylesheet object needs two properties: an id (for identification) and a url (pointing to your CSS file). When Etch loads the editor, it automatically includes these stylesheets in the editor window only

This hook doesn’t affect the block editor or frontend display. You’ll need to enqueue your stylesheets separately for those locations using WordPress’s standard wp_enqueue_style() function.

On to the Code!

add_filter('etch/canvas/additional_stylesheets', function($stylesheets) {  
    // Add stylesheet using a WordPress path
    $stylesheets[] = [
        'id' => 'my-custom-stylesheet',
        'url' => site_url('/wp-content/path/to/styles.css')
    ];

    // And here is an example of adding a stylesheet with an absolute URL
    $stylesheets[] = [
        'id' => 'external-styles',
        'url' => 'https://example.com/path/to/styles.css'
    ];
    
    return $stylesheets;
});

add_filter('etch/canvas/additional_stylesheets', function($stylesheets) {  
    // Add stylesheet using a WordPress path
    $stylesheets[] = [
        'id' => 'my-custom-stylesheet',
        'url' => site_url('/wp-content/path/to/styles.css')
    ];

    // And here is an example of adding a stylesheet with an absolute URL
    $stylesheets[] = [
        'id' => 'external-styles',
        'url' => 'https://example.com/path/to/styles.css'
    ];
    
    return $stylesheets;
});

The hook passes in the existing $stylesheets array, which you can add to by pushing new stylesheet objects. Each object requires:

• id: A unique identifier for the stylesheet
• url: The full URL to the CSS file

Wrapping it Up

You can add as many stylesheets as needed, whether they’re hosted locally on your WordPress site or externally on CDNs.

On a related note: if you also need to load JavaScript into the Etch canvas, check out this related snippet for enqueuing custom scripts.