Repository navigation
Add hover trigger support for tooltip-style popups - #14
Merged
Merged
Conversation
Implements issue #12. Adds a new 'hover' trigger that opens the popup using dialog.show() (non-modal) when the visitor hovers over any element linking to the popup anchor, providing better tooltip behaviour without the modal backdrop or focus trap. Changes: - block.json: add 'hover' to the trigger enum - edit.js: add 'On hover' option to trigger SelectControl, show anchor/ID field for hover (same as click), add description note suggesting the Anchored style, exclude cookie expiration for hover - view.js: add hover handler using mouseenter/mouseleave and focus/blur for keyboard accessibility; popup stays open when cursor moves from trigger to popup; CSS anchor positioning applied when is-style-anchored is active - variations.js: include hover-triggered popups in the Open Popup button variation selector (same link-based mechanism as click) - tests: add E2E tests for hover trigger option, anchor/ID field visibility, cookie expiration hiding, data-trigger output, and frontend mouseenter behaviour https://claude.ai/code/session_01SjvQ7YTxjFF81uSb1WtPAH
Implements issue #13. Adds a 'Popups' pattern category and six ready-to-use block patterns so users can get started without building popups from scratch. Changes: - popup.php: register 'hm-popup' pattern category in action_init(); load and register pattern definitions from the new patterns/ directory using register_block_pattern() - patterns/exit-intent.php: exit intent popup with close button and a core/group with the 'natural' WP box shadow - patterns/page-load.php: page load popup with close button and a core/group with the 'natural' WP box shadow - patterns/click-popup.php: trigger button + click popup with close button and a core/group with the 'natural' WP box shadow - patterns/left-popout.php: left slide-in panel (is-style-side--left), click trigger, first inner group has minHeight 100vh and a grey right border - patterns/right-popout.php: right slide-in panel (is-style-side--right), click trigger, first inner group has minHeight 100vh and a grey left border - patterns/tooltip.php: anchored tooltip (is-style-anchored, anchorPosition top) triggered by hovering an info icon; uses the hover trigger from #12 https://claude.ai/code/session_01SjvQ7YTxjFF81uSb1WtPAH
Playwright E2E Test Results (PHP 8.4, WP latest)
Details
|
…gger
The beforeEach hook inserts a click-triggered popup, so the hover
frontend test had two .wp-block-hm-popup elements on the page.
Playwright's toHaveAttribute throws on multiple matches, causing CI
to fail.
Fixes:
- Use '#hover-test-popup' selector instead of '.wp-block-hm-popup' to
target only the hover popup, avoiding ambiguity with the click popup
inserted by beforeEach
- Replace raw paragraph HTML link with core/buttons + core/button
(same pattern used in anchoring.spec.js) for a reliable trigger
- Check toHaveAttribute('open', '') after hover to precisely assert
that dialog.show() was called (sets the open attribute)
https://claude.ai/code/session_01SjvQ7YTxjFF81uSb1WtPAH
…gger
The beforeEach hook inserts a click-triggered popup, so the hover
frontend test had two .wp-block-hm-popup elements on the page.
Playwright's toHaveAttribute throws on multiple matches, causing CI
to fail.
Fixes:
- Use '#hover-test-popup' selector instead of '.wp-block-hm-popup' to
target only the hover popup, avoiding ambiguity with the click popup
inserted by beforeEach
- Replace raw paragraph HTML link with core/buttons + core/button
(same pattern used in anchoring.spec.js) for a reliable trigger
- Check toHaveAttribute('open', '') after hover to precisely assert
that dialog.show() was called (sets the open attribute)
https://claude.ai/code/session_01SjvQ7YTxjFF81uSb1WtPAH
mattheu
approved these changes
May 28, 2026
…atterns Register out-of-the-box block patterns
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #12
Summary
Adds a new
hovertrigger so popups open when a visitor hovers over any element that links to the popup anchor. Unlike the other triggers, hover usesdialog.show()(non-modal) rather thandialog.showModal(), so there is no backdrop dimming and no focus trap — the right behaviour for tooltips.Changes
src/block.json"hover"to thetriggerattribute enum.src/edit.jsSelectControl.src/view.jsbootstrap():popup.show()onmouseenter/focuson any[href="#<id>"]trigger.mouseleave/blurof the trigger, unless the cursor has moved onto the popup itself.src/variations.jshref="#id"mechanism).tests/popup-options.spec.jsdata-triggeroutput, and frontendmouseenterbehaviour.How to test
my-tooltip).href="#my-tooltip".https://claude.ai/code/session_01SjvQ7YTxjFF81uSb1WtPAH
Generated by Claude Code