Block styles in the editor.scss

[samikeijonen]

There are Quote styles in the editor.

.wp-block-quote {
	margin: 0;

	cite {
		display: block;
		font-size: $default-font-size;
	}
}

I don't see any reason why they are there. @jasmussen Can you perhaps take a look.

[samikeijonen]

Same with subhead styles. I'm not sure why these styles need to be in the editor.scss.

[jasmussen]

I'm afk for another week. I can't recall the exact circumstances but I think there was a good reason. @mtias had some thoughts.

[jasmussen]

To the initial question about quote styles in the editor, it seems it was added b763387#diff-b11180e4d3335febb0b76d7038a7ad0a, in response to #6947.

I don't personally have a super strong opinion on the stylings of quote citations, but I think I know the reason the font size rule was added back, and I believe it was the same reason why caption styles were added back (see d677a7a):

... adds back the caption styles for images and embeds. This is because the majority of existing themes won't have styles to accommodate the new figcaption markup, and are likely to be styling the WP Captions instead. For those themes, if the caption styles live in the theme.scss file, the captions will appear unstyled or broken.

Some time in the future, this can possibly be revisited and shuffled around.

Similarly, the cite feature for quotes is now available in Gutenberg, but it is likely to be unstyled in the majority of WordPress themes.

Flagging this so Tammie can take a look too.

[samikeijonen]

Makes totally sense but should these live in theme.css?

[jasmussen]

That's just it though, if they live in theme.css, you have to opt-in to them, which means few older WordPress themes will have citation styles.

Again, I don't think that's a big issue because the default browser provided styling is just italic: https://codepen.io/joen/pen/wxyBvy — but I do agree it's an issue with captions for images. But let's wait and hear what Tammie thinks.

[samikeijonen]

That's just it though, if they live in theme.css, you have to opt-in to them, which means few older WordPress themes will have citation styles.

True but now those styles are in the editor.css so you can't even opt-in those in the front end. I might be missing the big picture here though after being away for a while:)

I guess I'm trying to say that nothing front-end related should live in editor.css because as themer I can't get rid of those styles.

[mtias]

The editor view, by default, aims to look like "a vanilla theme with no styles that has opted in to theme.scss".

That's why some theme styles are placed in editor.scss. Otherwise, by default, on a theme that is not changing how blocks look, the user would have a hard time making visual sense of a block structure (quotes would look like just another paragraph, etc).

A theme that wants to modify how blocks look can overwrite the default in the editor, and avoid opting-in to styles on the front-end. Hope this helps clarify things a bit.

[samikeijonen]

Thanks, that clarifies the issue. I just don't like to overwrite anything in the editor since it breaks the CSS architecture in the theme. But not huge issue, just annoying.