Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

theme.css is included in editor even if wp-block-styles is not enabled #44510

Closed
mikachan opened this issue Sep 27, 2022 · 1 comment · Fixed by #44640
Closed

theme.css is included in editor even if wp-block-styles is not enabled #44510

mikachan opened this issue Sep 27, 2022 · 1 comment · Fixed by #44640
Assignees
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing")

Comments

@mikachan
Copy link
Member

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:
image

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

Front end:
image

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

image

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 -->
  1. In the editor, notice that the separator block is set to 100px width
  2. On the front end, notice that the separator does not have an explicit width set, and so fills the available space
  3. Opt into wp-block-styles by adding the following to the theme's functions.php file:
add_theme_support( 'wp-block-styles' );
  1. In the editor, notice the separator block is still set to 100px width
  2. 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

@mikachan mikachan added the [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") label Sep 27, 2022
@mikachan
Copy link
Member Author

Related issues from TT3:

WordPress/twentytwentythree#202
WordPress/twentytwentythree#219

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Oct 3, 2022
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label Nov 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing")
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants