Skip to content

Add block selector UI for toggle block controls - #39

Merged
jeremyfelt merged 2 commits into
trunkfrom
claude/toggle-block-selector-IBox8
May 27, 2026
Merged

jeremyfelt merged 2 commits into
trunkfrom
claude/toggle-block-selector-IBox8

Conversation

@jeremyfelt

Copy link
Copy Markdown
Member

Summary

Replaces the simple text input for specifying toggle controls with a comprehensive block selector component that allows users to browse and select blocks from the current post.

Key Changes

  • New BlockSelector component (src/toggle-block/block-selector.js): A React component that provides:

    • Modal dialog for browsing available blocks in the post
    • Search functionality across block type, content, and anchor IDs
    • Automatic anchor generation for blocks without existing anchors
    • Manual ID entry fallback for targeting elements outside the post
    • Visual preview of selected blocks with block icons and content snippets
    • Warning notice when a specified anchor ID doesn't exist in the post
  • Updated toggle block editor (src/toggle-block/index.js): Replaced the simple TextControl for "Controls ID" with the new BlockSelector component, passing required props (clientId, controlsId, setAttributes)

  • Styling (src/toggle-block/index.css and build/toggle-block/index.css): Added comprehensive CSS for the block selector UI including:

    • Current selection display with block icon and preview
    • Modal and list styling with hover/selected states
    • Search results display
    • Responsive layout with proper spacing and typography

Implementation Details

  • Flattens nested block structure to search across all blocks in the post
  • Extracts preview text from multiple block attributes (content, text, title, label, value, citation, caption)
  • Generates unique anchors using block name and random suffix to avoid collisions
  • Maintains backward compatibility with manual ID entry for external targets
  • Uses WordPress data store hooks (useSelect, useDispatch) for block management

https://claude.ai/code/session_016vxYXqA2br4AMfkRY4L4GZ

Replace the raw "Controls ID" text input with a browser that lists every
block in the current post. Selecting a block sets its anchor as the
toggle target and auto-generates one when the block has no anchor yet.
Manual ID entry is kept as a fallback for targets that live outside the
post.
@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.


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

  • Node
  • NPM

1 similar comment
@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.


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

  • Node
  • NPM

@jeremyfelt
jeremyfelt merged commit 8328570 into trunk May 27, 2026
3 checks passed
@jeremyfelt
jeremyfelt deleted the claude/toggle-block-selector-IBox8 branch May 27, 2026 19:27
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