Add option to add text color to specific text inside RichText #16014

phpbits · 2019-06-06T04:44:51Z

Description

Add text color toolbar for #15899 and #13778

How has this been tested?

Tested on Gutenberg 5.8.0 and WordPress 5.2.1

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

mapk · 2019-06-15T00:04:31Z

This is looking sharp! I've got a few requirements before we get this merged.

I marked up, in red, everything that I think is missing right now. Please let me know if you have questions or need a more refined mockup.

Do you think you can include these in the PR, @phpbits?

youknowriad · 2019-06-15T07:43:51Z

I'm a bit concerned about the growing number of buttons in the block toolbar. I feel this shouldn't go there or at least, not by default.

ellatrix · 2019-06-17T11:49:16Z

packages/format-library/src/text-color/index.js

+
+			return (
+				<>
+					<BlockControls>


BlockControls shouldn't be used by a format. These are rich text level controls, not block level controls.

Unfortunately, it's the only way to have the button display where it should be. Without wrapping the Toolbar with BlockControls it's displaying below the block. Let me know if you have better suggestions. Thanks!

Sorry, I think I can do this. Forgot for a moment that I'm adding this on core and not separate extension. Thanks!

kjellr · 2019-06-17T11:53:18Z

I'm a bit concerned about the growing number of buttons in the block toolbar. I feel this shouldn't go there or at least, not by default.

Since this is an inline-level control, it should be placed alongside the other inline controls (bold, italic, link, etc.). This would ensure that it's also pushed down into the "more" menu automatically.

This consideration also means that we should implement the popover contextually with the highlighted text, like we do with the link popover:

phpbits · 2019-06-17T11:55:43Z

I'm a bit concerned about the growing number of buttons in the block toolbar. I feel this shouldn't go there or at least, not by default.

Since this is an inline-level control, it should be placed alongside the other inline controls (bold, italic, link, etc.). This would ensure that it's also pushed down into the "more" menu automatically.

This consideration also means that we should implement the popover contextually with the highlighted text, like we do with the link popover:

Wow! I love this UI! I'll try this one. I'll let you know how it goes. Thanks!

ellatrix · 2019-06-17T12:04:59Z

The colour button(s) should appear in the rich text tools dropdown, not in the block toolbar.
Worth noting that text and background colour used to be two different buttons. Not sure what is best.

phpbits · 2019-06-17T12:12:15Z

The colour button(s) should appear in the rich text tools dropdown, not in the block toolbar.

Worth noting that text and background colour used to be two different buttons. Not sure what is best.

I've been using Dropbox Paper and the background color highlighter is available together with bold, italic and link. I'm not really sure what's the best position either and right now I'm just experimenting on my plugin to determine which will be the best. I'm hoping the design team would have better mockup that I can follow since we all have different ideas. Thanks!

kjellr · 2019-06-17T12:13:53Z

Worth noting that text and background colour used to be two different buttons. Not sure what is best.

I think it makes sense to display them together — this would theoretically allow us to include the accessibility contrast warning in the popover as well:

phpbits · 2019-06-17T12:19:11Z

I think it makes sense to display them together — this would theoretically allow us to include the accessibility contrast warning in the popover as well

Totally makes sense when user will be adding both colors. What if I'll just add Highlight color like what Dropbox Paper have. It's also better to have separate colors available than the defined ones. Here's how it looks like when separated :

As for now, I'm just experimenting on my EditorsKit plugin based on my ideas. On here, it's better since we will surely come up with the best one.

phpbits · 2019-06-17T12:23:14Z

Also, I think it's really important to decide the number of clicks when deciding the best position. Assuming user will select custom color, which is the best position. Right now, I don't like that I can't see the text when Top Toolbar is not active. In this issue I like what @kjellr suggested but it'll surely displayed different when colorpicker is open.

ellatrix · 2019-06-17T12:25:58Z

text color + background color + warning seems quite a bit of stuff it put in a popover.

kjellr · 2019-06-17T12:40:05Z

Yeah, I'm thinking that too — especially now that I realized the custom color stuff lives in a popover within that popover. 😩

So, let's separate them out into two separate buttons. We can always explore implementing the contrast warning as a snackbar notification perhaps.

Also, when we get to it, We should maybe explore including the custom color modal inside of the first modal, rather than popping it out into a second one. For instance:

(That's also a lot for one modal, but it's better than having two modals at least)

phpbits · 2019-06-17T12:43:17Z

Also, when we get to it, We should maybe explore including the custom color modal inside of the first modal, rather than popping it out into a second one.

I'd love to do that but is this something that can be done with the current ColorPalette component?

phpbits · 2019-06-17T12:45:35Z

How about adding the Text Color icon on the toolbar since it's the one available on TinyMCE, which folks are usually searching. Then add the Highlight Color on the dropdown.

ellatrix · 2019-06-17T12:47:31Z

@kjellr You could also completely replace the popover content with the custom colour UI when you click "custom colour" and include a back "<" button at the top.

ellatrix · 2019-06-17T12:49:00Z

Also wondering if the layout could be like this:

Text colour ... clear
o o o o o

Where the last o is multi-coloured to select a custom colour.

Makes is 4 rows instead of 6.

ellatrix · 2019-06-17T12:54:45Z

How about adding the Text Color icon on the toolbar since it's the one available on TinyMCE, which folks are usually searching. Then add the Highlight Color on the dropdown.

Why? Text colour is not something we want to encourage. Before Gutenberg is was nested in the "kitchen sink". It should go in the dropdown.

phpbits · 2019-06-17T13:19:56Z

Makes is 4 rows instead of 6.

How about if there are more defined colors? Do I need to add limit on the displayed colors? Thanks!

phpbits · 2019-06-17T13:20:27Z

Why? Text colour is not something we want to encourage. Before Gutenberg is was nested in the "kitchen sink". It should go in the dropdown.

Sure thing :) I'll add both of them on the dropdown then.

kjellr · 2019-06-17T13:22:24Z

Where the last o is multi-coloured to select a custom colour.

We had something like that originally, but changed to the text link after discussion in #5258. For now, we should follow that standard.

phpbits · 2019-06-19T12:32:22Z

@kjellr I've followed the UI but I'm not sure how to adjust the ColorPallette. I've pushed the changes. Text Color format is now under the dropdown as per @ellatrix's instruction. Let me know your thoughts. Thanks!

phpbits · 2020-02-04T17:23:24Z

@paaljoachim @jorgefilipecosta tested and seems to be working as expected.

phpbits · 2020-02-04T17:24:41Z

@phpbits I'm sad to hear the volcano affected you :(

Thanks man! We're all fine now and the volcano seems to be calmer now.

ellatrix · 2020-02-06T12:33:16Z

packages/format-library/src/text-color/index.js

+	name,
+	title,
+	tagName: 'span',
+	className: 'has-inline-color',


I was hoping a class wouldn't be needed when we do this:
#15478

But I don't think it should block this feature. Let's work that out later.

ellatrix · 2020-02-06T12:35:34Z

packages/format-library/src/text-color/index.js

+
+function TextColorEdit( { value, onChange, isActive, activeAttributes } ) {
+	const colors = useSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );


Is there any way not to depend on the the block editor package?

I tried to make at least nothing crashes if core/block-editor is not available. I guess as a follow up we may try to see if a better solution is possible.

ellatrix

Looks good to me. Not sure if I like the conditional placement of the button, but we can experiment with that. Also think it would be nicer to consolidate the custom color popover, but also could be adjusted later.

mapk

Really nice work!

Not sure if I like the conditional placement of the button, but we can experiment with that.

I totally agree with @ellatrix's comment. Having it appear and disappear is somewhat odd. But I just tested this out and it was working great. I'm all for getting this in and iterating later.

paaljoachim · 2020-02-06T17:31:54Z

A lot of people will be happy with the opportunity to change the color of words..:)
I am glad we got this in!

mapk · 2020-02-07T17:37:42Z

So good to see this merged! Thanks, everyone! 🎉

afercia · 2020-03-03T15:31:07Z

Having it appear and disappear is somewhat odd.

Saw this new feature today and I'd totally second that. I would expect to find controls where I saw them the first time. Instead, they just disappear and appear in a new place. Not to mention that, from an accessibility perspective, the accessibility team has pointed out several times that the continuous appearing / disappearing of controls is highly confusing.

I'd definitely recommend to further iterate on this soon.

paaljoachim · 2020-03-04T14:43:54Z

A fix is in the works here: https://core.trac.wordpress.org/ticket/49568
and will be added to the next 5.4 RC.

paaljoachim · 2020-03-13T09:48:01Z

I have added additional issues. Where we can focus on one thing at a time.

phpbits requested review from aduth, daniloercoli, ellatrix, jorgefilipecosta, SergioEstevao and youknowriad as code owners June 6, 2019 04:44

youknowriad added Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. labels Jun 6, 2019

gziolo added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 8, 2019

ellatrix reviewed Jun 17, 2019

View reviewed changes

jorgefilipecosta force-pushed the add/text-level-color branch from f6fcf81 to ea4e4c1 Compare February 4, 2020 20:36

ellatrix reviewed Feb 6, 2020

View reviewed changes

ellatrix approved these changes Feb 6, 2020

View reviewed changes

mapk approved these changes Feb 6, 2020

View reviewed changes

jorgefilipecosta force-pushed the add/text-level-color branch 3 times, most recently from f7d1f8f to 23c7e73 Compare February 7, 2020 13:50

Add option to add text color to specifix text inside RichText editor

e4c915e

jorgefilipecosta force-pushed the add/text-level-color branch from 23c7e73 to e4c915e Compare February 7, 2020 13:53

jorgefilipecosta changed the title ~~Add option to add text color to specifix text inside RichText editor~~ Add option to add text color to specific text inside RichText Feb 7, 2020

jorgefilipecosta merged commit bc21b60 into WordPress:master Feb 7, 2020

github-actions bot added this to the Gutenberg 7.5 milestone Feb 7, 2020

dougwollison mentioned this pull request Feb 13, 2020

RichText Text Color formatting option still available with empty color palette #20205

Closed

iamtakashi mentioned this pull request Mar 12, 2020

Add a way to add inline text background color #20835

Closed

This was referenced Mar 13, 2020

Text color icon appears and disappears #20861

Closed

Add color controls for text and background into the toolbar #20862

Closed

chvillanuevap mentioned this pull request May 27, 2020

Add filter to allow other formats to be placed outside the dropdown menu in RichTextToolbarButton #22663

Open

This was referenced Jun 18, 2020

Allow changing text color of a character #20798

Closed

Allow Selecting Text Color in Blocks with Text wordpress-mobile/gutenberg-mobile#1212

Closed

antonis mentioned this pull request Oct 25, 2021

Paragraph block: Highlight color disappears after you access the post/page from the mobile app (Android) wordpress-mobile/gutenberg-mobile#4155

Closed

oandregal mentioned this pull request Nov 25, 2021

Highlight color palette only shows colors from the last source #36886

Open

jasmussen mentioned this pull request Dec 2, 2021

Polish color indicator and itemgroup. #37028

Merged

7 tasks

Add option to add text color to specific text inside RichText #16014

Add option to add text color to specific text inside RichText #16014

Conversation

phpbits commented Jun 6, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

mapk commented Jun 15, 2019

youknowriad commented Jun 15, 2019

ellatrix Jun 17, 2019

Choose a reason for hiding this comment

phpbits Jun 17, 2019

Choose a reason for hiding this comment

phpbits Jun 17, 2019

Choose a reason for hiding this comment

kjellr commented Jun 17, 2019

phpbits commented Jun 17, 2019 • edited Loading

ellatrix commented Jun 17, 2019

phpbits commented Jun 17, 2019

kjellr commented Jun 17, 2019

phpbits commented Jun 17, 2019

phpbits commented Jun 17, 2019 • edited Loading

ellatrix commented Jun 17, 2019

kjellr commented Jun 17, 2019 • edited Loading

phpbits commented Jun 17, 2019 • edited Loading

phpbits commented Jun 17, 2019 • edited Loading

ellatrix commented Jun 17, 2019

ellatrix commented Jun 17, 2019

ellatrix commented Jun 17, 2019

phpbits commented Jun 17, 2019

phpbits commented Jun 17, 2019

kjellr commented Jun 17, 2019

phpbits commented Jun 19, 2019

phpbits commented Feb 4, 2020

phpbits commented Feb 4, 2020

ellatrix Feb 6, 2020

Choose a reason for hiding this comment

ellatrix Feb 6, 2020

Choose a reason for hiding this comment

jorgefilipecosta Feb 7, 2020

Choose a reason for hiding this comment

ellatrix left a comment

Choose a reason for hiding this comment

mapk left a comment

Choose a reason for hiding this comment

paaljoachim commented Feb 6, 2020

mapk commented Feb 7, 2020

afercia commented Mar 3, 2020

paaljoachim commented Mar 4, 2020 • edited Loading

paaljoachim commented Mar 13, 2020

phpbits commented Jun 6, 2019 •

edited

Loading

phpbits commented Jun 17, 2019 •

edited

Loading

phpbits commented Jun 17, 2019 •

edited

Loading

kjellr commented Jun 17, 2019 •

edited

Loading

phpbits commented Jun 17, 2019 •

edited

Loading

phpbits commented Jun 17, 2019 •

edited

Loading

paaljoachim commented Mar 4, 2020 •

edited

Loading