-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
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 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):
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. Simply adding "alignwide" to the heading would then center it perfectly as desired. |
Adding here that I think the heading (and other text blocks mentioned above) should have the color option the same way paragraph blocks do. |
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! |
Yes, I think having the color option effect the left border could be cool. Might take some testing to get it right.
Yeah, this block has been depreciated, so I think that can be left out. |
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. While other blocks have color settings in the sidebar. 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? |
Whether or not a setting should be placed in the toolbar or inspector depends on two things, if I remember correctly:
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. |
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 |
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 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: It's not the first case. I think people would like style options and colors. |
Feels like we added these to a lot of blocks recently. Is there anything missing. Maybe it's better to have smaller issues now? |
I am going through the various text based blocks. Heading block - Check -- List block - Has color but not yet text size adjustments. -- 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 -- 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. |
@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. |
I have added the 3 issues that were needed, and believe we can go ahead and close this issue. |
I believe that the Buttons block could also contain Typography controls. |
👋 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? |
Hi @supernovia Velda There is one happening right here in this. PR: |
Currently, it's possible to change the background color and text color for paragraph blocks:
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.
The text was updated successfully, but these errors were encountered: