Gutenberg: Blocks: Introduce separate stylesheet for editor with optional theme opt-in

[samikeijonen]

Markup:

<hr class="wp-block-separator">

CSS:

.wp-block-separator {
    border: none;
    border-bottom: 2px solid $dark-gray-100;
    max-width: 100px;
    margin: 1em auto;
}

Many themes have styles for <hr> element so this will have styling issues with many themes. I propose removing styles from the front-end. Yeah I know then it would not match styles in the Gutenberg. That's something we need to solve.

[karmatosed]

I think we need to be really cautious removing all styling. A lot of themes to be honest do styling wrong. Offering some (note some) default styling is not a bad idea.

[samikeijonen]

A lot of themes to be honest do styling wrong.

That's a bold statement even for <hr> styling. But like I said in other ticket I'm OK that all blocks have default styling.

[mtias]

@samikeijonen yes, this one could potentially cause some unintended issues. Can we do a quick test through a few of the top themes to see if there are obvious things we can protect from? (The twenties, etc.)

As long as we only target the class, I think we can treat this separator as a special separator—unless, obviously, the theme wants to provide their own styles for it.

[samikeijonen]

Can we do a quick test through a few of the top themes to see if there are obvious things we can protect from? (The twenties, etc.)

I can add screenshots here when I have some time. Twenty-* themes are not going to be problem though because we know to update and make small CSS tweaks to them before Gutenberg is released.

[nosolosw]

FWIW, this also happens with the Independent Publisher theme.

[nosolosw]

Could it be worth exploring the possibility of having the block class in the block section settings so users don't have to switch back to HTML to remove the class?

[mtias]

I think we should consider dropping automatic inclusion of some specific blocks styles that tend to always have theme styles (blockquote and hr would fall there).

[aduth]

From the conversation, it appears there are two action items here:

• Remove front-end styling for Separator block (move styles from styles.scss into editor.scss)
• Remove front-end styling for Quote and Pull Quote block (move styles from styles.scss into editor.scss)

Let me know if these are incorrect.

[mtias]

@aduth we have been reducing styles for many blocks in various releases, notably the quote styles. I think we need to regroup here and introduce the notion of core_block_styles which themes might opt into supporting via add_theme_support, since many themes do want our styles (specially new ones) but many others don't. The tricky bit is how to separate _structure_ from _visuals_.

Maybe we should introduce another theme.scss for blocks (next to style.scss and edit.scss? Might give an easier way to also overwrite visuals _within_ the editor without affecting structural styles.

[karmatosed]

Maybe we should introduce another theme.scss for blocks (next to style.scss and edit.scss? Might give an easier way to also overwrite visuals within the editor without affecting structural styles.

I really like this idea and think going forward it solves a lot of issues.

[mtias]

Closing in favor of #5360 as it has a wider overview.