Description

It seems that theme.css is included in the editor whether wp-block-styles is enabled or not. However, on the front end, theme.css is only included if the theme opts into wp-block-styles (which I believe is correct).

I noticed this because it looks like the default separator block is limited to a width of 100px (unless it is set to wide style or dots style) in the editor, but it will fill the available space on the front end:

Editor:

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

Front end:

This is because there is an explicit 100px width set in theme.css, here:

I don't think theme.css should be included if the theme doesn't opt into wp-block-styles, otherwise, we're going to see inconsistent styles between the front end and the editor.

Step-by-step reproduction instructions

To replicate the issue with the separator block:

1. Enable a theme that does not opt into wp-block-styles (e.g. Twenty Twenty-Three)
2. Insert a default separator block, or use the following markup:

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

3. In the editor, notice that the separator block is set to 100px width
4. On the front end, notice that the separator does not have an explicit width set, and so fills the available space
5. Opt into wp-block-styles by adding the following to the theme's functions.php file:

add_theme_support( 'wp-block-styles' );

6. In the editor, notice the separator block is still set to 100px width
7. On the front end, notice that the separator block is now set to 100px width

Screenshots, screen recording, code snippet

No response

Environment info

No response

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