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

admin管理员组

文章数量:1134248

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?

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?

• css
• block-editor
• wp-enqueue-style
• conditional-content

Share Improve this question asked Oct 4, 2023 at 14:10 WalrusWalrus 13144 bronze badges 8

• it would be easier to use the .home rule and take advantage of the body classes WP adds to help with this. Otherwise what you want is impossible if you ever plan to use the template or site editors as there's no way to know from PHP since the user can click into another template and it would be broken – Tom J Nowell ♦ Commented Oct 4, 2023 at 15:26
• @TomJNowell I see you point but its about loading fewer resources, or more accurately, only relevant resources. I can think of a number of ways to do this but I just thought that something a simple as this would be included in the code base. – Walrus Commented Oct 5, 2023 at 9:00
• in the strictest sense nothing prevents you doing this using the same strategy on the frontend, just don't expect it to work on the backend as it's a React/JS application, enqueue_block_assets may not be the ideal action to do that on, and there are definitely disadvantages to this approach and additional complexity, it's not the silver bullet it first appears to be – Tom J Nowell ♦ Commented Oct 5, 2023 at 13:44
• @TomJNowell . I've implemented a it using the template slug as the identifier and it works perfectly on the front end and the block editor with every single stylesheet. I'm yet to find the problem you mention in any case. – Walrus Commented Oct 6, 2023 at 11:01
• 1 as an aside, you could register a "homepage" block style on a group block to selectively apply homepage styling to everything inside it, so that you can have sections of a page without styling the entire page and place it anywhere you want across the entire site – Tom J Nowell ♦ Commented Oct 6, 2023 at 12:11

 |  Show 3 more comments

1 Answer 1

Sorted by: Reset to default 0

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',
  ); 

});

本文标签： cssEnqueue Stylesheet on the front end and in the block editor Conditionally