Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Class-hidden phone menu restored as a resting panel without a toggle

Open
#3,051 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@chubes4 is already working on this.

Since Oct 18, 2026.

  • #3052 by @chubes4 — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
php
Domain
frontend, testing

Research direction

Start with CapturedDialogProjector::restoreVisibleRestingPanel() and the producer logic in data-liberation-agent/src/lib/static-dialogs.ts described in the issue. Add a captured dropdown state for #menuBtn → #menuPanel in interaction-states.json, then run the reduced fixture at 390px and the #2992 regression test. Done means the panel starts closed, opens and closes on successive clicks, and the existing regression still passes.

Written by the indexing model from the issue text.

Description

Problem

A phone menu whose panel is closed at rest by a class (Tailwind hidden lg:hidden, toggled by an inline onclick) imports open on load at every width below lg, and its toggle does nothing. Every route of the site is affected once the header is shared.

Cause

CapturedDialogProjector::restoreVisibleRestingPanel() (added in #2994 for #2992) reads data-blocks-engine-capture-existing-panel resting.hidden === false as "this panel rests visible, so authored CSS and the source runtime own it", restores the resting class in place and removes the dialog wiring.

The producer writes resting.hidden from the hidden attribute only (existingPanel.attr('hidden') !== undefined in data-liberation-agent src/lib/static-dialogs.ts). A panel hidden by a class therefore records hidden: false too. Nothing toggles the restored panel after import, because the source onclick is not carried over. ClosedStateNormalizer then reveals the class-hidden content (display:revert!important), so the menu is open on load.

The #2992 case has the same gap at phone widths: the in-place nav is left to a source runtime that no longer exists, so its phone toggle is dead as well.

Reduced fixture

index.html (receipt maps https://example.test/ to website/index.html):

<style>.hidden{display:none}@media(min-width:1024px){.lg\:hidden{display:none}}</style>
<header><a href="/">Site</a>
<button id="menuBtn" class="lg:hidden" aria-label="Toggle menu" aria-controls="menuPanel" aria-expanded="false" aria-haspopup="menu" data-blocks-engine-capture-dialog-trigger="menuPanel">Menu</button>
<div id="menuPanel" class="lg:hidden data-blocks-engine-capture-dropdown" style="display: block ; visibility: visible !important;"
  data-blocks-engine-capture-existing-panel='{"resting":{"style":null,"class":"hidden lg:hidden data-blocks-engine-capture-dropdown","hidden":false},"opened":{"style":"display: block ; visibility: visible !important;","class":"lg:hidden data-blocks-engine-capture-dropdown"}}'
  hidden data-blocks-engine-capture-dialog-panel="menuPanel"><a href="/about">About</a><a href="/contact">Contact</a></div>
</header><main><h1>Home</h1></main>

Add one captured dropdown state for #menuBtn → #menuPanel in interaction-states.json.

resting.hidden CapturedDialogProjector::project() on trunk
false (what the producer writes for this site) projected 0, panel restored as <div id="menuPanel" class="hidden lg:hidden">, no toggle
true projected 1, working dropdown dialog

Expected

A captured toggle stays working after import whatever its resting state. A panel that rests in place (#2992) stays in place under authored CSS and its captured trigger opens and closes it natively. A panel that rests closed opens only from its trigger. The fixture imports with the menu closed at 390px, open after one click on Menu, and closed again on a second click. The #2992 regression test keeps passing.

Source

Found while importing a production site captured with data-liberation-agent (shared header, Automattic/data-liberation-agent#903). Related: #2992, #2994, #2726.

Filed by Franklin (Claude Opus via Pi coding agent) on behalf of @chubes4. Root cause traced through CapturedDialogProjector on the real capture and the reduced fixture; AI drafted this issue.

Dominant language
PHP
Stars
21
Forks
2
Avg merge
9h 6m
Merged PRs (30d)
589

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/blocks-engine

All issues in Automattic/blocks-engine

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.