Skip to content

Add toggle group support with default toggle functionality#37

Merged
jeremyfelt merged 4 commits intotrunkfrom
claude/make-it-happen-efCRQ
Mar 10, 2026
Merged

Add toggle group support with default toggle functionality#37
jeremyfelt merged 4 commits intotrunkfrom
claude/make-it-happen-efCRQ

Conversation

@jeremyfelt
Copy link
Copy Markdown
Member

Summary

This PR adds support for toggle groups, allowing multiple toggle blocks to be organized together where only one can be active at a time. It also introduces a "default toggle" feature that automatically activates a specified toggle when no toggle in the group is currently active.

Key Changes

  • Refactored toggle logic: Split the monolithic handleClick function into smaller, reusable functions:

    • toggleOn(): Handles showing a controlled element
    • toggleOff(): Handles hiding a controlled element
    • getToggleGroup(): Finds the parent toggle group
    • getGroupToggles(): Gets all toggles within a group
    • getDefaultToggle(): Finds the default toggle in a group
  • Toggle group behavior: When a toggle is clicked within a group:

    • Opening a toggle automatically closes all other toggles in the group
    • Closing the active toggle activates the default toggle (if one exists)
    • Toggles outside groups maintain original toggle behavior
  • Default toggle initialization: Added initialization logic that activates the default toggle in each group on page load if no toggle is already active

  • UI enhancements: Added a "Default toggle" toggle control in the block editor inspector panel

  • Block attributes: Added defaultToggle boolean attribute to track which toggle should be the default in a group

  • Deprecated version: Added a deprecated block version to maintain backward compatibility with existing toggle blocks

Implementation Details

  • The handleClick function now uses closest() to find the toggle button, making it more robust for nested elements
  • Toggle groups are identified by the .toggle-block-group CSS class
  • Default toggles are marked with the data-default-toggle="true" attribute
  • The initialization logic checks if any toggle in a group is already active before activating the default toggle

https://claude.ai/code/session_019mVP8YLjaU9V5LEzsujoCL

When toggle blocks are placed inside a container with the
`toggle-block-group` class, they behave like tabs: activating
one toggle automatically closes all others in the group.

Adds a "Default toggle" option that marks which toggle should
be active by default when no other toggle in the group is open.

https://claude.ai/code/session_019mVP8YLjaU9V5LEzsujoCL
@github-actions
Copy link
Copy Markdown

Changed files were detected after build. Please run project build workflows and check git status for any missed changes.

 M build/toggle-block/block.json
 M build/toggle-block/index.asset.php
 M build/toggle-block/index.js
 M build/toggle-block/view.asset.php
 M build/toggle-block/view.js

You may need to update your local NPM configuration if different than below:

  • Node v22.22.0
  • NPM 11.11.0

@jeremyfelt jeremyfelt merged commit 71141da into trunk Mar 10, 2026
3 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.

2 participants