How to enqueue styles and scripts in GeneratePress

I’ve recently refreshed my starter site that I use on client websites and I’ve moved away from using a code snippet plugin and into a child theme. Part of this means I need to properly enqueue scripts and styles in the frontend and backend.

This seems easy right? Well actually this took a long time to figure out and accomplish to ensure that my styles were loaded in the correct places and were not getting overriden by all the Gutenberg editor styles.

We are going to see how to enqueue styles in four different ways and explain the difference between them.

1. Enqueue styles to editor iframe

The first type we are looking at is loading our styles in the editor iframe. Now this may sound strange, but Gutenberg has two places you can load styles, either in the page head like we are use to, or inside the “editor iframe context. When we load styles in the “editor iframe”, WordPress runs a function to replace any selectors that have body with .editor-styles-wrapper. It also prefixes all your selectors with this class.

The reason for this is to ensure that your CSS styles are not overidden, as there is a lot of specificity in the editor. To enqueue the styles we can hook into a GeneratePress filter called generate_editor_styles.

        /* Enqueue styles to editor iframe */
add_filter( 'generate_editor_styles', 'tct_editor_iframe_styles', 50);
function tct_editor_iframe_styles($editor_styles ) {
    $editor_styles[] = '/style.css';

    return $editor_styles;
};

      
Copy

Code Breakdown

• In the example above, we are loading style.css from our child theme into the editor.
• If you have more stylesheets you want to load, you can do this by adding a new line and changing the path to your stylesheet.
• We set the priority to 50, this ensures our styles load last over all the others.
• This GeneratePress filter is using add_editor_style under the hood.

2. Enqueue Customiser CSS to editor iframe

Next we want to enqueue any styles that have been added under the Additional CSS section of the theme customiser. This is a nice place to quickly test ideas before moving them to their final location either in your child theme or code snippet plugin.

        /* Enqueue Customiser CSS to editor iframe */
add_filter( 'block_editor_settings_all', 'tct_customiser_styles', 10, 2);
function tct_customiser_styles($editor_settings, $editor_context) {
    $custom_css_post = wp_get_custom_css_post();
    if ($custom_css_post) {
        $customiser_css = $custom_css_post->post_content;
	    $editor_settings['styles'][] = array( 'css' => $customiser_css );
	}
    return $editor_settings;
};
      
Copy

Code Breakdown

• We are hooking into the block_editor_settings_all filter.
• Calling the wp_get_custom_css_post() function which is where the custom css is stored.
• Checking if there is any CSS styles in there.
• If true, we add a new array element with the customiser css “post_content”

3. Enqueue styles to Gutenberg editor head

The next place we are going to load styles is in the head of the Gutenberg editor. This isn’t to be confused with the editor iframe. We would use this when we want to affect styles outside the block editor section.

        /* Enqueue custom script to editor */
add_action( 'enqueue_block_editor_assets', 'tct_enqueue_block_editor_assets' );
function tct_enqueue_block_editor_assets() {
    $theme_dir = get_stylesheet_directory_uri();

	wp_register_style( 'tct-editor-styles', $theme_dir . '/editor/editor-style.css' );
	wp_enqueue_style( 'tct-editor-styles' );

    // Editor script
    wp_enqueue_script(
        'tct-editor-script',
        $theme_dir . '/editor/editor-script.js',
        array( 'wp-hooks' ),
        time(),
        true
    );
}
      
Copy

Code Breakdown

• We are hooking into the action enqueue_block_editor_assets
• We get the directory path to our child theme and register our editor stylesheet.
• This is a separate stylesheet from our style.css which aims to only affect elements outside the block editor.
• We can also see that we are loading our own custom JavaScript file into the editor too with a similar method.

A great example use case would be if you wanted to match the width of your content on the frontend in the backend. This gives you a better idea of what the content will look like and gives you a nicer editing experience.

The CSS snippet below sets the editor width to 800px only for the post type: post.

.post-type-post is a body class added in the admin to tell you that you’re editing the post post type.

        .post-type-post .editor-styles-wrapper{
    max-width: 800px;
    margin-inline: auto;
    width: 100%;
}
      
Copy

4. Enqueue styles on the frontend

The last place we have to load styles are on the frontend. For this we will be using the wp_enqueue_scripts hook.

        /* Frontend custom styles */
add_action('wp_enqueue_scripts', 'tct_enqueue_custom_styles', 20);
function tct_enqueue_custom_styles(){
	wp_register_style( 'tct-child-custom', get_stylesheet_directory_uri(). '/custom/custom-style.css' );
	wp_enqueue_style( 'tct-child-custom' );
}
      
Copy

Code Breakdown

• We are registering a new stylesheet called tct-child-custom to the path of our custom folder inside our child theme for the stylesheet custom-style.css.
• We then enqueue tct-child-custom.
• The priority is set to 20 to load after our parent theme styles.

Conclusion

Hopefully this helps you with loading all your different assets inside the Gutenberg editor, and you understand why those CSS styles you added are not showing.