Make WordPress Core

Opened 4 years ago

Last modified 8 weeks ago

#49787 assigned defect (bug)

Twenty Nineteen: Text color isn't reflected

Reported by: karmatosed's profile karmatosed Owned by: poena's profile poena
Milestone: 6.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-testing needs-refresh
Focuses: css Cc:

Description

The new text color feature doesn't work in Twenty Nineteen, you are unable to change the text color.

http://cldup.com/M49Ikw3xxW.png

Attachments (5)

49787.diff (767 bytes) - added by samful 4 years ago.
CSS Only patch (needs to be made into SCSS)
49787.2.diff (2.2 KB) - added by samful 4 years ago.
full patch with SCSS
49787.3.diff (1.2 KB) - added by ryelle 2 years ago.
Capture.PNG (46.6 KB) - added by smit08 2 years ago.
screenshot that shows some colors are working in text color tool and some are not working.
#49787.3.patch (557 bytes) - added by smit08 2 years ago.
In 2019 theme only primary, secondary and dark green color required the editor css so i created a patch for this 3 colors only.

Download all attachments as: .zip

Change History (20)

#1 @SergeyBiryukov
4 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Text color isn't reflected in Twenty Nineteen to Twenty Nineteen: Text color isn't reflected

@samful
4 years ago

CSS Only patch (needs to be made into SCSS)

#2 @samful
4 years ago

  • Focuses css added
  • Keywords needs-refresh added; needs-patch removed

The styles were not being included in the "twentynineteen/style-editor.css" file, I uploaded a patch putting css directly in here, but someone needs to convert this to SCSS and add it to "twentynineteen/style-editor.scss" file.

I tested and 2017 and 2020 do not have this issue.

@samful
4 years ago

full patch with SCSS

#3 @samful
4 years ago

  • Keywords has-patch added; needs-refresh removed

Added full patch with SCSS, this was my first time using SASS, so if a SASSY master would look over it for me that would be great!

This ticket was mentioned in Slack in #core-themes by sabernhardt. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


3 years ago

@ryelle
2 years ago

#6 @ryelle
2 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from Awaiting Review to 5.9

I updated the patch to use the same colors as in /sass/blocks/_blocks.scss, and removed the .has-inline-color since it's not technically necessary. This only fixes the issue for the default colors, though.

It's possible to change the primary color in the customizer, and the colors are not updated in the editor. Twenty Twenty had the same issue, see this comment on #50120. The generated CSS in /inc/color-patterns.php needs to be updated.

This ticket was mentioned in Slack in #core-css by danfarrow. View the logs.


2 years ago

#8 @sabernhardt
2 years ago

  • Owner set to danfarrow
  • Status changed from new to assigned

#9 @smit08
2 years ago

Hi @karmatosed i have tested it in wordpress 2019 theme and i found it that the text color tool is working, but it is not working on some particular colors like primary, secondary, dark grey etc. But it is working on white and shades of yellow. I am attaching the screen-shot of it.

Testing steps:

  1. wp v5.8.1
  2. theme Twenty Nineteen
  3. add text color on text. add color like primary, secondary, dark grey etc.

screenshot link: https://prnt.sc/1wzcbo8

@smit08
2 years ago

screenshot that shows some colors are working in text color tool and some are not working.

@smit08
2 years ago

In 2019 theme only primary, secondary and dark green color required the editor css so i created a patch for this 3 colors only.

#10 @smit08
2 years ago

  • Keywords needs-testing added; needs-patch removed

This ticket was mentioned in Slack in #core by chaion07. View the logs.


2 years ago

#12 @poena
2 years ago

  • Keywords needs-refresh added

Hi @smit08
Twenty Nineteen uses SCSS and custom SCSS variables. The scss files needs to be compiled/built to create .css files.

Changes made directly to the style-editor.css are overwritten during that build process.
That is why it is not enough to change only style-editor.css.

.has-inline-color is not necessary.

@ryelle mentioned that the primary color can be customized, and that changing the CSS files is not enough to solve the full issue.

Here is how to confirm that:

1) Activate the theme.
2) Open the customizer.
3) Open the colors and select "custom". Set a color, save.
4) Open the block editor.
5) Select a text like a paragraph block and select "highlight" via the block toolbar settings. Select the primary color that you just changed.
6) Confirm that the text is still blue, not the custom color.

Last edited 2 years ago by poena (previous) (diff)

#13 @sabernhardt
2 years ago

  • Milestone changed from 5.9 to Future Release

With 5.9 Beta 1 release happening in a few hours, moving this ticket to future release.

#14 @sabernhardt
13 months ago

#56960 was marked as a duplicate.

#15 @poena
8 weeks ago

  • Milestone changed from Future Release to 6.5
  • Owner changed from danfarrow to poena
Note: See TracTickets for help on using tickets.