Tag Cloud CSS needed for HTML minification

[superpoincare]

The new tag cloud code in Wordpress 4.9 works great except for one issue which can be improved.

Because it uses

display: inline-block

for li elements, it needs whitespace after each ending closing li tag.

Else HTML minifiers will remove the spacing. It's hard for minifiers to do the job as this is a more general issue.

An illustration is here: ​https://codepen.io/anon/pen/pdOPdr

What happens is that after HTML minification, tags appear very close to each other. Undesired.

The best way to tackle it would be to improve the CSS. Here's a suggestion

.tagcloud ul li:after, .widget-area .widget.widget_tag_cloud li:after {
	content: '\00A0';
	white-space: pre;
}

[SergeyBiryukov]

Related: #40138

[OptimizingMatters]

I'm Autoptimze's developer and I can confirm that HTML optimization in Autoptimize currently indeed results in the tagclouds loosing spacing between the items in the cloud. This is nearly impossible to fix in AO (and other plugins that do minification), as the HTML-minifier does not know what CSS is applied, so I would hope this indeed can be fixed on WordPress core|Bundled theme level.

[juiiee8487]

Created patch for Tag Cloud CSS for HTML minification as per suggested.

[juiiee8487]

Hi, I have created patch 42651.diff for Tag cloud CSS for HTML minification. It includes patch for bundled themes twentyten, twentyeleven, twentrytwelve, twentythirteen, twentyfouteen, twentyfifteen and twentysixteen. In twentyseventeen theme there is float with margin used instead of inline-block, so it shows proper in HTML minification.

[Presskopp]

@juliee8487 would you please upload the correct patch, unfortunately you uploaded an existing patch of another ticket - thank you.

[juiiee8487]

Updated patch.

[juiiee8487]

@Presskopp I have updated patch!

[superpoincare]

@juiiee8487

It's not as simple as just updating the CSS.

This is because if someone is not minifying HTML, then the spacing between tags will be higher.

So one needs a php solution too. Something like: outputting the li elements inside the ul without whitespace.

[afercia]

Hm not sure spaces between inline (or inline block) elements should be removed. Spaces in inline content have a meaning and should not be removed. I understand this is difficult or nearly impossible for a HTML minifier, but I'd say it's not a core bug.

[OptimizingMatters]

Well, let's say the bug revealed itself after a change in core. Given the fact it's nearly impossible to fix in a HTML minifier, it is either changed in core OR we just learn to live with the fact that it's (slightly) broken? :)

[superpoincare]

Wordpress does remove whitespace, or at least has the option. The function wp_nav_menu() has removal of whitespace as its options---another place where display: inline-block is being used in CSS.