Appearance > Design in classic themes: admin-bar class name in the Site Editor breaks designs

[carolinan]

Description

When a classic theme is previewed under Appearance > Design, the admin-bar class name is not removed from the body even though the admin bar is not visible inside the Site Editor iframe.

This may break themes that use this CSS class name.
For example, Twenty-Fourteen uses the following CSS to move the sticky header when the admin bar is visible:

@media screen and (min-width: 783px) {
    .admin-bar.masthead-fixed .site-header {
        top: 32px;
    }
}

In the preview, the theme's header is pushed down and the content is displayed above the header when scrolling:

Step-by-step reproduction instructions

Activate Gutenberg
Activate Twenty Fourteen
Go to Appearance > Design

Screenshots, screen recording, code snippet

appearance-design-twentyfourteen.mp4

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[himanshupathak95]

Thanks @carolinan for pointing this out.

I was able to observe a similar behavior, the admin-bar class applied to the body is messing up the styles -

When removed, the layout looks correct and better -