Skip to content

Fix active tab underline highlight in Appearance Add Theme view - #448

Merged
AllTerrainDeveloper merged 2 commits into
WordPress:trunkfrom
CookieDarb:fix/theme-installer-active-tab
Jul 29, 2026
Merged

Fix active tab underline highlight in Appearance Add Theme view#448
AllTerrainDeveloper merged 2 commits into
WordPress:trunkfrom
CookieDarb:fix/theme-installer-active-tab

Conversation

@CookieDarb

Copy link
Copy Markdown
Contributor

What?

Closes #447

Fixes the bug where the colored underline bar/highlight always stays stuck on "Popular" in the Appearance -> Add Theme (theme installer) screen and does not update when other tabs ("Latest", "Block Themes", "Favorites") are clicked.

Why?

The theme installer (theme-install.php) runs in a chromeless iframe context (desktop_mode_chromeless=1). WordPress Core's legacy Backbone router updates the URL in place using history.replaceState or pushState, but it doesn't correctly update the DOM's active state tab classes in this environment because the initial browse query parameter from window.location.search was only evaluated once on initial page load, ignoring subsequent client-side URL changes.

How?

  • includes/themes-tabs.php:
    • Refactored desktop_mode_theme_install_active_tab_script() inline JavaScript to dynamically evaluate the browse URL query parameter on every DOM check via a helper function getBrowseParam(), rather than caching the initial query parameter.
    • Updated the MutationObserver on .filter-links to fetch the fresh browse parameter on every mutation, correctly updating the current class and aria-current="page" attribute dynamically.
  • tests/phpunit/tests/desktopModeInjectAppearanceTabs.php:
    • Added test_theme_install_active_tab_script_registered_and_emits_dynamic_browse_param() to assert that the active tab script is hooked to admin_footer at priority 100 and outputs the inline JS helper.

Testing Instructions

  1. Open the Desktop environment and go to Appearance -> Add Theme (the "Popular" tab is active by default).
  2. Click on the "Latest", "Block Themes", or "Favorites" tabs.
  3. Verify that the colored highlight bar/underline correctly moves to the active tab.

Screencast

Screen.Recording.2026-07-29.at.4.57.38.PM.mov

Use of AI Tools

AI assistance: Yes
Tool(s): Antigravity
Model(s): Gemini
Used for: Reviewing the existing implementation and suggesting the changes. Final decisions and edits were made by me.

- Dynamically parse browse URL parameter on each mutation cycle in theme installer active tab script.
- Add PHPUnit unit test to verify hook registration on admin_footer and inline script output.
@CookieDarb
CookieDarb marked this pull request as ready for review July 29, 2026 11:48

@AllTerrainDeveloper AllTerrainDeveloper left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great!

Thank you!

@AllTerrainDeveloper
AllTerrainDeveloper merged commit 5aa339b into WordPress:trunk Jul 29, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Active tab highlight does not update when switching tabs in Appearance -> Add Theme

2 participants