Assembler: Remove inherited color styling from linked headings

[ivan-ottinger]

Fixes #8193.

Changes proposed in this Pull Request:

• Assembler: Remove inherited color styling from linked headings

There doesn't seem to be a need for the !important inherited color override that is causing small regression with the hover link color.

Testing instructions:

1. Add Title and Heading blocks to a page / post and make sure these titles are linked somewhere (# should be enough).
2. Try changing blocks' colors, including hover color through the editor sidebar.
3. Adjust link and text colors through the Global Styles.
4. There should be no regressions or unexpected color styling on the published page / post.
5. Try to reproduce [HC] Assembler: Link hover color not updating on Post titles #8193. It shouldn't be possible.

Related issue(s):

• [HC] Assembler: Link hover color not updating on Post titles #8193
• related comment: Assembler: Improving styles #8027 (review)

[github-actions]

Preview changes

I've detected changes to the following themes in this PR: Assembler.
You can preview these changes by following the links below:

• Preview changes for Assembler

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[zaguiini]

What happens if we remove the !important but keep the inheritance?

[ivan-ottinger]

Thanks, Luis. Good point. I did not observe any issues when we remove the !important. It might be a safer approach to keep the color inheritance in place. → Added it back in the latest commit.

[allilevine]

Changing the link color and hover color worked for me in a post, but I'm not seeing the hover color when editing a template:

Is that expected?

[ivan-ottinger]

Changing the link color and hover color worked for me in a post, but I'm not seeing the hover color when editing a template:

Thanks for catching that, Allison! Keeping the color inheritance in and removing just the !important as Luis suggested above fixes that as well. 🙂

[allilevine]

This is working well for me now! I see the hover colors while editing and they show up correctly in the published post. The hover color is also visible when editing global styles. ✅

[ivan-ottinger]

Thank you for additional review, Allison!

[ivan-ottinger]

Hey @Automattic/theam 👋🏼🙂 Just wanted to check if we can merge this PR - or - whether you will be merge and deploying it later?

(I already read the docs here: https://github.com/Automattic/themes/blob/trunk/CONTRIBUTING.md, but haven't contributed to this repo yet)

Thanks!

[mikachan]

Thanks for the ping, @ivan-ottinger! Feel free to merge this PR whenever you're ready. As this is a dotcom theme, either @alaczek or @miksansegundo would usually handle the deployment, but I'm also happy to help deploy.

[richtabor]

Let me double check; I'm trying to recall why it was added in the first place.

[richtabor]

I actually think we can just remove the whole bit, as link color set to currentColor like this. I'm pretty sure this was for some specificity issue, but that has since been resolved.

[richtabor]

LGTM

[github-actions]

Theme-Check results

assembler: No changes required ✅.

---

[ivan-ottinger]

This is working well for me now! I see the hover colors while editing and they show up correctly in the published post. The hover color is also visible when editing global styles. ✅

Hey @allilevine 👋🏼 Interestingly, all is working well even with the whole color inheritance gone. I think it must have been some kind of glitch before.

The only issue I noticed (not related to this PR, nor the theme either) is that when the Title block is added when editing templates, the anchor isn't being added to the markup:

As a result, the styles don't get applied.

It is not clear to me if this is a bug or done on purpose for some reason, so I opened a new issue in the Gutenberg repo: WordPress/gutenberg#65691

---

Thank you for the additional review and merge @mikachan, @alaczek and @richtabor!

For completeness, here's the difference between having color inheritance in vs not:

with inheritance - heading link color is inherited from the text color:

without inheritance - actual link color is being used: