Skip to content

Remove jQuery in the frontend for Twenty Twelve.#12411

Open
adamsilverstein wants to merge 8 commits into
WordPress:trunkfrom
adamsilverstein:remove/jquery-2012
Open

Remove jQuery in the frontend for Twenty Twelve.#12411
adamsilverstein wants to merge 8 commits into
WordPress:trunkfrom
adamsilverstein:remove/jquery-2012

Conversation

@adamsilverstein

Copy link
Copy Markdown
Member
  • Replace jQuery usage in Twenty Twelve frontend scripts with vanilla JS.
  • Don't require jQuery to be loaded in the frontend as a result of the above.

Refreshed version of #1683 (the original branch lives on a fork that can no longer be updated), merged with current trunk. Trunk changes since the original PR - the deferred loading strategy for twentytwelve-navigation and the aria-expanded toggling on the menu button - are preserved in the vanilla JS implementation.

Trac ticket: https://core.trac.wordpress.org/ticket/54171

@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @felixarntz@google.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

Core Committers: Use this line as a base for the props when committing in SVN:

Props adamsilverstein.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

- Iterate HTMLCollection with a for loop in getSiblingElements() and use
  querySelectorAll() for menu links, as HTMLCollection has no forEach
  and both calls threw a TypeError, breaking the whole script.
- Restore the negated focus check in the touchstart handler so the
  first tap on a parent menu item opens the submenu instead of
  navigating immediately, matching the original jQuery behavior.
- Drop the duplicate per-link touchstart listeners in favor of the
  single delegated handler, which also covers dynamically added items.
- Register the delegated touchstart listener as non-passive so
  preventDefault() works; browsers default to passive touch listeners
  on body.
@adamsilverstein

Copy link
Copy Markdown
Member Author

Merged the latest trunk (clean, no conflicts) and fixed several runtime bugs found while re-reviewing the vanilla JS against the original review feedback on #1683:

  • getSiblingElements() iterated parentElement.children (an HTMLCollection, which has no forEach) and the focus/blur listeners were attached via getElementsByTagName( 'a' ).forEach() - both threw a TypeError at load, breaking the whole script.
  • The touchstart handler had lost its negation: it only acted when the item already had the focus class, so the first tap on a parent item navigated immediately instead of opening the submenu. Restored the original behavior (first tap opens, second tap navigates).
  • Removed the duplicate per-link touchstart listeners in favor of the single delegated handler on body, which also covers dynamically added menu items (as discussed in the original review).
  • Registered the delegated listener with { passive: false }, since browsers default to passive touch listeners on body and preventDefault() would otherwise be ignored.

Verified in a browser harness: menu toggle updates aria-expanded in both directions, focus/blur toggle the focus class on ancestor items, and the first tap on a parent item is prevented and opens the submenu while the second tap is allowed through. jshint passes.

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.

1 participant