Header colors

[Axinet]

Issue Overview

Block details for text allow selecting text-colour from the palette (default or theme defined), but block details for headers don't have that function. I know that in #2862 issue it is a proposal to get rid of inline styles entirely, so I used field "Additional CSS Class". It works as expected on the frontend, but during editing in the admin/Gutenberg classes are not appended to elements, so even when I import common styles in admin, headers in editors still all are black. It is really inconvenient and in opposite to user-friendly and intuitive editor experience.

Expected Behavior

Show coloured headers in the Gutenberg editor.

Current Behavior

All headers are black howsoever they have custom class or not, no option to show them coloured in the Gutenberg editor (admin side).

Possible Solution

A) Allow colour palette for headers, or
B) Attach "Additional CSS Class"es to editor elements to apply styling in admin editor for better user experience/visual feedback.

[karmatosed]

In theory I can see how loading 'Additional CSS Class' to the admin makes sense. I do however have concerns over the experience. Imagine if anyone added any class, users will. As a result the entire experience on load could be dramatically effected and even cause things like buttons to vanish and clashes of layout. It would be as a result needing every class to be tested, that's a huge ask.

As a theme author you can load a custom stylesheet in the admin and I think in this case that is a better way forward than either of these two options suggested.

[Axinet]

Loading custom stylesheet in the admin gives me nothing because only a few of my headers need class eg. "accent-blue" to render them in blue colour, but even when I configure Header block to has 'Additional CSS Class' = "accent-blue", in the editor they are still black, because Gutenberg doesn't forward configured extra classes to rendered blocks. Only after save, at the front end, I can see, that given header is really blue. It is only a small problem for me (check if all required headers have set extra class manually - one by one - because of no visual clue) but for non-technical end users, it could be harder.

In my opinion, only a really small part of theme template should be extracted (by theme creator) to load at the Gutenberg side. I fully understand your concerns that loading entire theme styles make Gutenberg editor a mess for sure.

[karmatosed]

I am closing as this isn't something we are going to look at right now for phase one. This is something both themes and extending blocks could do. Noting we can always reopen but for now lets focus.