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

Add an external link icon and css style. #53

Merged
merged 4 commits into from
Dec 11, 2022

Conversation

StevenDufresne
Copy link
Contributor

@StevenDufresne StevenDufresne commented Nov 15, 2022

External links should display an external link icon. This PR adds an svg, taken from Gutenberg, and a class to target external links.

I wasn't exactly sure what color to give the icon. I went with a moderately dark grey color from our theme.

See WordPress/wporg-showcase-2022#42.

Drawback of this approach

Since we are only using CSS and not a block or something similar, users cannot see the external icon when viewing the post in the block editor. However, I don't expect there to be many external links, and doing more work should probably be considered only if we receive feedback from teams (maybe the documentation team may find that frustrating for example).

Screenshots

Caption Screenshot
Default Screen Shot 2022-11-15 at 9 55 59 AM
With Element font-size: 40px Screen Shot 2022-11-15 at 9 55 47 AM
Inline Screen Shot 2022-11-15 at 10 45 32 AM
Alternative color option -- Not Implemented here Screen Shot 2022-11-15 at 9 56 41 AM

How to test the changes in this Pull Request:

  • Add a link to some post content, add external-link class to the element. Expect to the the icon.
  • Alternatively, you can add the class to the direct parent of the <a>
    • This is done in case we don't have direct access to the <a> element.

@StevenDufresne StevenDufresne added the [Component] Theme Templates, patterns, CSS label Nov 15, 2022
@StevenDufresne StevenDufresne marked this pull request as draft November 17, 2022 03:37
@StevenDufresne
Copy link
Contributor Author

Here's the updated view:

Place Image
Regular link Screen Shot 2022-12-08 at 4 19 03 PM
Scales with font size Screen Shot 2022-12-08 at 4 24 13 PM
Embedded link Screen Shot 2022-12-08 at 4 18 35 PM
Embedded link light Screen Shot 2022-12-08 at 4 18 26 PM

Notes:

  • I have added a external-link-light for places where we have dark backgrounds
  • I have also added styles in case we have access to the anchor tag directly

@StevenDufresne StevenDufresne marked this pull request as ready for review December 8, 2022 07:31
@StevenDufresne StevenDufresne requested a review from ryelle December 8, 2022 07:32
Copy link
Contributor

@ryelle ryelle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Theme Templates, patterns, CSS
Projects
Development

Successfully merging this pull request may close these issues.

2 participants