Make WordPress Core

Opened 13 years ago

Closed 9 years ago

#17959 closed defect (bug) (maybelater)

WP-Tab css

Reported by: wraithkenny's profile WraithKenny Owned by: wraithkenny's profile WraithKenny
Milestone: Priority: normal
Severity: normal Version: 3.2
Component: Administration Keywords: has-patch needs-refresh ui-feedback
Focuses: ui Cc:


The classes wp-tab-panel, wp-tab-bar, and wp-tab-active should adjust to side tabs in the post column (to match the behavior of categories for example)

Also, there are several unneeded duplicate css classes that can be cleaned up.

Attachments (4)

tab-cleanup.patch (5.6 KB) - added by WraithKenny 13 years ago.
tab cleanup (3.2 KB) - added by WraithKenny 12 years ago.
wp-tab css update without duplication cleanups
Untitled-1.png (14.1 KB) - added by WraithKenny 12 years ago.
wp-tabs.patch (4.8 KB) - added by WraithKenny 12 years ago.
WP-Tabs CSS and Behaviors

Download all attachments as: .zip

Change History (23)

13 years ago

tab cleanup

#1 @WraithKenny
13 years ago

  • Cc Ken@… added
  • Component changed from General to UI
  • Version set to 3.2

#2 @WraithKenny
13 years ago

patch assumes markup usage like so:

<ul class="wp-tab-bar">
	<li class="wp-tab-active"><a href="#tabs-1">Tab 1</a></li>
	<li><a href="#tabs-2">Tab 2</a></li>
	<li><a href="#tabs-3">Tab 3</a></li>
<div class="wp-tab-panel" id="tabs-1">
	<p>Tab 1 content</p>
<div class="wp-tab-panel" id="tabs-2">
	<p>Tab 2 content</p>
<div class="wp-tab-panel" id="tabs-3">
	<p>Tab 3 content</p>

#3 @scribu
13 years ago

  • Keywords needs-testing added; ui-feedback removed


Related: #17699

#4 @WraithKenny
13 years ago

  • Status changed from new to accepted

Tested patch with this plugin on trunk with SCRIPT_DEBUG true.

#5 @WraithKenny
13 years ago

  • Keywords needs-testing removed

#6 @WraithKenny
12 years ago

Most of the duplicate css has been cleaned up by #18314

12 years ago

wp-tab css update without duplication cleanups

#7 @WraithKenny
12 years ago

patch is refreshed against today's trunk and accounts for changes in #19129 and #18198

12 years ago


#8 @WraithKenny
12 years ago

Just a note, when I originally did the first patch, the wp-tab-* classes weren't complete enough to use without added custom css. Although they now work as is (without this patch), but this patch adds missing styles: the #Normal-Sortable (editor) column styling of the tabs for Category Meta-box (with tabs on the side).

It would be possible after this patch to separate the style classes from the behavior classes on Category tabs (use wp-tab-* classes on the category metabox). The reason authors couldn't simple use the category tabs css classes is because they were being selected for in JavaScript.

This patch also fixes a really minor css error where the a pixel is out of place in the category tabs do to top-right still having 3px rounding on.

#9 @WraithKenny
12 years ago

It'd be kinda snazzy to include a link.js style jQuery script to handle tab-switching automatically for authors who use the wp-tab-* classes. This way, authors need only write the markup, with the wp-tab-* classes, and they get the whole treatment.

#10 @scribu
12 years ago

I think that's a good idea. It's annoying to have to write that basic JS every time.

We already enhance other elements automatically, such as checkbox columns.

Last edited 12 years ago by scribu (previous) (diff)

#11 @WraithKenny
12 years ago

The generic script to achieve it is:

jQuery(document).ready( function($) {
	// wp tabs
	$('.wp-tab-bar a').click(function(event){
		// Limit effect to the container element.
		var context = $(this).parents('.wp-tab-bar').first().parent();
		$('.wp-tab-bar li', context).removeClass('wp-tab-active');
		$('.wp-tab-panel', context).hide();
		$( $(this).attr('href'), context ).show();
	// Make setting wp-tab-active optional.
		if ( $('.wp-tab-active', this).length )
			$('.wp-tab-active', this).click();
		else $('a', this).first().click();

The purpose of doing .parents('...').first() is to allow flexibility in the markup. Incoming patch adds this script, and makes postbox dependent on this script to include it anywhere that postbox is.

#12 @scribu
12 years ago

.closest('...') is a more efficient way of doing .parents('...').first().


else $('a', this).first().click();

should be:

  $('a', this).first().click();

12 years ago

WP-Tabs CSS and Behaviors

#13 @chrisvanpatten
12 years ago

  • Cc chris@… added

This is fantastic. I just started a plugin and was surprised to find there's nothing built in to handle tabs in WordPress already. This also seems much better than the jQuery UI options that seem quite bulky.

I think it's worth mentioning that with this option you need to manually set which tab panel is active (I'm doing this by adding style="display: none" to the non-active tabs). Is this something that the JavaScript could be tweaked to handle auto-magically, so stuff doesn't get hidden from view if JS is disabled for whatever reason? I had a go at it but was getting an ugly flash of content, which is even less ideal.

The category tabs seem to handle this by defaulting to one tab (hiding "Most Used" completely) which works in that situation but doesn't seem ideal for tabs in general.

EDIT: Also, thanks for noticing the border-top-right-radius bug. Even if the rest of these fixes don't get in core that definitely should as it also impacts category tabs in their current state.

Last edited 12 years ago by chrisvanpatten (previous) (diff)

#14 @WraithKenny
12 years ago

  • Keywords needs-refresh ui-feedback added

If you use the "assumed markup", you shouldn't have to manually set the active tab with anything but a class name. It also should be handling the default active tab if non is set.

I'll refresh the patch again I guess. There was a sort of "core css cleanup push" since the last time. Maybe some of this was taken care of then.

The "flash of content" issue could be handled with the .js and .no-js toggle.

#15 @WraithKenny
12 years ago

  • Resolution set to wontfix
  • Status changed from accepted to closed

#16 @SergeyBiryukov
12 years ago

  • Resolution wontfix deleted
  • Status changed from closed to reopened

Related: #20570

#17 @sabreuse
11 years ago

  • Component changed from UI to Administration
  • Keywords ui-focus added; ui-feedback removed

#18 @chriscct7
9 years ago

  • Keywords ui-feedback added
  • Severity changed from minor to normal

#19 @helen
9 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from reopened to closed

This has been sitting for this long because it's difficult to action on independently without thinking about bigger picture items like components, clean up, and whether we really want to maintain our own mini JS library for it. Closing as maybelater - assuming we can actually get moving on a clean up and modernization of CSS, I imagine this would get fixed along the way eventually.

Note: See TracTickets for help on using tickets.