Make WordPress Core

Opened 17 months ago

Last modified 6 weeks ago

#57415 new defect (bug)

Twenty Twenty One: Text color not reflected backend and Front side in media & text block

Reported by: umesh84's profile umesh84 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.1.1
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: ui, css Cc:


In Twenty Twenty One Theme: when we add a media & Text Block on the
Editor side and add the Text after apply the link on the Text and change color to the text but changes are not reflected backend and Front side.

Steps to replicate:
1: Activate the Twenty Twenty One Theme
2: media & text block
3: Add Image and Text
4: add Link on the Text after change color

For better understanding, I provide a video attachment link.
Video link:

Attachments (1)

57415.diff (1.2 KB) - added by naeemhaque 17 months ago.
Issue resolved by this patch

Download all attachments as: .zip

Change History (8)

17 months ago

Issue resolved by this patch

#1 @naeemhaque
17 months ago

  • Keywords has-patch added; needs-patch removed

I've added a patch & It's working nicely.

Version 0, edited 17 months ago by naeemhaque (next)

#2 @poena
16 months ago

  • Keywords needs-refresh added; has-patch removed


This is the intended behavior of the text color option. It only applies to text, it is not intended to colorize links.

This is unfortunate because classic themes have no way to enable the link color option that is available in the newer block themes.

The submitted patch will not work because it removes the CSS variable for the fallback color, this can have a negative effect on themes that are using this custom variable, by changing their link colors unexpectedly.

  • It also changes all links not only the link for colored text links in the media block.

Please kindly note that Twenty Twenty-One uses SASS, and style changes need to be made to the SCSS files, and then built.
Changes made directly to the .css files will be overwritten.

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

16 months ago

#4 @poena
16 months ago

I have tested this issue as part of #56487.
With the appearance-tools theme support enabled, the media end text block and the text based blocks inside of it have separate link color options.

I found a related bug, but I can reproduce that bug in other themes, it is not a bug in the theme but with the editor CSS specificity.

Testing instructions

  1. Update your WordPress test install to use the latest 6.2 nightly version.

This can be done with the Beta tester plugin.

  1. Either apply the patch for 56487, or:

Open Twenty Twenty-One in your code editor and add the following to functions.php, line 341, inside the setup function:

add_theme_support( 'appearance-tools' );

  1. Activate the theme.
  2. In the block editor, add a media and text block.

With the media and text block selected, open the color panel in the settings sidebar.
Add a text color and then a different color for the link.
Now select the inner paragraph block and add some more text. Select part of the text and make it a link.
Check if the text and link colors match the settings.
Please save and view the front. Check if the colors are correct on the front.

Next please reset the colors on the media and text block and select the paragraph block.
With the paragraph block selected, open the color panel in the settings sidebar.
Add a text color and then a different color for the link.
Check that the correct colors are used both in the editor and the front.

#5 @poena
16 months ago

In other words, if we merge 56487, this ticket can be closed without changes.

I opened an issue upstream for the related bug that I found:

#6 @poena
16 months ago

  • Keywords needs-refresh removed

#7 @karmatosed
6 weeks ago

  • Keywords has-patch added
Note: See TracTickets for help on using tickets.