WordPress.org

Make WordPress Core

Opened 21 months ago

Last modified 21 months ago

#42723 new enhancement

Tag Cloud CSS needed for HTML minification

Reported by: superpoincare Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9
Component: Bundled Theme Keywords: has-patch
Focuses: ui Cc:

Description

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;
}

Attachments (2)

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

Download all attachments as: .zip

Change History (11)

#1 @SergeyBiryukov
21 months ago

  • Keywords needs-patch added

Related: #40138

#2 @OptimizingMatters
21 months 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.

@juiiee8487
21 months ago

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

#3 @juiiee8487
21 months 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 21 months ago by juiiee8487 (previous) (diff)

#4 @Presskopp
21 months ago

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

@juiiee8487
21 months ago

Updated patch.

#5 @juiiee8487
21 months ago

@Presskopp I have updated patch!

#6 @superpoincare
21 months ago

@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.

#7 @afercia
21 months 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
21 months 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
21 months 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.

Note: See TracTickets for help on using tickets.