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

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

Open
wants to merge 4 commits into
base: master
from

Conversation

Projects
None yet
8 participants
@phpbits
Copy link

commented Jun 6, 2019

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

Screen Capture on 2019-06-06 at 12-42-34

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

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2019

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.

Screen Shot 2019-06-14 at 4 59 54 PM

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

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2019

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.


return (
<>
<BlockControls>

This comment has been minimized.

Copy link
@ellatrix

ellatrix Jun 17, 2019

Member

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

This comment has been minimized.

Copy link
@phpbits

phpbits Jun 17, 2019

Author

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!

This comment has been minimized.

Copy link
@phpbits

phpbits Jun 17, 2019

Author

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

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

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:

Screen-Shot-2019-06-17-at-7 47 18-AM

@phpbits

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

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:

Screen-Shot-2019-06-17-at-7 47 18-AM

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

@ellatrix

This comment has been minimized.

Copy link
Member

commented Jun 17, 2019

  • 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

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

  • 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

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

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:

Screen Shot 2019-06-17 at 8 12 53 AM

@phpbits

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

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 :

Screen Capture on 2019-06-14 at 16-45-09 (1)

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

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

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

This comment has been minimized.

Copy link
Member

commented Jun 17, 2019

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

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

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:

59602505-e28f0100-90d4-11e9-879c-5ea3fb4c7d9c

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

@phpbits

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

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

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

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

This comment has been minimized.

Copy link
Member

commented Jun 17, 2019

@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

This comment has been minimized.

Copy link
Member

commented Jun 17, 2019

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

This comment has been minimized.

Copy link
Member

commented Jun 17, 2019

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

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

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

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

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

This comment has been minimized.

Copy link
Author

commented Jun 19, 2019

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

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jun 19, 2019

This is looking great! Nice work, @phpbits!

green

I'm not sure how to get the custom color UI inside the first popover either (I'm not sure it's possible given the way the current component is built, honestly).

A couple thoughts after trying this out:

It would be cool if the color you'd chosen was somehow reflected in the color icon. Perhaps in a little line underneath the icon, like Google Docs does:

Screen Shot 2019-06-19 at 3 18 33 PM

Most of the other buttons in this toolbar allow you to deactivate the style with a single click on the toolbar icon. It's just a tiny bit weird that this one doesn't work that way. Adopting this behavior would make it harder to change from one color directly to another, but it would bring this button in line with the way other ones work. I don't think this is 100% necessary to change, but I'm interested to hear other people's thoughts on this.

@phpbits

This comment has been minimized.

Copy link
Author

commented Jun 21, 2019

@kjellr Thanks, glad you like it! It's still a debate on whether the formats will be available on the toolbar or on the dropdown items. But yeah, it'll be really cool to have it on toolbar for easier access but I'm okay with either.

@richtabor

This comment has been minimized.

Copy link

commented Jun 28, 2019

I'd say having it be in the dropdown is fine. And +1 for having a color bar under the text color icon to add relativity to the icon/action.

Seems a bit cumbersome to clear the color though, although I'm not sure what the solution would be to make it simpler.

@phpbits

This comment has been minimized.

Copy link
Author

commented Jun 29, 2019

I'd say having it be in the dropdown is fine. And +1 for having a color bar under the text color icon to add relativity to the icon/action.

Thanks @richtabor! I would love to add the color on the icon but the dropdown only accepts the icon, unlike when it's placed on the toolbar.

Seems a bit cumbersome to clear the color though, although I'm not sure what the solution would be to make it simpler.

I think "Clear Formatting" will be easier to handle this. https://twitter.com/phpbits/status/1134044903392960512

Still waiting for the core dev's response though.

@mtias

This comment has been minimized.

Copy link
Contributor

commented Jul 1, 2019

We should make sure this takes into account add_theme_support( 'disable-custom-colors' );.

@youknowriad
Copy link
Contributor

left a comment

I noticed that it uses inline styles for all colors? Shouldn't we use the classNames for the colors that come from the theme color palette (like the block level controls).


this.state = {
isOpen: false,
};

This comment has been minimized.

Copy link
@youknowriad

youknowriad Jul 1, 2019

Contributor

Nit: could be using useState to avoid the class component.

This comment has been minimized.

Copy link
@phpbits

phpbits Jul 10, 2019

Author

@youknowriad Just clarifying, I just need to change isOpen to useState right? Thanks!

This comment has been minimized.

Copy link
@youknowriad

youknowriad Jul 10, 2019

Contributor

yes and refactor to be a functional component (hooks don't work on class components)

} from '@wordpress/rich-text';
import { URLPopover } from '@wordpress/block-editor';

const URLPopoverAtLink = ( { isActive, addingLink, value, ...props } ) => {

This comment has been minimized.

Copy link
@youknowriad

youknowriad Jul 1, 2019

Contributor

I'm starting to see this pattern across several formats, can we factorize it somehow?

This comment has been minimized.

Copy link
@phpbits

phpbits Jul 10, 2019

Author

@youknowriad Sorry for late response. It's my first contribution and not quite familiar on how creating components work on core. Do I need to create separate PR?

This comment has been minimized.

Copy link
@youknowriad

youknowriad Jul 10, 2019

Contributor

Yeah, I think it can be a separate PR. @ellatrix might have thoughts as well as she used this in other formats.

This comment has been minimized.

Copy link
@phpbits

phpbits Jul 10, 2019

Author

@youknowriad For now, I'll just change URLPopoverAtLink to different name so make it less confusing.

this.state = {
opensInNewWindow: false,
inputValue: '',
};

This comment has been minimized.

Copy link
@youknowriad

youknowriad Jul 1, 2019

Contributor

Minor: This could also be a functional component using hooks.

@phpbits

This comment has been minimized.

Copy link
Author

commented Jul 10, 2019

I noticed that it uses inline styles for all colors? Shouldn't we use the classNames for the colors that come from the theme color palette (like the block level controls).

Let me check if there's available API to change colors to classnames. The issue with using this is user switch themes. @youknowriad Do you think it's best to use classnames instead of color value? Thanks!

@phpbits

This comment has been minimized.

Copy link
Author

commented Jul 10, 2019

We should make sure this takes into account add_theme_support( 'disable-custom-colors' );.

@mtias I think I need separate PR for this one. This should be added on ColorPalette component and should automatically be applied automatically. Let me know your thoughts. Thanks!

Would love to hear your thoughts @youknowriad on this one too. Thanks!

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2019

@mtias I think I need separate PR for this one. This should be added on ColorPalette component and should automatically be applied automatically. Let me know your thoughts. Thanks!

I think ColorPalette is too low level for that. It's a generic UI component that work outside the editor context too so we shouldn't add this dependency to it.

I think in other places we used a ColorPanel with this behavior built-in. And that ColorPanel being an editor specific panel.

@phpbits

This comment has been minimized.

Copy link
Author

commented Jul 10, 2019

I think ColorPalette is too low level for that. It's a generic UI component that work outside the editor context too so we shouldn't add this dependency to it.

I think in other places we used a ColorPanel with this behavior built-in. And that ColorPanel being an editor specific panel.

@youknowriad How about adding new attribute like checkThemeSupport with false as default value. I'm not sure if ColorPanel fits on this type of color selection.

I can create separate PR on this one too since it's different topic. Just want your thoughts about this. Thanks!

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2019

How about adding new attribute like checkThemeSupport with false as default value. I'm not sure if ColorPanel fits on this type of color selection.

@phpbits no, that's not an option either. ColorPalette is a @wordpress/components component which means it can't have any dependency to core/block-editor store. You can create an override in @wordpress/block-editor if needed or add the behavior to your own custom format.

@phpbits

This comment has been minimized.

Copy link
Author

commented Jul 10, 2019

@phpbits no, that's not an option either. ColorPalette is a @wordpress/components component which means it can't have any dependency to core/block-editor store. You can create an override in @wordpress/block-editor if needed or add the behavior to your own custom format.

@youknowriad Oh! I see! I totally get it now. I'll just add a check on theme_support then. Are theme_support array available anywhere on under wp.data? Thanks!

@phpbits phpbits requested a review from etoledom as a code owner Jul 10, 2019

@phpbits

This comment has been minimized.

Copy link
Author

commented Jul 10, 2019

@youknowriad and @mtias I've updated the PR with the changes based on your feedbacks. Let me know your thoughts :)

@kjellr I can't add the selected color border when it's not on the toolbar level format. Maybe a new icon with underline at the bottom instead of just A? Thanks!

@mapk

This comment has been minimized.

Copy link
Contributor

commented Jul 17, 2019

Just testing this again. It's coming along really nicely! I'm outlining a few issues below.

  1. Custom color isn't apparent. This echoes the desire to see a color bar under the "A" icon. If we can't have that right now, maybe we can include the custom color similarly to how we do it in the sidebar? So something like this?

Screen Shot 2019-07-17 at 12 02 22 PM

OR (added "Text Color" heading to this popover)

custom


  1. When I open the color popover again, the first color in the palette is highlighted automatically with a tooltip open. This shouldn't happen.

Screen Shot 2019-07-17 at 12 04 50 PM


  1. After typing a hex value in the Custom Color field, it automatically closes. This should remain open until it is closed by the user. It happens as soon as I enter the last key in the hex value.

close


  1. When hitting after changing the color of the text in the Custom Color popover, my whole word disappeared and the text dropped me to a new line. This shouldn't happen. When I'm in a popover interface and submitting a value (or trying to) by hitting I expected the popover to just disappear and keep my selection. This didn't feel right.

enter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.