Link Color inheritance mismatch between editor and frontend.

[scruffian]

Description

Link color settings are inherited differently in the editor and the front end. If I create a group block and set the link color to red, and then create a paragraph block and set the link color to purple, in the editor the link appears purple (as I would expect)

However in the frontend the group link color setting takes precidence:

Step-by-step reproduction instructions

1. Add a group block
2. Set the link color to red
3. Add a paragraph block to the group
4. Set the link color to purple

Screenshots, screen recording, code snippet

No response

Environment info

• The screenshots above are for emptytheme, but this is an issue in all themes.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[oandregal]

There are two issues here:

• Applying the link color is not deterministic in the editor. If I apply the link color to the paragraph and then to the group, the link color is the one set by the group. If I do it the other way around, the link color is the one set by the paragraph.
• In the frontend, the paragraph's link color is overwritten by the group's link color always.

[oandregal]

Does this happen as well with other block supports that use render_block? I'm imagining all block supports for blocks that can be nested should be impacted: spacing and layout (I can't think of a use case in which duotone would fail). cc @youknowriad @andrewserong

[oandregal]

I'm tentatively marking this as 5.9 must-have so it gets attention.

[adamziel]

Was this solved by #38646 @glendaviesnz @scruffian ? I'm asking because this issue is on the WordPress 5.9.x board and I am not sure whether it's already done, and will be a part of the Wednesday Gutenberg release that will become a part of WordPress 6.0, or is there still anything left to address here.

[scruffian]

We still need to finish #37728

[ndiego]

I was just testing this, and a custom Paragraph link color seems to always be respected now over the Group link setting.

However, the following applies in the Editor, which is quite unintuitive:

Applying the link color is not deterministic in the editor. If I apply the link color to the paragraph and then to the group, the link color is the one set by the group. If I do it the other way around, the link color is the one set by the paragraph.

[paaljoachim]

[Block] Comment Template color adjustment -> Overrides inner child color adjustments
#40255
(It looks like I made an issue which is a duplicate of this one.)

[getdave]

Applying the link color is not deterministic in the editor. If I apply the link color to the paragraph and then to the group, the link color is the one set by the group. If I do it the other way around, the link color is the one set by the paragraph.

I also just stumbled across this bug whilst fixing the Nav block.

[remcotolsma]

We at @pronamic also ran into this problem when developing a custom-made FSE theme. It also seemed to be random, this has to do which selector is defined first, since the selectors are equally strong/specific:

.wp-elements-ba184554bad9e69bbbc29ea318deea67 a, .wp-elements-f39b8145e83d7c65b86a46adcf512dca a {
    color: var(--wp--preset--color--secondary);
}
.wp-elements-3b2e6065b6a135ad8b5c36b41b3628b1 a {
    color: var(--wp--preset--color--white);
}

Simplified example:

<div class="block-1"><a href="#">Block 1</a></div>

<div class="block-2"><a href="#">Block 2</a></div>

<div class="block-2">
	<a href="#">Block 2</a>

	<div class="block-3">
		<a href="#">Block 3</a>
	</div>
</div>

.block-3 {
	background: White;
	color: Black;
}

.block-3 a {
	color: Black;
}

.block-1,
.block-2 {
	background: Black;
	color: White;
}

.block-1 a,
.block-2 a {
	color: White;
}

Block 3 link is white on white:

https://codepen.io/remcotolsma/pen/BaOwPep

I was a bit surprised and amazed that this issue has been going on for quite some time, hopefully a Gutenberg expert can come up with a solution for this. 🙏