WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 7 months ago

#51086 new enhancement

Add native support for tabbed settings pages in WP Admin

Reported by: stevegrunwell Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords:
Focuses: accessibility Cc:

Description

There are a lot of plugins out there handling tabbed setting screens in different ways, so it may be time to introduce a standard API for this pattern.

This patch adds a new do_tabbed_settings_sections() function which works just like the Settings API's do_settings_sections() function, but prints each section heading as a tab/panel combination. In situations where there's only one section to render, the new function will fall back to its un-tabbed sibling.

The patch also includes a standard script for tabbing between different setting sections, with support for linking directly to a particular tab via the URL hash (e.g. https://example.com/wp-admin/options-general.php?page=some-settings-page#some-tab-ID).

Attachments (7)

51086.diff (6.7 KB) - added by stevegrunwell 8 months ago.
Introduces do_tabbed_settings_sections()
wp-admin-tabbed-settings-pages-demo.php (3.8 KB) - added by stevegrunwell 8 months ago.
A demo plugin that registers both a tabbed and non-tabbed settings page for testing/comparision
51086.2.diff (6.7 KB) - added by stevegrunwell 8 months ago.
Removes short-array syntax in test fixture
51086.3.diff (8.6 KB) - added by stevegrunwell 8 months ago.
Fresh patch that actually includes the JavaScript
51086.4.diff (8.5 KB) - added by stevegrunwell 8 months ago.
Remove reliance on JavaScript globals, use printf() for previously-concatenated string (props @szepeviktor)
51086.5.diff (8.5 KB) - added by stevegrunwell 8 months ago.
Prevent <section> elements from being broken if no fields are registered for a setting (see https://github.com/stevegrunwell/wp-admin-tabbed-settings-pages/pull/11)
51086.6.diff (9.0 KB) - added by stevegrunwell 8 months ago.
Refreshed diff, corresponding to v0.2.0 of the polyfill: https://github.com/stevegrunwell/wp-admin-tabbed-settings-pages/releases/tag/v0.2.0

Download all attachments as: .zip

Change History (11)

@stevegrunwell
8 months ago

Introduces do_tabbed_settings_sections()

@stevegrunwell
8 months ago

A demo plugin that registers both a tabbed and non-tabbed settings page for testing/comparision

#1 @afercia
8 months ago

  • Focuses accessibility added

@stevegrunwell
8 months ago

Removes short-array syntax in test fixture

@stevegrunwell
8 months ago

Fresh patch that actually includes the JavaScript

@stevegrunwell
8 months ago

Remove reliance on JavaScript globals, use printf() for previously-concatenated string (props @szepeviktor)

#2 @stevegrunwell
8 months ago

With some assistance from @szepeviktor, I've open-sourced a polyfill for plugin authors looking to start using do_tabbed_settings_sections(): https://github.com/stevegrunwell/wp-admin-tabbed-settings-pages

@stevegrunwell
8 months ago

Prevent <section> elements from being broken if no fields are registered for a setting (see https://github.com/stevegrunwell/wp-admin-tabbed-settings-pages/pull/11)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 months ago

This ticket was mentioned in Slack in #accessibility by azhiyadev. View the logs.


7 months ago

Note: See TracTickets for help on using tickets.