Active theme styles are affecting patterns

[carolinan]

Describe the bug
When I add a paragraph inside a column, the CSS from Twenty Twenty-One is bleeding through and adding unexpected styling to the blocks.

To Reproduce
Steps to reproduce the behavior:

1. 'View this pattern'.
2. Confirm that the paragraph in the left column does not align with the button block below it.
3. Open the browser developer tools, select console, and view the CSS that is applied.
4. See that the following CSS is affecting the position of the paragraph:

wp-block-columns.alignfull .wp-block-column p:not(.has-background), .wp-block-columns.alignfull .wp-block-column h1:not(.has-background), .wp-block-columns.alignfull .wp-block-column h2:not(.has-background), .wp-block-columns.alignfull .wp-block-column h3:not(.has-background), .wp-block-columns.alignfull .wp-block-column h4:not(.has-background), .wp-block-columns.alignfull .wp-block-column h5:not(.has-background), .wp-block-columns.alignfull .wp-block-column h6:not(.has-background) {
    padding-left: var(--global--spacing-unit);
    padding-right: var(--global--spacing-unit);
}

The source of this style is https://wp-themes.com/wp-content/themes/twentytwentyone/style.css

Expected behavior
It would be great if a theme that does not add its own block styles could be used to load the patterns. Perhaps "Empty theme"

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome

[ryelle]

Is this a problem in Twenty Twenty-One itself, or something unique to the directory preview?

The theme was picked intentionally for its base styles (typography, etc), so I don't think we want to switch to Empty Theme.

[carolinan]

Ah, I understand the need for some basic typography styles, which emptytheme lacks.
Perhaps an option would be to add the TT1 styles to the theme.json of emptytheme.

It is a problem with Twenty Twenty-One. -It was built before blocks had their own spacing settings. Many of the styles that were added for WordPress 5.6 are outdate now and causes conflicts with blocks; New trac issues for these conflicts are being opened almost on daily basis. I'd love to have conversations with anyone how to solve this for the theme, but I have not found anyone interested in discussing it.

[ryelle]

In #557 the preview has been switched to use Twenty Twenty-Three, and fixed so that the generated CSS from block supports is correctly applied. I think that should address the concern is this issue, so I'm going to close it. If there are still issues with the preview, please open new issues. Thanks!