Skip to content

Add block selector UI for toggle block controls#39

Open
jeremyfelt wants to merge 2 commits intotrunkfrom
claude/toggle-block-selector-IBox8
Open

Add block selector UI for toggle block controls#39
jeremyfelt wants to merge 2 commits intotrunkfrom
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

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