Gutenberg: Consider adding color and text size customizations to all text-based blocks.

Created on 24 Jul 2018  ·  44Comments  ·  Source: WordPress/gutenberg

Currently, it's possible to change the background color and text color for paragraph blocks:

screen shot 2018-07-24 at 10 30 46 am

Those options are not available for other text-based blocks though: headings, lists, quotes, preformatted, subheadings, verse.

Conceptually, it's not immediately clear why those settings are not available to all text blocks.

Suggestion

For consistency, I think we should consider adding these options to other text-based blocks on a case by case basis. Here are some initial thoughts:

Headings
It probably doesn't make sense to include text size controls here, as it would upset the type size hierarchy of all the headings. But I think color options could make sense.

Lists
From a visual perspective, lists are essentially just a series of paragraphs with bullets/numbers — it seems like users should be able to make text size + color customizations to list blocks.

Quotes
Quotes have their own Block Styles, so I'd understand that these settings could get really complicated and messy. Color options might make sense though.

Preformatted
I think both size and color options could work here. It's worth noting that the description of this block says "Add text that respects your spacing and tabs, _and also allows styling._" (emphasis mine), but there are currently no styling options.

Subheadings
If we add text options here, I think this block might lose it's reason for existing. (It renders as just a normal paragraph with specific styles anyway). But I do think that users would expect to be able to edit the styles here.

Verse
This is visually identical to the paragraph block, so I think it should have the same size and color options.


Also, assuming we adopted any of these suggestions, those settings should carry over when using Block Transforms — if you were to transform a paragraph block to a list block, you should carry over its font size and color settings.

Needs Dev [Block] Heading [Block] List [Block] Preformatted [Block] Quote [Block] Verse [Feature] Blocks [Feature] Design Tools [Type] Enhancement

Most helpful comment

I'd like to reevaluate the background color option for these blocks. We now have a Group block that can be used to do this. Or do we want to keep background color options on both the individual text blocks and the Group block? Users can probably come up with some creative use cases if we do. 😉

What does everyone think?

👍 For keeping the background color on all these text blocks.
👎 For removing the background color and just using the Group block to add that.

All 44 comments

Quotes should become a block that uses nested Paragraph, List, and Heading blocks in the future. See #6520. So that pretty much covers having colored text in those, except for perhaps general background color.

I think the Heading and List blocks should definitely have text and background color options. I do not feel as strongly about the Preformatted and Verse blocks, but I think those should have text and background color options as well. I mainly feel this way because, while page building, you are likely to end up using various background colors provided by sections, and you will want to make your text readable on those backgrounds. The Heading, List, and Paragraph blocks would be the most-used in page building out of all the standard text blocks, and I think they definitely should have text color options.

I think the Subheading block does not need any styling options as subheadings would probably be expected to look the same across a website, not being used much (if at all) in page building contexts (it is mainly intended for things like blog posts and news articles), with any variations being supplied by themes. I would not be opposed to it having color options as well, though.

Agreed that the headings probably shouldn't include text size settings, as this could be detrimental to the visual hierarchy set by themes. However, headings and lists should at least have color options, as the paragraph block does. It should be consistent, so either the text-based blocks get colors or none of them get colors.

Got another request for this in #10377 which also sort of brought up something interesting… some themes will give different elements different sizes by default, e.g. twentythirteen styles <blockquote> in a slightly larger font size.

Would themes need to be able to set different font size options per-block? Or perhaps a default font size per block? I could see this getting messy pretty quickly.

To add onto this thread I have a few suggestions after building a couple of sites with the Gutenberg plugin. I noticed that there are a few blocks that could really use theme support for colors. Here's what I think makes the most sense (open to other ideas of course):

  • Heading block: Text color
  • Column block: Background color for wrapper, Background color for individual columns (less important)
  • List block: Text color
  • Cover block: Text color
  • Separator block: Background color

Let me know what you think!

I agree with all of this and would also like to suggest that all blocks have alignwide and align full as well. I see no reason to let paragraphs and images do this, but not headings and other content. Plus it makes it more consistent from a user perspective. The more options that apply to all blocks, the better.

As an example, if you center a heading above a wide block, the heading isn’t actually centered because the heading width is narrow. So it looks terrible.

screen shot 2018-11-28 at 10 42 25 am

Simply adding "alignwide" to the heading would then center it perfectly as desired.

screen shot 2018-11-28 at 10 45 29 am

Adding here that I think the heading (and other text blocks mentioned above) should have the color option the same way paragraph blocks do.

To add onto this thread I have a few suggestions after building a couple of sites with the Gutenberg plugin. I noticed that there are a few blocks that could really use theme support for colors. Here's what I think makes the most sense (open to other ideas of course):

  • Heading block: Text color
  • Column block: Background color for wrapper, Background color for individual columns (less important)
  • List block: Text color
  • Cover block: Text color
  • Separator block: Background color

Let me know what you think!

Very much agree - particularly with the Column block. Though I would say that individual column colours would be equally important !

@kjellr I believe your suggestions make really good sense here.

Headings - Add color options.

Lists - Add text-size and color options.

Quotes - Add color options. Does the color option also effect the left-border? Or is it only text and background options?

Preformatted - Add text-size and color options.

Subheadings - I'm unclear on the background here. Is a "subheading" block necessary? Either way, I think adding text-size and color options makes sense. As long as the user is able to switch back to the default theme settings anytime. <-- this should be true for any of the blocks i think.

Verse - Add text-size and color options.

I wonder if another ticket should be created around the possibility to adjust the size and colors and save it as a style variation for a particular block. _I know, there's probably a ticket somewhere for this._

I'd also like to move this ticket forward, so I'm opting that we don't add to the initial requested features and blocks. Other blocks and features (ie. alignment settings, and/or column backgrounds, etc) should be created in another ticket. Excellent ideas BTW!

Quotes - Add color options. Does the color option also effect the left-border? Or is it only text and background options?

Yes, I think having the color option effect the left border could be cool. Might take some testing to get it right.

Subheadings - I'm unclear on the background here. Is a "subheading" block necessary? Either way, I think adding text-size and color options makes sense. As long as the user is able to switch back to the default theme settings anytime. <-- this should be true for any of the blocks i think.

Yeah, this block has been depreciated, so I think that can be left out.

I can see a case for this, but I'm also worried. I have seen many cases in the past of users trying to control the look and feel of their site using styles in TinyMCE, which we all know is a terrible idea. I'd worry that this would encourage users to do the same things with blocks.

I can see a case for this, but I'm also worried. I have seen many cases in the past of users trying to control the look and feel of their site using styles in TinyMCE, which we all know is a terrible idea. I'd worry that this would encourage users to do the same things with blocks.

I definitely understand this concern. 🙂

However, from my perspective, there are two main arguments to adding this in:

First, a small(ish) reason: whatever we do, we should be consistent. It seems really weird that users can choose colors for a paragraph right now, but as soon as they add bullets to that paragraph, the colors disappear:

list

That's arguably a bug, and should be fixed.

But beyond stuff like that, we're in a bit of a different era compared to when we advised users against changing styles in TinyMCE. Not only can themes now provide custom color palettes to help guide users towards more consistent color usage, but we can also leverage awesome tools like our a11y contrast warning to help them make more accessible color choices. Themes can also provide standard font sizes for users to select. Gutenberg is handing a bit more control over to the user, but — unlike before — our tools today can help guide users to make better choices.

In general, Gutenberg is all about customization. Today, it's about customizing what you see inside your posts. But eventually, that'll expand to the entire site. Someday, users _will_ change the entire look and feel of their site within the context of blocks. Standardizing these sorts of things sets us all up for success along that path.

There's an interesting thread going on for the Calypso project, with this comment bringing an interesting challenge to the table:

I manually set every paragraph using HTML, and my text did not justify. I work in a university setting, and my boss requires all of our pages to have justified text. Hope this gets added soon.

From reading this, it doesn't feel like bringing back the “justify text” option on a per-block basis is going to be anything more than a bandaid solution.

Perhaps we could consider "justify text" as being a global style change, like text color is? If so, how would that look like in this interface?

I definitely agree that standardizing is the way forward, but my preference would be to remove this kind of fine grained control from the user. We could offer similar levels of control via block styles and themes, but in a way that enables users to create beautiful sites, rather than just letting them create anything.

Perhaps we could consider "justify text" as being a global style change, like text color is? If so, how would that look like in this interface?

In the classic editor it was easy to select a bit (or all) of text and apply justification. If this is a per block action in Gutenberg, it definitely will get cumbersome. It would be great to explore a way to select multiple text pieces within Gutenberg and apply a style (justification) to all of them at once.

We could offer similar levels of control via block styles and themes, but in a way that enables users to create beautiful sites, rather than just letting them create anything.

Seeing that this issue specifically targets block color and font-size, I'm hoping we can at least improve the consistency between similar blocks.

In the classic editor it was easy to select a bit (or all) of text and apply justification. If this is a per block action in Gutenberg, it definitely will get cumbersome.

Definitely agree that this is the core problem to solve.

It would be great to explore a way to select multiple text pieces within Gutenberg and apply a style (justification) to all of them at once.

This is where I'm not sure I agree.

To me, the choice between normal text and justified text is similar to the choice between Arial or Times New Roman, in that it only really makes sense to do as a global change, especially in an editor destined to write for the web. I acknowledge that you might want to just one paragraph to Arial and keep the rest Times, but that seems more like an edgecase, and _especially_ in case of justified text it seems like something that only makes sense for _all_ blocks and _all posts_.

Consider also this comment which was highlighted in the thread I referenced:

We run a local newspaper website, and have always used full justification. I've been getting worried about not being able to get it sorted, and the idea of going into every news story to add css is a nightmare.
However, the simple solution, if you are going to use full justification on all posts is to add the following css to your theme:
.post { text-align: justify; }
Obvious to most, I'm sure, but it's an option not mentioned anywhere that I've looked.
I suppose you could just add that to the advanced section on single posts, but not something I've tested.

All of the above, to me, suggests that the solution isn't to add back the justify button, but to make it easy for anyone to change the justification globally. That is — you should not have to select anything and apply a justification — it's likely better to have you change this in a more global setting context.

To me, it makes no sense to have per-block options for left, center, or right alignment, but only a global toggle for justified alignment. It feels inconsistent.

In fact, technically, Gutenberg already supports a global default for alignment... just like it supports a global default for any CSS property, given that themes can provide that. A theme can set the default text alignment to justify, and if you don't set a custom alignment on any blocks, then they should all use that alignment.

That's why the toolbar has a left align button... so you can override the default alignment, which may not be left alignment (though it is in most themes).

All of the above, to me, suggests that the solution isn't to add back the justify button, but to make it easy for anyone to change the justification globally.

I could be completely missing it, so I apologize, but I want to reaffirm that this issue does not include text justification controls. It only pertains to the color and text-size options. While I agree with the points made for justification, I believe in order to keep moving this forward, maybe we can separate those out into another issue?

I could be completely missing it, so I apologize, but I want to reaffirm that this issue does not include text justification controls. It only pertains to the color and text-size options. While I agree with the points made for justification, I believe in order to keep moving this forward, maybe we can separate those out into another issue?

Not at all, sorry for taking this slightly off track. I added my comment about justified text mostly to get impressions on whether this should be a global option or a block-local one. Definitely needs a separate ticket.

Im going to make the case for adding heading text size controls. I know it seems odd but please see this issue which provides a rationale

https://github.com/WordPress/gutenberg/issues/14183

Can we try and come to a consensus and get this built?

Can we try and come to a consensus and get this built?

I believe there's general agreement on the fact that this is needed — Just looking for a dev with time to implement at this point.

We _may_ have time to tackle this.

Can I confirm that any PR will need to tackle the following controls:

  • text size
  • text colour
  • background color

...and that these will follow the patterns already established for such controls?

Blocks in scope

Can I confirm everyone is happy with the following scope?

  • Headings - add color options.
  • Lists - add text-size and color options.
  • Quotes - add color options (also effecting the left-border).
  • Preformatted - add text-size and color options.
  • Verse - add text-size and color options.

Many thanks

That is great news! Could we also add background color to the Column and
Columns?

Troy
On the go...
703.786.8658

On Wed, Mar 20, 2019, 12:54 PM Dave Smith notifications@github.com wrote:

We may have time to tackle this.

Can I confirm that any PR will need to tackle the following controls:

  • text size
  • text colour
  • background color

...and that these will follow the patterns already established for such
controls?
Blocks in scope

Can I confirm everyone is happy with the following scope?

  • Headings - add color options.
  • Lists - add text-size and color options.
  • Quotes - add color options (also effecting the left-border).
  • Preformatted - add text-size and color options.
  • Verse - add text-size and color options.

Many thanks


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/WordPress/gutenberg/issues/8171#issuecomment-474928225,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ApJyTodW8nkePfihowepFcXb7EgQsNgnks5vYmetgaJpZM4Vc5Cl
.

Can I confirm everyone is happy with the following scope?

That sounds right to me — it's in line with @mapk's list above. 👍

Ok I'm going to take this one on.

...and that these will follow the patterns already established for such controls?

While I don't think it needs to be in scope for a first pass, as alluded in https://github.com/WordPress/gutenberg/issues/2751#issuecomment-421107960 there's some desire to more robustly applying reuse of common behavior between blocks via some context-agnostic (server-side-knowable) mechanism. This could be inferring the attributes / UI controls from a supports property (see: align supports) or via some new concept of an "abstract block type", i.e. a paragraph block uses/implements a "colorable" abstract block type (pseudo-code).

I'll follow-up on #2751 or #13693 as the more appropriate places to continue this discussion, but seemed relevant as we plan out using common behaviors consistently across many blocks.

Ok I'm going to take this one on.

Apologies but due to other commitments it's not looking likely I'm going to get a chance to work on this. 😞

I think there needs to be a filter to enable Text Color or Background color in any block.

We can add new entry to supports object like { backgroundColor: true, textColor: true }

So anyone can customize it the same way we customize available / default alignment like this:

// Make Columns default to "wide" alignment
wp.hooks.addFilter( 'blocks.registerBlockType', 'h/set_default_alignment', ( settings, name ) => {
  switch( name ) {
    case 'core/columns':
      return lodash.assign( {}, settings, {
        supports: lodash.assign( {}, settings.supports, { align: ['wide'] } ),
        attributes: lodash.assign( {}, settings.attributes, { align: { type: 'string', default: 'wide' } } ),
      } );
  }

  return settings;
});

I'd like to reevaluate the background color option for these blocks. We now have a Group block that can be used to do this. Or do we want to keep background color options on both the individual text blocks and the Group block? Users can probably come up with some creative use cases if we do. 😉

What does everyone think?

👍 For keeping the background color on all these text blocks.
👎 For removing the background color and just using the Group block to add that.

I'd like to reevaluate the background color option for these blocks. We now have a Group block that can be used to do this. Or do we want to keep background color options on both the individual text blocks and the Group block?

I'm still for keeping a background color option per block — the main use case I have in mind is for when we implement a background image for the Group block. When that happens, I can definitely see people wanting to place a paragraph (for instance) on top of that, with a background color for itself. Users shouldn't have to put a group in a group in order to achieve that.

In general, I'd like text color + background color options to be as simple and universal as they are in Google Docs for instance:

text-options

Great use case, @kjellr!

I'm in favor of keeping it as well and just thought it be good to bring this conversaton to the issue and document the decision going forward. Thanks for replying!

Let's continue adding the options listed here from @getdave.

I've recently added this feature to my EditorsKit plugin ( https://wordpress.org/plugins/block-options/ ). Below is my implementation. Let me know if this idea of mine can be added on core Gutenberg and will be very happy to help out. Thanks!

EditorsKit-Text-Colors

@phpbits I like your exploration! Right now in regards to this specific issue, I'd like to limit the color options to text color and block background color as it is in the Inspector (sidebar). If we can roll out those for each of the listed blocks first, then we can look at a way to include the highlighted text background color in a future PR. Sound good?

Have we considered nixing block-level background and text colour for text blocks in favour of inline/highlighter style colours?

This seems a more flexible way of applying colour to text (because you can apply it to a single word, or to all the words, as needed) without adding any additional overhead or UI complexity. It'd match how word processing programs apply colour to text more closely and would allow users to have more granular control over how the colour is applied.

From a design perspective, I often want to highlight short pieces of text inline, but I very rarely want to make a whole paragraph purple.

If inline colours is a feature we plan to add at some point, perhaps it's worth exploring how we might be able to replace the current text-block colouring method with a more flexible solution.

Should we open a new issue listing inline toolbar icons as a possible way to add:
Icon for: Text/word color + highlight color (similar to what @phpbits Jeffrey mentioned above)
+
Icon for: Block text color + block background color.

If we decide on going the inline toolbar route then we should do so before adding sidebar color options to all text blocks.
As the list of importance goes by direct manipulation, then toolbar and the less important items in the sidebar. I think it would be natural and less intrusive to add the color icons direct to the toolbar for all text blocks.

@mapk Glad you like it! Let me know when I can help with the implementation.

So while we're aiming to include text-level controls for color and highlighting, let's still keep this block-level control too... at least for text color right now.

Let's move to development on creating block-level control (sidebar setting) for text color changes of all text related blocks.

Text colour and background should be made to be global option, like className and added to supports list. This would mean the when the settings change, this would be reflected on all blocks both core and 3rd party blocks.

So while we're aiming to include text-level controls for color and highlighting, let's still keep this block-level control too... at least for text color right now.

I agree 100%. Having a standardized area to change colors block-wide is paramount. For more advanced users, inline coloring will be super useful - but likely not the key method to apply coloring.

Has anyone picked this up?

Has anyone picked this up?

Hey @richtabor, I believe @phpbits has been working on this PR: https://github.com/WordPress/gutenberg/pull/16014 which I _think_ aligns nicely with this issue.

This is a very important issue and hopefully someone will soon be able to follow up on it.

The new Navigation block has color background and text color in the toolbar.

Screen Shot 2020-02-03 at 02 37 21

While other blocks have color settings in the sidebar.

Screen Shot 2020-02-03 at 02 41 59

At the moment it looks like WordPress 5.4 will end up having two different ways to access the color controls. In the toolbar (Navigation block) and in the sidebar for all other blocks.

Should this be changed so that we keep it consistent for the next major release of WordPress?
Removing color controls from the sidebar and adding it into the toolbar of the blocks that today use color settings? Can we at the same time also add color settings to additional blocks?

Whether or not a setting should be placed in the toolbar or inspector depends on two things, if I remember correctly:

  • Important controls should be placed in the toolbar (e.g. text alignment on a Heading) or within the block canvas (caption field on an Image).
  • Inline rich text formatting controls (which don't affect the entire block) should never be placed in the inspector (so formatting controls like bold, italic, etc. shouldn't be placed in the inspector).

In the case of the Navigation block, the color of its links and its own background color are arguably pretty important to the block. But changing the color and background of a Paragraph block is far less common.

I do think that some blocks like the Group and Columns block should have their color controls in the toolbar, but I think it's okay to keep the color controls in the inspector for blocks like Paragraph or Heading.

Also keep in mind that an inline rich text color control is being worked on at #16014.

It's also worth noting that there have been various discussions about how the inspector is presented/accessed. Right now it is shown as a sidebar, but some have suggested it should work more like a (probably pinnable) modal that is more clearly tied to the block it is modifying and split away from the document settings sidebar. Unfortunately I can't find any of the related issues/PRs at the moment.

From a visual perspective, lists are essentially just a series of paragraphs with bullets/numbers — it seems like users should be able to make text size + color customizations to list blocks.

A comment to share user feedback from WordPress.com website owners. It comes up when people expect the same controls as the Paragraph block for text size, color, background color.

See also https://github.com/WordPress/gutenberg/issues/9016

Hi! Just want to chime in about the desirability of setting the text size on list blocks (the issue 39358 closed above). Today I was working on a page where I wanted to use a list block for a list of image credits, but I wanted a much smaller text size. I discovered through a support post that I could add has-smaller-font in the Advanced properties for the block. However, that wasn't small enough.

Because I don't have the option of adding new styles to this particular site's theme (that I could then reference in Advanced), I wound up dropping the list block and just using a group of paragraph blocks and setting each down to 12px. Not ideal, and doesn't look as nice as a list block, but that's all I could figure out.

Thank you for all you are doing to make the block editor better!

Noting a case where someone doesn't like their verse block colors, but can't change them:
https://wordpress.com/forums/topic/poetry-formatting-2/

It's not the first case. I think people would like style options and colors.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pfefferle picture pfefferle  ·  3Comments

mhenrylucero picture mhenrylucero  ·  3Comments

hedgefield picture hedgefield  ·  3Comments

spocke picture spocke  ·  3Comments

youknowriad picture youknowriad  ·  3Comments