Add text color option to Heading block

[ZebulanStanphill]

Issue Overview

You can change the text color of a Paragraph block, so I feel like it makes sense for you to be able to change the text color of a Heading block as well. Of course, the Paragraph block also has size options, which would probably be a bad idea to include by default for the Heading block, since the size of headings is usually important in helping determine where they are in the hierarchy and structure of the document. But text color does not interfere with this aspect of headings, so perhaps adding text color as an option in the sidebar should be considered?

Related Issues and/or PRs

#5775
#5776
#5777

[karmatosed]

Increasing sizes makes sense but I don't think in this case adding text color does. This is something maybe for the future, for now closing though. Thanks for the suggestion and just to note that closing doesn't mean we can't reopen if we feel later the need to do this.

[ZebulanStanphill]

Huh. That is the opposite of what I would have thought, but I can see what you mean. Should I open an issue for considering adding a text size option for headings instead?

[nk-o]

@karmatosed since you have this possibility in paragraph block, we need also change colors for the Headings.

How it looks for me now:

[karmatosed]

@nk-o I'm not sure that's a fair example as you've styled it to have a background yes? I think in version one we're fine with not having this.

[nk-o]

@kadamwhite yes, this is our plugin for backgrounds (AWB on wordpress.org). And as I know, default block Cover Image will be changed to work with nested blocks (#5452), so you will be needed to add the color option in the heading block.

I don't understand why this option added for paragraphs, but not for headings, this is the same part of content like a paragraph. I would not ask such a question if the paragraph had no color option. I would have silently created the extension for it.

p.s. The same situation for all of these blocks:

[ZebulanStanphill]

I agree with @nk-o; it seems odd to have text color options for the Paragraph block but not the Heading block as well. Especially in the context of nested blocks, having text color options would be really useful. Of course, one alternative would be to add text color options to the Cover Image, Quote, and proposed Section blocks (all of which would use nesting, and whose text color options would be inherited by the child blocks), but I do not see why you should not also have text color options for individual Heading blocks. Heading blocks are, by their nature, usually mixed in with Paragraph blocks, and having the ability to color the text of one but not the other seems inconsistent. (The same applies to List blocks, and to a lesser extent the Subhead and Verse blocks.)

[myleshyson]

Yea I think it's a little weird we can't update the header color for dark backgrounds. Unless your designing a basic WordPress website, it's extremely common to have sections in a webpage that have different colors. It would be nice not to have to create my own heading block that supports text color if I can just use the one that comes with the Gutenberg editor. @SuperGeniusZeb is right that headers by their very nature are very tied in with paragraph content. And I think @nk-o is a fair example because isn't that one of the main reasons for switching over from the classic editor? That content managers can style their pages and blog posts with ease without needing clunky ACF fields? I'm not trying to be combative, but I am curious as to why text color for the header block was intentionally left out given that you can style the background of the paragraph block?

[karmatosed]

It's worth adding a note that you can change anything in the editor with theme styles which could work as a suggestion. Similarly block specific styles is being worked on: #7362

[ZebulanStanphill]

@karmatosed has a good point. Themes could add any number of styles to Heading, Paragraph, List, and other various blocks that could easily be used, and themes can also provide the default styling for blocks. Those two things greatly reduce the need for color options on most blocks, assuming you are using a theme that provides style variations. However, I am not sure if it eliminates the need for color options on Heading and List blocks or whether those options are still necessary for core.

[Fokusiv]

How can this be disregarded? It is obvious that there need to be an option to change the heading color. As @ZebulanStanphill points out, the paragraph has that option, why does the heading not have it? This block should be ready to be used in nested blocks, and if there is no chance of changing the color within the editor, it won't be able to be used in those blocks.

[myleshyson]

Can we please reopen this? Our agency makes highly dynamic themes for our clients and not being able to use the color pallette on the header block is disappointing. We don't always use a global style for our headers, especially when they are on backgrounds that are different colors. I created a section block where the background can change colors. Sometimes we need the text to be white, sometimes black. Sometimes we need to add a portfolio project and match the text color to the color pallette of that specific project. None of those things are solved by having a global theme header styling. Currently I have to create color classes for each new color and train our content editors on how to use those classes as well as keep a sheet with all of the available color classes they can use (text-blue, text-orange, etc.). It's a lot of extra work for something that can be addressed fairly simply by adding color options to the header.

[Mocha365]

@karmatosed seriously? You don't think having a colour option for headings is not needed? If someone adds a dark background, such as the media text block where the text area has a dark background and yes you can colour the paragraph, but adding a heading, guess what, the dark heading colour on a dark background is a problem.

[curiouscrusher]

This feature really should be re-opened. Having the ability to change color on paragraph text but not headings is counterintuitive. Let's say you want to have some nice text on a full width colored background, and the background can have different color options.
Oh but wait now only the paragraph text is readable because the heading happens to be the same color as the background.

This is creating the need for an additional custom block that serves the exact same purpose as the heading block, but actually includes a color picker. Simple content blocks also should not need to be 100% dependent on theme classes to create basic, legible, and customizable content, so suggesting adding classes to the headings is not a practical solution.

[Fokusiv]

This feature really should be re-opened. Having the ability to change color on paragraph text but not headings is counterintuitive. Let's say you want to have some nice text on a full width colored background, and the background can have different color options.
Oh but wait now only the paragraph text is readable because the heading happens to be the same color as the background.

This is creating the need for an additional custom block that serves the exact same purpose as the heading block, but actually includes a color picker. Simple content blocks also should not need to be 100% dependent on theme classes to create basic, legible, and customizable content, so suggesting adding classes to the headings is not a practical solution.

Yes, +1! Please re-open

[huntercross]

+1 for re-open

[paaljoachim]

I do think that a consistency should exist between all blocks that handle text. As one expects the options to be present. This would especially mean background color and text color.

[SolespireMarcus]

A search on Bing (yes, I'm odd) brought me here. Colour settings for the Heading block is what I'm looking for, so it appears I've come to the right spot. Count me in as a +1.

[codemonkeynorth]

+1 from me. This is literally the second thing I wanted to do after adding a split column layout. Thanks

[speedwheel]

+1 for adding text color change for h1...h6

[nickcernis]

Custom heading colors is so important for theme developers trying to rebuild existing themes and pages for Gutenberg. “How do I change the heading color?” has been a popular support request too.

[dreamwhisper]

Color options for headings are critical as we move towards building more robust blocks that allow rich content within themes and sites. With the addition of color options, we're no longer limited to the paragraph tag or usage of Advanced Custom CSS classes that are not easily discoverable or easy for the end user.

Having the color option improves the ability to structure accessible content within containers with various background colors.

[haveboard]

+1 for color options for Heading. Any justification to not have it really doesnt make sense.

[flexerd]

Headings as well as lists. We can certainly add our own styles, but none -technical users which Gutenberg was intended for this is critical in blocks that allow background colour such as image-text block big +1

[mwhiteley16]

+1 especially with the ability to nest within cover blocks on the way.

[bumpagyal]

Please allow color changes for Headings.

[mcknightd]

Agreed we need this badly.

Until then, I guess we can define some css classes to specify the colors in headings.

[chaiperez]

Another +1 🙋🏻‍♂️

[justintadlock]

The new "Group" block makes this an absolute necessity now. Because the group block can have a custom background, it makes headers unreadable unless theme authors map every editor color with a fallback text color. And, that doesn't even account for users choosing a custom background color not defined by the theme.

[transpose-aaron]

Again a +1 for color options for Headers

[awemous]

Add colour options please!

[juggernautdigital]

+1 absolute necessity. Strange its not rolled out by now.

[bradvin]

yet another +1 on this feature. Come on guys - surely you can see this is needed?

[KarenS6]

Yet another +1 for this feature. As I am creating new pages for my website, they are suddenly out of sync with the other pages because I keep to a colour scheme. So very frustrated. Now going off to find a work around. Such a waste of my time.

[mwhiteley16]

FYI - while this is needed for sure, the workaround is simple. Add the color class to the advanced tab, which is all the color palette and block styles does anyhow. So if you have a color named “blue” just add the class “has-blue-color”.

[benilla]

+1

[presidentnickson]

Has this not been added already ... ?

[maidulcu]

+1 for color option on the heading block.

[paaljoachim]

Heading text color has already been added to the sidebar.
(EDIT: It has been added to the plugin and not yet to WordPress core.)

See this example:

There is a PR open move all of these controls to the toolbar instead: #16014

[mwhiteley16]

@paaljoachim It has been added in the plug-in version, not core as far as I know.

[paaljoachim]

Hey Matt.
I just checked. Yup your right. It is only added to the plugin for now. That means in the next major release of WordPress core Heading color will be included.

That means WordPress core version 5.3 to be released sometime in the middle of August (If I remember correctly.)

[mwhiteley16]

Looking forward to it....along with the group block and a few others only available in the plugin. That controls toolbar you linked to in the other PR looks awesome BTW.