Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Paragraph: Link colors #10171

Merged
merged 1 commit into from Sep 26, 2018
Merged

Conversation

@jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented Sep 25, 2018

Description

If a paragraph block contained a custom text color that color was not applied to hyperlinks inside it.

This PR's fixes that. In order to fix the problem, a new class 'has-text-color' was added to every paragraph that has a custom text color (set using a class or an inline style). The allows us to target paragraphs with a color which until now was not possible.

How has this been tested?

Add the following block:

<!-- wp:paragraph {"textColor":"pale-pink"} -->
<p class="has-text-color has-pale-pink-color">link: <a href="http://www.wordpress.org">WordPress</a></p>
<!-- /wp:paragraph -->

Verify the link appears in pale pink in both the front end and the editor.

Screenshots

Before:

screen shot 2018-09-25 at 18 12 04

After:

screen shot 2018-09-25 at 18 11 47

@jorgefilipecosta jorgefilipecosta changed the title Fix: Paragraph: Hyperlink colors Fix: Paragraph: Link colors Sep 25, 2018
mkaz
mkaz approved these changes Sep 25, 2018
Copy link
Member

@mkaz mkaz left a comment

Looks good, testing with different paragraphs, links, and colors and didn't see an issue.

Implementation looks straight-forward and makes sense. 👍

Loading

@jorgefilipecosta jorgefilipecosta added this to the 4.0 milestone Sep 26, 2018
@jorgefilipecosta jorgefilipecosta merged commit c8eadb4 into master Sep 26, 2018
2 checks passed
Loading
@jorgefilipecosta jorgefilipecosta deleted the fix/paragraph-hyperlink-colors branch Sep 26, 2018
@Sixtina1990
Copy link

@Sixtina1990 Sixtina1990 commented Nov 12, 2018

bildschirmfoto 2018-11-12 um 08 47 05

Hello :)

Sorry for asking dumb questions but I tried to copy paste the code up there in my CSS and get the red X/error. Can you explain me which part I need to leave out or where the mistake is? :) I don't understand much of CSS. Thank you all so much in advance.

Loading

@Sixtina1990
Copy link

@Sixtina1990 Sixtina1990 commented Nov 12, 2018

to add to my previous comment. Someone told me to do: "You can adjust this in CSS with the p.has-text-color a selector", but I didn't understand what to do. Apologies for that.

Loading

@Sixtina1990
Copy link

@Sixtina1990 Sixtina1990 commented Nov 18, 2018

Could someone help me explain the exact steps and what I need to copy since I got an error? Much appreciated. :)

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants