WordPress / wporg-parent-2021

17 stars 10 forks source link

Styles: Update external link icon #100

Closed ryelle closed 1 year ago

ryelle commented 1 year ago

The "external link" icon should be the up-right arrow [↗︎]. It is already used this way in the global header menu. This icon is also used on the site as a decorative element, in those spaces it's used inline as a real character. This does not change anything there.

When the external-link class is used on a link element or container (eg, paragraph), it will add the icon as a background, so that it is not underlined (and to prevent screen readers from reading it, see #94).

Fixes #64 — We've standardized on the single arrow, for both decorative and external links.

Screenshots

Before After
Screenshot 2023-08-30 at 4 10 40 PM Screenshot 2023-08-30 at 4 10 05 PM

How to test the changes in this Pull Request:

Try using this branch with the showcase site:

  1. View a single site page
  2. Below the title, the URL should have the new arrow icon

Or without a separate site:

  1. Create a new post/page, add a paragraph
  2. Add the external-link class to the paragraph under Advanced
  3. Add a link in the paragraph content, not pointing to wordpress.org.
  4. View on the front end
  5. It should have the new arrow icon