Twenty Thirteen to Twenty Sixteen: update Genericons

[sabernhardt]

Related: #56699, #58836

@metodiew suggested removing the EOT rule and/or IE hacks from the Genericons CSS for Twenty Fourteen and Twenty Sixteen (in pull requests ​4644 and ​4658).

Firefox shows a "rejected by sanitizer" console error related to the EOT file reference in the CSS from Twenty Thirteen and Twenty Fourteen, so I would like to remove that.

It might be worth updating more Genericons files, too.

• Twenty Sixteen uses 3.4.1, which almost matches the ​current repository. ​PR 83 added quotes to the filter rules, but those lines probably could be removed instead.
• Twenty Fifteen uses 3.2, which might be close enough to 3.4.1 to copy files there without editing much.
• Twenty Thirteen and Twenty Fourteen have 3.0.3, and that version had a different file structure (with a font directory and different names).

• Removes legacy Internet Explorer support by deleting EOT file rules from CSS.
• Removes IE hacks from the version included in Twenty Thirteen and Twenty Fourteen.
• Edits CSS comments.
• Removes filter rules from the CSS included in Twenty Sixteen.

Trac 62128

[sabernhardt]

The PR removes console errors in Firefox, but the console can still show warnings ("no supported format found" and/or "Glyph bbox was incorrect"). I am less concerned about those than the sanitizer errors.

[sabernhardt]

#64114 was marked as a duplicate.

[sabernhardt]

The PR does not (yet) update the version string. That could be part of the version bumps on #64069 if it uses the commit date, or I could use '20251202' now.

[sabernhardt]

I used 20251202 so testing the patch would be easier. If the commit date is more appropriate, that can be changed later.

[sabernhardt]

To see the icons in each theme, you could create a post with ​this content and view the icons on the front end.

[peterwilsoncc]

Now that woff is baseline, is it worth removing Genericons.ttf and Genericons.svg from the package and CSS reference?

There's also some webkit hacks that I think can go too:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Genericons";
    src: url("./Genericons.svg#Genericons") format("svg");
  }
}

[sabernhardt]

I missed the version string in twentythirteen_custom_header_fonts(), which is now part of the patch.

I also agree about removing the -webkit-min-device-pixel-ratio hack from Twenty Fifteen and Twenty Sixteen. That apparently was for ​Chrome on Windows until Chrome 38 dropped ​support for SVG fonts.

Additional steps are more questionable for this ticket, especially since the cycle is now in beta.

1. Remove the TTF and SVG src references. ​WOFF support seems good enough now.
2. Remove all prefixes from transform in the rotate and flip classes (Twenty Sixteen). In admin styles, [41062] removed -ms-transform, and [43309] removed -webkit-transform.
3. The transition prefixes probably should stay as they are for anyone who overruled them, but the second time value is missing a unit. The first time could have a leading zero too:
   -moz-transition: color 0.1s ease-in 0s;
4. Remove speak: never and add the empty alternative content values for each genericon- class, as [60885] did.
5. Update the themes' style.css values for content and speak properties. (This probably should be done, on a separate ticket.)

I theoretically could copy the final modified stylesheet from Twenty Sixteen to use nearly the same file for all four themes, but Twenty Thirteen and Twenty Fourteen should continue to set width and height at 16px. And I'm not sure what other adjustments those two themes might need with that change.

Alternative:
In addition to removing the EOT, filter, and various hacks, this includes three extra changes to consider.

1. Removes the TTF and SVG src references for all four themes.
2. Removes all prefixes from transform in the rotate and flip classes available in Twenty Sixteen.
3. Edits the values for prefixed transition properties in Twenty Fifteen and Twenty Sixteen.

Trac 62128

[sabernhardt]

I created a second PR to consider a few of the extra changes.

I changed my mind about the empty alternative text. Its ​browser support is good for the admin at 93.12%, but I am not ready to add that in front-end stylesheets.

Would these changes be proposed upstream at ​https://github.com/Automattic/Genericons also?

Would these changes be proposed upstream at ​https://github.com/Automattic/Genericons also?

The ​`transition-delay` issue was reported already, and I updated the PR accordingly.

Additional changes could be suggested upstream, but I doubt it will be updated anymore. ​https://github.com/Automattic/Genericons/pull/105 and ​https://github.com/Automattic/Genericons/issues/106 encouraged using Genericons Neue or Social Logos instead in 2016, and the last update to this project's repository was five years ago.

the font files can be removed with the change to only include the encoded woff font. (eot, svg and ttf)

I prefer not to delete any files.

1. Child themes and plugins can replace the stylesheet with one that still contains references to any of the font files (likely for reducing CSS). The Genericons readme files even describe creating your own styles.
2. T13 and T14 have included the OTF as part of the package, and the stylesheet did not use that.

I might be having a silly but I can't actually see where the icons are used in 2016

T16 uses the ​icons in several places, anywhere the content value starts with "\f. That includes navigation toggle buttons and arrow links, social navigation, etc.

I prefer not to delete any files.

1. Child themes and plugins can replace the stylesheet with one that still contains references to any of the font files (likely for reducing CSS). The Genericons readme files even describe creating your own styles.

2. T13 and T14 have included the OTF as part of the package, and the stylesheet did not use that.

OK, I'm happy to follow your advice on this as you work on the bundled themes heaps more than I do.

I'm happy to commit this for you if you like.

Thanks!

[westonruter]

In 61109:

Bundled Themes: Modernize Genericons.

This updates Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, and Twenty Sixteen as follows:

• Remove legacy Internet Explorer support by deleting EOT file rules from CSS.
• Remove IE hacks from the version included in Twenty Thirteen and Twenty Fourteen.
• Remove filter rules from the CSS included in Twenty Sixteen.
• Remove the TTF and SVG src references for all four themes.
• Remove all prefixes from transform in the rotate and flip classes available in Twenty Sixteen.
• Edit the values for prefixed transition properties in Twenty Fifteen and Twenty Sixteen.
• Update CSS comments.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10427

Props sabernhardt, metodiew, peterwilsoncc, mukesh27, westonruter.
See #56699, #58836.
Fixes #62128.

Committed in r61109.

Committed in r61109.