Block editor does not support plain CSS nesting from themes' style.css

[daotw]

Description

Block editor should support plain CSS nesting, which is a new feature introduced in late 2023.

Step-by-step reproduction instructions

1. In functions.php, enqueue stylesheet in both the frontend and block editor (if you haven't already):

   
   function my_theme_enqueue_assets() {
   wp_enqueue_style(
       'my-theme-stylesheet',
       get_stylesheet_uri(),
   );
   }
   add_action('wp_enqueue_scripts', 'my_theme_enqueue_assets');

function my_theme_add_editor_styles() { add_editor_style('style.css'); } add_action('admin_init', 'my_theme_add_editor_styles');

2. In block editor, add a Group block, and add a Paragraph block inside it with some text.

3. In your theme's main stylesheet (usually style.css), add
```css
.wp-block-group p {
    background-color: red !important;
}

and see its effect in both the frontend and block editor.

Now, replace above CSS with

.wp-block-group {
    p {
        background-color: red !important;
    }
}

and see its effect in the frontend, but NOT in block editor. 🙁

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress: version 6.6.1
• Theme: Twenty Twenty-Four
• Chrome: version 128.0.6613.114 (Official Build) (x86_64)

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[sarthaknagoshe2002]

Hey @daotw, I could not reproduce your issue. For me the output was same in both the ways mentioned by you.

Can you please provide more information to reproduce your issue. Also, a snapshot or video recording will be helpful to understand the arrangement of blocks in which this issue occurs.