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.

[oandregal]

FWIW, this also happens with the Independent Publisher theme.

[oandregal]

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.