Gutenberg: Frontend styles for some blocks are only partially present

[nylen]

For blocks shipped by default with the Gutenberg editor, I would mostly expect the same styles to be present on the frontend as in the editor. However, for the Quote block, this is not the case:

The same section of this post on the front-end:

[samikeijonen]

There are couple of blocks which have this same issue. At least quote and separator <hr>.

1. Pretty much all themes already have styles for <blockquote> and <hr>.
2. If Gutenberg adds own styles to front-end, they will overlap with theme styles. For some themes it could be minor, and for some bigger design issues.
3. Can all themes have same styles in the editor and in the front-end by default? No :)

[mtias]

See https://github.com/WordPress/gutenberg/pull/3262 for some more context on when this was changed. I think we might want to allow a theme to reuse gutenberg styles for these generic blocks (blockquote, hr, etc) if they want to.

[nylen]

If themes need to opt in to Gutenberg-specific styles, then those styles should only be shown in the editor once the theme has opted in. Somewhat similar to #2595 in that regard.

The current behavior is confusing and not WYSIWYG.

[mtias]

@nylen it is an interesting situation, I'm not sure about what is the best default. @jasmussen seemed to think it was ok for the editor to have some basic styles even if not reflected. Whatever we do there will have to be some involvement from themes — the question is whether that involvement will come from old themes or new themes. The natural thing would be to opt for new themes needing the changes, but that is debatable.

[samikeijonen]

For old themes WYSIWYG is pretty hard anyway. Starting with font-family.

[jasmussen]

@jasmussen seemed to think it was ok for the editor to have some basic styles even if not reflected. Whatever we do there will have to be some involvement from themes

I would ask for opinions by @melchoyce and @karmatosed also.

But my opinion is this: as a _visual editor_ with no theme editor styles loaded, it's always going to be a balancing act. Bold text should be bold images that are right-aligned should be right aligned, all that even if the theme hasn't explicitly opted into this behavior.

For the new image styles we added, wide and full-wide, we require opt-in before those style buttons are shown on the image blocks quick toolbar. This is because these are not basic styles that we can _assume_ that the WordPress theme will support out of the box. I emphasize _assume_ exactly because it's a balancing act, where we as designers and developers have to evaluate a style on a case by case basis:

• Bold, italic, links — pretty safe to assume the theme has these styles in some way
• Left, center, right aligned, same.
• More advanced layout options: opt-in.
• Basic ordered and unordered list styles — fine to assume, right?
• Blockquote style 1 — surely we can assume the theme styles this?
• Blockquote style 2 — should probably require opt-in

The whole discussion will take on new nuance once editor style support lands. And that's why we have to have some basic Gutenberg styles to communicate the visual _intent_, until the theme can show these styles 1:1 in the editor.

Edit: I misspoke, turns out basic editor style support is already present, even though improvements can definitely still be made. The point still stands for having basic styles to communicate intent, for themes that do not provide this editor style.

[karmatosed]

But my opinion is this: as a visual editor with no theme editor styles loaded, it's always going to be a balancing act. Bold text should be bold images that are right-aligned should be right aligned, all that even if the theme hasn't explicitly opted into this behavior.

This is a good foundation to go by. I agree with your list @jasmussen of what we can assume:

Bold, italic, links — pretty safe to assume the theme has these styles in some way
Left, center, right aligned, same.
More advanced layout options: opt-in.
Basic ordered and unordered list styles — fine to assume, right?
Blockquote style 1 — surely we can assume the theme styles this?
Blockquote style 2 — should probably require opt-in

A side point, we need to do a lot of theme testing, @samikeijonen would you be up for helping that? It's important we test Gutenberg in as many themes as possible over just assuming.

[samikeijonen]

Sure, I can help testing. My testing would also include building "Gutenberg ready" themes.

[karmatosed]

@samikeijonen that would be great testing, thank you for helping with the project.

[nylen]

Bold, italic, links — pretty safe to assume the theme has these styles in some way

Blockquote style 1 — surely we can assume the theme styles this?

The specific theme in use for this example is Twenty Seventeen. Given that:

• this is likely to be a pretty common combination (Gutenberg + stock Twenty Seventeen)
• the basic styles mentioned look wildly different, including use of italics (front-end) vs none (editor)
• the quote caption on the front-end is styled using Gutenberg styles and looks more like it's part of the next pagragraph, but the quote itself uses the theme styles only

I think this specific example could use some more attention.

[samikeijonen]

Default themes are "easy" in a sense that they are updated before the new features (new editor) kicks in. In this case it would mean style tweaks here and there.

[jasmussen]

This issue absolutely deserves more attention. Front-end styles in general are overdue. We'll get to it, I think we should do a whole release around it.

[nylen]

Is Closed the appropriate status for this issue, then?

[jasmussen]

Ideally we'd have separate specific issues for frontend styles, and by "front-end styles in general" I'm referering also to the Gutenberg theme being in a better place.