Make WordPress Core

Opened 6 years ago

Last modified 13 months ago

#42723 new enhancement

Tag Cloud CSS needed for HTML minification

Reported by: superpoincare's profile superpoincare Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9
Component: General Keywords: has-patch
Focuses: ui, css Cc:


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:

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;

Attachments (2)

42651.diff (680 bytes) - added by juiiee8487 6 years ago.
Created patch for Tag Cloud CSS for HTML minification as per suggested.
42723.diff (3.2 KB) - added by juiiee8487 6 years ago.
Updated patch.

Download all attachments as: .zip

Change History (12)

#1 @SergeyBiryukov
6 years ago

  • Keywords needs-patch added

Related: #40138

#2 @OptimizingMatters
6 years ago

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.

6 years ago

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

#3 @juiiee8487
6 years ago

  • Keywords has-patch added; needs-patch removed

Hi, I have created patch 42723.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.

Last edited 6 years ago by juiiee8487 (previous) (diff)

#4 @Presskopp
6 years ago

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

6 years ago

Updated patch.

#5 @juiiee8487
6 years ago

@Presskopp I have updated patch!

#6 @superpoincare
6 years ago


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.

#7 @afercia
6 years ago

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.

#8 @OptimizingMatters
6 years ago

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? :)

#9 @superpoincare
6 years ago

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.

#10 @poena
13 months ago

  • Component changed from Bundled Theme to General
  • Focuses css added
Note: See TracTickets for help on using tickets.