Using multiple stylesheets per block does not work in Site Editor

[gyurmey2]

Description

According to this manual, styles are only loaded in the Page Editor and Frontend, but not in the Site Editor.

Step-by-step reproduction instructions

1. Add the following code snippet to the functions.php file:

add_action('after_setup_theme', function () {

  $args = array(
    'handle' => 'my-theme-paragraph',
    'src'    => get_theme_file_uri('assets/blocks/paragraph.css'),
  );

  $args['path'] = get_theme_file_path('assets/blocks/paragraph.css');

  wp_enqueue_block_style('core/paragraph', $args);
});

2. Add styles in the paragraph.css file:

p { background: red}

3. Check that the styles are loaded in the Site Editor.

Screenshots, screen recording, code snippet

Front-end:

Page Editor:

Site Editor:

Environment info

Fresh install WP (6.1.1) with TT3 theme.
Gutenberg: 14.7.3 & 14.9.20221216 & without.

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

Yes

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

Yes

[kathrynwp]

@gyurmey2 Thank you for the report!

@aristath I'm taking the liberty of looping you in here, in case you have a moment to take a peek at this. Thanks!

[MadtownLems]

I believe the issue here is that - in the Site Editor - the block is rendered inside of an iframe that does not have actually have the CSS file included. The CSS file is only in the top-level frame, which is why the paragraph in the sidebar is red.

I think there are lots of open issues related to this, such as: #41821

[ndiego]

I am able to confirm this, but I could have sworn this used to work. @justintadlock I know you recently wrote an article on per-block stylesheets. Did you run into this?

[justintadlock]

I am able to confirm this, but I could have sworn this used to work. @justintadlock I know you recently wrote an article on per-block stylesheets. Did you run into this?

Actually, I didn't test loading multiple stylesheets per block. But, loading a single stylesheet per block is working for me:

I'm also registering on init.

[MadtownLems]

I don't remember where I saw this, but I believe that the issue in the original post is that the stylesheet doesn't contain any rules about "wp-block".

I just made a sample plugin with the following CSS only, registered with admin_enqueue_scripts, and it does NOT get included in the Site Editor:
.j-sample-block-output-backend-red p { color: red; }

however, only changing the CSS file to add a line containing .wp-block makes the CSS be included in the Site Editor:

.j-sample-block-output-backend-red p { color: red; }

.wp-block { background-color: yellow; }

[MadtownLems]

This might be the best thread for discussion around the need for "wp-block" to be included in the CSS file:
#40842

[pagelab]

Adding a random wp-block class worked for me, but the “plain” paragraph style keeps leaking into the sidebar.

Maybe the .editor-styles-wrapper class should be automatically included in the editor for stylesheets enqueued with wp_enqueue_block_style.

[ndiego]

Yes, I can confirm @pagelab's results. Adding a per-block stylesheet for paragraphs without wp-block in the file loads the CSS in the Editor but not in the iframe. This leads to paragraphs in the inspector being styled but not the paragraphs in the actual page content.

I added the following to a paragraph stylesheet:

.wp-block {}
p { background: red}

This then causes the file to be loaded in the iframe, but the styles also bleed into the Site Editor.

[ellatrix]

This should be fixed by #49655 (in WP 6.3), because wp_enqueue_block_style is internally using enqueue_block_assets.

[alogonzac]

I am still experiencing this issue on version 6.4.2