fix(bricks): SF colour panel broken for border/box-shadow + missing admin inputs - #208
Merged
Merged
Conversation
…de handler
Svelte 5 delegates onclick/onmousedown to document, which fires after Bricks'
own document-level handlers. For border and box-shadow colour controls, Bricks'
click-outside handler closes the sub-panel (disconnecting colorInputEl) before
our Svelte delegation runs — causing the "input not found" error.
Fix: attach a direct (non-delegated) mousedown listener on the ColorPanel
element. It fires at element level, before the event bubbles to document, so:
- e.stopPropagation() actually prevents Bricks from seeing the event
- e.preventDefault() actually prevents focus loss from the colour input
- onPickValue() is called while colorInputEl is still connected
Add data-cp-pick-var={swatch.var} to every pickable swatch button (ColorSwatch,
Quick Use buttons, family banners, scale and alpha strip buttons) so the
element-level mousedown handler can identify the swatch without a swatch→object
map lookup.
https://claude.ai/code/session_016aL3vh5nHHa2QbmAxyFCGy
PR #203 added NumberField components for header_height_mobile, header_height_desktop, sticky_offset_mobile and sticky_offset_desktop in LayoutsTab.svelte, but the admin-app assets were never rebuilt. The admin panel showed no input fields for these tokens until now. https://claude.ai/code/session_016aL3vh5nHHa2QbmAxyFCGy
|
Warning Review limit reached
More reviews will be available in 59 minutes and 1 second. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughColorPanel and ColorSwatch components refactored to support data-attribute-driven color token selection through a direct DOM ChangesColor picker refactor
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorPanel.svelte`:
- Around line 129-147: handlePanelMouseDown currently invokes onPickValue on
mousedown which causes a duplicate invocation when the subsequent click path in
ColorSwatch.svelte also runs; fix this by adding a transient suppression flag on
the element when you successfully handle the mousedown (e.g., set
btn.dataset.cpSuppressClick = '1' or a WeakMap entry) and then update the click
handler(s) in ColorSwatch.svelte (and any click handlers in ColorPanel.svelte)
to early-return if that suppression flag is present, clearing the flag after
reading it so keyboard-initiated clicks still work; reference
handlePanelMouseDown and onPickValue in ColorPanel.svelte and the click handler
in ColorSwatch.svelte when making these edits.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 311a938b-9121-452f-85e0-6069328b5118
📒 Files selected for processing (5)
plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.cssplugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.jsplugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.jsplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorPanel.svelteplugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/ColorSwatch.svelte
The direct mousedown listener applies the colour value before Bricks' click-outside handler fires. The Svelte-delegated onclick path on swatch buttons stays live, so if the component is still mounted when the subsequent click event fires (e.g. on a failed pick that shows an error toast), onPickValue would be called a second time. Add a data-cp-suppress-click flag to the button in handlePanelMouseDown before calling onPickValue. The pick() click path checks for the flag and early-returns if present, clearing it. Successful picks delete the flag before onPick() closes the panel; failed picks leave it for the click to consume. Keyboard-activated clicks never set the flag so they continue to work normally. https://claude.ai/code/session_016aL3vh5nHHa2QbmAxyFCGy
This was referenced Jun 3, 2026
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
2 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.
$(cat <<'EOF'
Summary
Root cause (border/box-shadow)
Svelte 5 delegates all
onclick/onmousedownattributes todocument, which fires after Bricks' document-level handlers (registered earlier at init time). For border and box-shadow controls, Bricks shows a colour popover with its own click-outside handler. Event sequence on swatch click:documentcolorInputEl.isConnected = falseonPickValue()→isConnected = false→ returnsfalse→ error toastPrevious attempts (
stopPropagation/preventDefaultvia Svelte attributes) failed because they also fire at document level — too late to intercept Bricks.Fix
Replace the Svelte-delegated
onmousedownwith a directaddEventListenerattached inonMount. This fires at element level, before the event reachesdocument, so:stopPropagation()actually prevents Bricks from ever seeing the eventpreventDefault()actually prevents focus from leaving the Bricks colour inputonPickValue()is called onmousedownwhilecolorInputElis still connectedEvery pickable swatch button gets a
data-cp-pick-varattribute so the element-level handler can identify which swatch was pressed viae.target.closest('button[data-cp-pick-var]')without needing a swatch→object map.Changes
ColorPanel.svelte— replace Svelteonmousedownwith direct listener inonMount; adddata-cp-pick-varto Quick Use, family banner, scale strip, alpha strip buttonsColorSwatch.svelte— adddata-cp-pick-var={swatch.var}assets/editor-app/app.js— rebuiltassets/admin-app/app.js/app.css— rebuilt to expose header/sticky height token inputsTest plan
https://claude.ai/code/session_016aL3vh5nHHa2QbmAxyFCGy
EOF
)
Generated by Claude Code
Summary by CodeRabbit
Style
Bug Fixes