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

[kjellr]

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

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.

[laurelfulford]

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

[kjellr]

🎉 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!

[karmatosed]

@sabernhardt just noting you added 'needs-refresh' is that confirmation you tested and found the patch had issues? I wanted to check.

[sabernhardt]

The patch applies today, so I think my complaint might have only been the use of spaces instead of tabs in the Sass file. I should have explained the needs-refresh keyword whether it was only that or more, but noticing any problem with the CSS would have required a comment and/or screenshots.

[poena]

Refreshed patch using tabs instead of spaces, .scss only. The .css file needs to be built.

[karmatosed]

Thanks for refresh, will move to commit now.

[karmatosed]

In 58100:

Twenty Nineteen: Adds URL in for print css.

The print styles is meant to append the URL to links. These rules weren't working correctly and this refreshed patch resolves that.

Props kjellr, laurelfulford, sabernhardt, poena, shailu25.
Fixes #45944.

[karmatosed]

In 58101:

Twenty Nineteen: Attempt to fix resolve failures cause by [58100].

This aligns print css to be the same as the scss file. This was suggested by failing tests.

Props swisspidy.
See #45944

[karmatosed]

In 58102:

Twenty Nineteen: Test failure fix for theme [58101].

Patching print file to get to pass tests after diff file fix. Newline patch.

Props swisspidy.
See #45944