Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider adding color and text size customizations to all text-based blocks. #8171

Closed
kjellr opened this issue Jul 24, 2018 · 51 comments
Closed
Labels
[Block] Heading Affects the Headings Block [Block] List Affects the List Block [Block] Preformatted Affects the Preformatted Block - used for showing preformatted text [Block] Quote Affects the Quote Block [Block] Verse Affects the Verse block [Feature] Blocks Overall functionality of blocks [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.
Milestone

Comments

@kjellr
Copy link
Contributor

kjellr commented Jul 24, 2018

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.

@kjellr kjellr added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks labels Jul 24, 2018
@ZebulanStanphill
Copy link
Member

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.

@mikemcalister
Copy link

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.

@chrisvanpatten
Copy link
Contributor

chrisvanpatten commented Oct 6, 2018

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.

@riemerta6
Copy link

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!

@timnicholson
Copy link

timnicholson commented Nov 28, 2018

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

@aisajib
Copy link

aisajib commented Dec 10, 2018

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

@presidentnickson
Copy link

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 kjellr added the Needs Design Feedback Needs general design feedback. label Jan 21, 2019
@kjellr kjellr added this to the Future milestone Jan 21, 2019
@mapk
Copy link
Contributor

mapk commented Jan 21, 2019

@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!

@mapk mapk added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. labels Jan 21, 2019
@kjellr
Copy link
Contributor Author

kjellr commented Jan 21, 2019

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.

@paaljoachim
Copy link
Contributor

paaljoachim commented Feb 3, 2020

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?

@ZebulanStanphill
Copy link
Member

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.

@lancewillett
Copy link
Contributor

lancewillett commented Mar 9, 2020

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 #9016

@danyork
Copy link

danyork commented Sep 1, 2020

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!

@supernovia
Copy link

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.

@mapk mapk added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Sep 9, 2020
@youknowriad
Copy link
Contributor

Feels like we added these to a lot of blocks recently. Is there anything missing. Maybe it's better to have smaller issues now?

@paaljoachim
Copy link
Contributor

paaljoachim commented Jan 10, 2021

I am going through the various text based blocks.

Heading block - Check
Paragraph block - Check

--

List block - Has color but not yet text size adjustments.
Typography controls are being added in this PR by @scruffian Ben. #27510
Here is a Nesting with inner block issue: #6394

--

Quote block - is being rebuilt into inner blocks by @nosolosw Andrés. #25892 Not sure why this has stopped up for the moment.

--

Preformatted block - no styling options there. It is pretty quiet around this block.

--

Verse block - It looks like @scruffian Ben is adding colors to it through this PR: #27736
It still needs typography controls.

--

Table block - Currently has a background color option. Here is an issue #19659 that @talldan brought up in relation to improving the background colors. I believe the Table block could be reworked to contain inner blocks. #18768

--

Conclusion is that there are 3 blocks above where nesting/inner blocks have been discussed but have not been included yet. Quote, List and Table.

Preformatted block still needs typography and color controls.
Verse block still needs typography controls.
Table block still needs typography controls.

@youknowriad
Copy link
Contributor

@paaljoachim Do you think we should create dedicated "good first issues" for those three remaining blocks and just close this one. It will help contributors own these issues.

@paaljoachim
Copy link
Contributor

I have added the 3 issues that were needed, and believe we can go ahead and close this issue.
Please reopen if I am mistaken.

@paaljoachim
Copy link
Contributor

I believe that the Buttons block could also contain Typography controls.
#29112

@supernovia
Copy link

👋 I just wanted to see if we need a separate issue for color controls in the verse block. I see the preformatted block will get color controls; will that affect the verse block too?
https://wordpress.com/forums/topic/verse-block-background-colour/

@paaljoachim
Copy link
Contributor

Hi @supernovia Velda

There is one happening right here in this. PR:
Verse Block: Add support for custom colors
#27736

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Heading Affects the Headings Block [Block] List Affects the List Block [Block] Preformatted Affects the Preformatted Block - used for showing preformatted text [Block] Quote Affects the Quote Block [Block] Verse Affects the Verse block [Feature] Blocks Overall functionality of blocks [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests