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

[umesh84]

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: ​https://www.loom.com/share/ceea0db29302412b8bc2b3fb8dcea151

[naeemhaque]

Issue resolved by this patch

[naeemhaque]

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

[poena]

Hi!

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.

[poena]

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.

2. 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' );

3. Activate the theme.
4. 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.

[poena]

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:https://github.com/WordPress/gutenberg/issues/47209