Enqueue Stylesheet on the front end and in the block editor Conditionally

Question

How would you include a stylesheet in both the block-editor and on the front-end if the page meets certain criteria?

In this case I want to include a stylesheet called homepage.css if the page is the home page only. I therefore did this:

 add_action('enqueue_block_assets', function () { if(is_front_page()){ wp_enqueue_style( 'homepage-stylesheet', get_template_directory_uri() . '/homepage.css', ); } }); 

Whilst the code works on the front-end it does not in the block-editor as it appears that is_front_page() cannot be determined until the page is rendered.

How would you go about this?

Answer 1

This can be done. @TomJNowell does point out the potential for a problem with this solution in the comments to the question but I cannot replicate that problem in any test.

In this example I locked on to the template slug. Therefore for this to work instead of using is_front_page() or similar, create a template called homepage and use it only for the homepage. Then do the same for any other pages you want to have a custom stylesheet.

add_action('enqueue_block_assets', function () { global $post; $template = get_page_template_slug($post->ID); wp_enqueue_style( $template . '-template-styles', get_template_directory_uri() . '/' . $template . '.css', ); });