WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 9 months ago

#45944 new defect (bug)

Twenty Nineteen: Added URL in :after styles for print.css is unreliable

Reported by: kjellr Owned by:
Milestone: Future Release Priority: low
Severity: normal Version: 5.0.3
Component: Bundled Theme Keywords: needs-patch
Focuses: Cc:
PR Number:

Description

The print styles for Twenty Nineteen include a little snippet meant to append the URL to links so it's visible when printed:

a[href^=http]:after {
    content: " < " attr(href) "> ";
}

Via: https://themes.trac.wordpress.org/browser/twentynineteen/1.2/print.css#L85

https://cldup.com/iUgRDksax1-3000x3000.png

This snippet is based on recommendations in this article:

https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/

In practice, this appears to be fairly unreliable. In testing, @Joyously and I only see those URLs sporadically, and haven't been able to pin down why.

More details: https://github.com/WordPress/twentynineteen/issues/609#issuecomment-439489841

If these rules aren't working correctly, I suggest we remove them from the theme.

Attachments (1)

45944.patch (1.8 KB) - added by kjellr 9 months ago.

Download all attachments as: .zip

Change History (4)

#1 @laurelfulford
9 months ago

  • Milestone changed from Awaiting Review to Future Release

Thanks for moving this over, @kjellr!

I did a bit of investigation because, honestly, this was totally bugging me!

It looks like these styles are the culprit:

/* Remove image filters from featured image */
  .image-filters-enabled *:after {
    display: none !important;
}

... which explains why it was only working sometimes -- if the image filter wasn't enabled, that class wouldn't be present.

I think this should be fixable by making the selector more specific (assuming the !important has to stay):

/* Remove image filters from featured image */
  .image-filters-enabled .site-featured-image:after {
    display: none !important;
}

... but just let me know if I'm missing something here!

--

Edited to correct my bad CSS suggestion :D

Last edited 9 months ago by laurelfulford (previous) (diff)

#2 @laurelfulford
9 months ago

  • Keywords needs-patch added; needs-testing removed

#3 @kjellr
9 months ago

🎉 Great sleuthing, @laurelfulford. That was exactly correct. I've attached a patch that applies some more specific styles down in that portion of the file. (I also snuck in a tiny fix for the featured image overlay in post lists while I was in there).

Thanks!

@kjellr
9 months ago

Note: See TracTickets for help on using tickets.