Move opinionated styles to theme.css

[BinaryMoon]

The addition of an opt in theme.css is a good thing - but it's not currently useful. There's still loads of content in styles.css that is opinionated and not structural.

I think that theme.css should contain anything that changes how the content looks. Color, background color, margins & padding (with sizes - auto for centering is fine), font sizes, borders. The only things that should be loaded globally are things that affect position/ layout.

Some examples:

p.wp-block-subhead{font-size:1.1em;font-style:italic;opacity:.75}
The font size doesn't fit my typographic scale. The style and opacity break my styleguide.

.wp-block-pullquote{border-top:4px solid #555d66;border-bottom:4px solid #555d66;color:#40464d;padding:3em 0;text-align:center}
The borders and colours don't match the themes quote styles. The color doesn't fit in my colour palette work, and won't show on themes with a dark background. The padding breaks the themes vertical rhythm. The centering is ok I guess, but is also opinionated. All of these styles are attached to blockquotes which I already style so I want to turn them off entirely.

.wp-block-image.is-resized figcaption{-ms-grid-row:2}
May need a separate ticket for this but why is there no grid-row rule here? And why no other prefixes?

At the moment I am considering dequeuing all gutenberg styles from the front and back end using my own since it's more effort to override default styles than it is to write it again from scratch.

My other thought is to include the block .scss files, and then I can only use the ones I want - but that may not be so straight forward once the code is in core.

[samikeijonen]

At the moment I am considering dequeuing all gutenberg styles from the front and back end using my own since it's more effort to override default styles than it is to write it again from scratch.

That's how I do it but didn't find a way how to do it in the editor.

But I can see why styles like p.wp-block-subhead are loaded by default. Otherwise theme would not have any styles on subhead.

[BinaryMoon]

But I can see why styles like p.wp-block-subhead are loaded by default. Otherwise theme would not have any styles on subhead.

I can understand that, but the styles could be simplified so there's less to override. At the moment the easiest way to remove the defaults is to remove everything.

That's how I do it but didn't find a way how to do it in the editor.

I have yet to try but my understanding is that you remove the current style enqueue action and then enqueue just the styles you want. You can see the conversation about this here:
#6947 (comment)

[mtias]

This was the goal, just didn't want to do it all in one go. Would you be up for starting individual PRs for each block that might contain styles that should be moved to theme.scss?

[BinaryMoon]

@mtias I would be willing to do that, but I don't know how to do it (at least not all of it). Is there someone I could ask a couple of questions before I start?

Specifically I want to know about the best way to create multiple pull requests at once. I've only ever done one at a time.

Also I'd need to know about the code structure - like which scss files do what?

[mtias]

Just creating a pull request per block at a time is fine. For the structure, see the one I did here: #7062

You end up with three potential style imports in the component style (structural), editor (specific support for editor UI), theme (opinionated visual styles).

[BinaryMoon]

@mtias thanks - that quote block helps a lot. How do you create a pull request per block? When I have submitted prs for other projects and then tried to work on something else the newly committed code gets added to the previous pull request. Do I have to create branches? Checkout code multiple times? something else? I'm not a Git expert :)

[samikeijonen]

Yes, you'd create different branches for each PR. Here is workflow info.

Ping me in Slack if you need help.