Opened 5 years ago
Last modified 5 months ago
#49787 assigned defect (bug)
Twenty Nineteen: Highlight text color isn't reflected in the editor
Reported by: | karmatosed | Owned by: | poena |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | needs-testing has-patch |
Focuses: | css | Cc: |
Attachments (5)
Change History (36)
#1
@
5 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
#2
@
5 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.
#3
@
5 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.
4 years ago
This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.
4 years ago
#6
@
4 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.
3 years ago
#9
@
3 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:
- wp v5.8.1
- theme Twenty Nineteen
- add text color on text. add color like primary, secondary, dark grey etc.
screenshot link: https://prnt.sc/1wzcbo8
@
3 years ago
screenshot that shows some colors are working in text color tool and some are not working.
@
3 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.
This ticket was mentioned in Slack in #core by chaion07. View the logs.
3 years ago
#12
@
3 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.
#13
@
3 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.
#15
@
14 months ago
- Milestone changed from Future Release to 6.5
- Owner changed from danfarrow to poena
#16
@
11 months ago
- Summary changed from Twenty Nineteen: Text color isn't reflected to Twenty Nineteen: Highlight text color isn't reflected in the editor
#18
@
11 months ago
Testing with WordPress current trunk:
- Highlights with a color from the palette does not work in the editor.
- Highlights with a color from the palette works on the front.
- When the primary color is updated in the Customizer, the highlights on the front only works for blocks that has a block class name, so it does not work for paragraphs and lists.
The current selector is:
.entry .entry-content > *[class^="wp-block-"] .has-primary-color
- Highlights with a custom color from the color picker works in the editor and front.
There are pull requests in the Gutenberg GitHub repository for adding the wp-block-blockname CSS classes to the paragraph and list blocks, but there is no ETA.
This ticket was mentioned in PR #5921 on WordPress/wordpress-develop by @poena.
11 months ago
#20
- Keywords has-patch added; needs-refresh removed
Trac ticket: https://core.trac.wordpress.org/ticket/49787
Many text based blocks that uses the RichText component has an option called "Highlight".
The option was not working in the editor, and was only working partially on the front.
This pull request adds CSS that applies the correct color when the highlight option in the block toolbar is used, and the color is chosen from the theme palette.
It also adds new selectors for the highlighted element, <mark>
, that applies the correct color when the color is changed in the Customizer option. (color-patterns.php)
#21
@
11 months ago
Test instructions
Apply the patch.
Open the block editor and add three blocks with some text: A paragraph, a heading, and a list.
In each block, select parts of the text, open the More options menu in the block toolbar (the down facing arrow icon). Select the blue color, and then the dark blue color in one of the other blocks, so that both these colors are tested.
Save.
Confirm that the highlight is showing correctly in both the editor and front.
Open the customizer, open the Colors panel, and change the primary color to any custom color.
Confirm that the color is updated both in the customizer preview, the front with the customizer closed, and in the editor.
Expected Results
Confirm that the highlight is showing correctly in both the editor and front.
#23
@
8 months ago
I am unable to get the patch working in the latest version of WordPress. This might be due to the latest patch either being the wrong one to use or some changes recently. @poena are you able to test again and see what you find please?
#24
@
8 months ago
I have updated pull request 5921 to include the latest changes from trunk for the file twentynineteen/inc/color-patterns.php
This should solve the merge conflict.
This only solves the color of the text highlight.
When the highlight color is set for the background, the custom color set in the Customizer still does not work, not in the editor or the front.
When the highlight color is set to the background, WordPress adds it inline in the style attribute, style="background-color:#0073a8"
and without adding a .has-*-background-color
class.
#25
@
7 months ago
Related: #59457 is similar, for the Calendar block
Could the text color rulesets use more generic selectors instead of limiting them to the mark
element? For example:
body .has-primary-color
instyle-editor.css
andhtml .editor-styles-wrapper .has-primary-color
ininc/color-patterns.php
#26
@
7 months ago
- Keywords needs-refresh added
@sabernhardt it could, I am ok about adjusting if @poena is but I want to make sure we do review this in that case. I am going to flag that for consideration.
#27
@
7 months ago
Could the text color rulesets use more generic selectors instead of limiting them to the mark element? For example:
body .has-primary-color in style-editor.css and
html .editor-styles-wrapper .has-primary-color in inc/color-patterns.php
Yes, if the change doesn't break anything else. How do we test "everything else" ?
It would partially solve Twenty Nineteen: Theme block styles are not applied to blocks in the widget area
In Twenty sixteen, the .has-*
is not nested.
In Twenty Seventeen, it is .entry-content .has-*
In Twenty Twenty it is :root .has-*
#28
@
7 months ago
By the way, since WordPress 6.5, WordPress outputs the registered colors as variables also for classic themes:
--wp--preset--color--primary: #0073a8; --wp--preset--color--secondary: #005075; --wp--preset--color--dark-gray: #111; --wp--preset--color--light-gray: #767676;
How can we take advantage of that (with a fallback for older versions)?
#29
@
7 months ago
Also related to highlights Gutenberg: Default/core colors missing from 'Highlight' palette.
#30
@
7 months ago
- Keywords needs-refresh removed
How do we test "everything else" ?
Exactly. I asked the question because I do not know what else might become a problem. If only two items need to specify the element/block, the CSS would not look as clean as one selector, but two probably is not excessive:
mark.has-primary-color, .wp-calendar-table.has-primary-color { color: #0073A8; }
fallback for older versions
If colors are changed to custom properties in existing rulesets, fallback would be necessary (and that change might not be the best option). However, if the custom properties are only used to support colors in ways that have never worked with the theme, making those work in the latest version of WordPress would be a success.
CSS Only patch (needs to be made into SCSS)