chore: deactivate configurator pending framework v0.8.0, set manual CSS as default - #34
Conversation
…SS as default - App.svelte: simplified to sidebar + main (removed preview, output, multi-pane resizing); routes domain to ManualCssTab or SettingsTab; effect redirects any configurator domain to 'manual-css' until v0.8.0 - WpSidebar.svelte: replaced DOMAINS-based nav with Manual CSS + Settings items plus a disabled "Configurator — v0.8.0" entry so users know what's coming - store.svelte.js: default domain changed to 'manual-css', useManualCss defaults to true, previewOpen/outputOpen fixed to false (no preview pane) - SettingsTab.svelte: removed duplicates of PHP Plugin Settings (css_bundle, html_font_size, show_class_hints); now owns only manual_css_mode and configurator_url; configurator option shown as disabled with v0.8.0 badge; added note linking to Plugin Settings for the rest - class-token-store.php: added manual_css_mode=true and configurator_url='' to PLUGIN_SETTING_DEFAULTS so fresh installs default to manual CSS - class-token-page.php: changed PHP hydration default for manual_css_mode from false to true (ensures SPA boots in manual CSS mode without a DB record) https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
… glow
color-swatches.js:
- injectSFButton now places the SF swatch as a direct child of
[data-control="color"] immediately after .bricks-control-preview, so it
sits in the same visual row as the native Bricks colour preview
- Button lookup changed to colorControl.querySelector(':scope > .SF_BTN_CLASS')
to match the new position outside .color-input
- Click handler re-queries .color-input at click time to avoid stale closures
- data-balloon-pos changed from top-right to top (fits the new position)
- Removed redundant --sf-active-color CSS property setting (glow uses accent blue)
panel.css:
- .slashed-sf-color-btn: removed flex shorthand (different flex context now),
added margin-left: 3px gap from the native swatch
- .slashed-sf-color-btn--active .slashed-sf-color-btn__dot: now triggers
@Keyframes slashed-sf-active-glow — a pulsing blue ring that clearly signals
the active colour comes from the SF framework, not the native Bricks picker
Built: assets/admin-app + integrations/bricks/assets/editor-app
https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
The pulsing ring on the SF swatch when active now uses --sf-active-color (set inline from the resolved token hex) via color-mix(), so the glow matches whatever --sf-color-* the user picked — no invented brand colour. https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
|
Warning Review limit reached
More reviews will be available in 52 minutes and 52 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ 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 (4)
📝 WalkthroughWalkthroughThe WP admin app shell is stripped to two domains ( ChangesWP Admin App: Manual CSS Mode
Bricks Editor Color Swatch Polish
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 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 |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js (1)
120-127:⚠️ Potential issue | 🟠 Major | ⚡ Quick winAdd an accessible name to the injected SF Colors button.
The control is interactive but currently unnamed for assistive tech. Add an
aria-labelwhen creating the button so screen readers announce its purpose.Suggested fix
btn.className = SF_BTN_CLASS; btn.setAttribute('data-balloon', 'SLASHED Colors'); btn.setAttribute('data-balloon-pos', 'top'); btn.setAttribute('role', 'button'); btn.setAttribute('tabindex', '0'); + btn.setAttribute('aria-label', 'SLASHED Colors');🤖 Prompt for 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. In `@SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js` around lines 120 - 127, The button element created in this code block (btn) is missing an aria-label attribute, which prevents screen readers from announcing the button's purpose to users with assistive technology. Add an aria-label attribute to the btn element using setAttribute with a descriptive label such as "SLASHED Colors" to provide an accessible name that conveys the button's function.
🧹 Nitpick comments (1)
SLASHED-for-WP/admin-app/src/App.svelte (1)
55-55: 💤 Low valueVestigial
main: 400in persistence payload.The
mainwidth is no longer used since the multi-pane layout was removed, but it's still written to storage. This is harmless sinceloadSidebarWidth()only readssidebar, but you could clean this up by persisting only what's actually restored.🧹 Optional cleanup
- try { localStorage.setItem(WIDTHS_KEY, JSON.stringify({ sidebar: sidebarWidth, main: 400 })); } catch { /* ignore */ } + try { localStorage.setItem(WIDTHS_KEY, JSON.stringify({ sidebar: sidebarWidth })); } catch { /* ignore */ }🤖 Prompt for 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. In `@SLASHED-for-WP/admin-app/src/App.svelte` at line 55, The localStorage persistence in App.svelte is saving a vestigial `main: 400` property that is no longer used since the multi-pane layout was removed. In the try-catch block where localStorage.setItem is called with WIDTHS_KEY, remove the `main: 400` property from the object being persisted, leaving only the `sidebar` property that is actually restored by loadSidebarWidth().
🤖 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.
Outside diff comments:
In `@SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js`:
- Around line 120-127: The button element created in this code block (btn) is
missing an aria-label attribute, which prevents screen readers from announcing
the button's purpose to users with assistive technology. Add an aria-label
attribute to the btn element using setAttribute with a descriptive label such as
"SLASHED Colors" to provide an accessible name that conveys the button's
function.
---
Nitpick comments:
In `@SLASHED-for-WP/admin-app/src/App.svelte`:
- Line 55: The localStorage persistence in App.svelte is saving a vestigial
`main: 400` property that is no longer used since the multi-pane layout was
removed. In the try-catch block where localStorage.setItem is called with
WIDTHS_KEY, remove the `main: 400` property from the object being persisted,
leaving only the `sidebar` property that is actually restored by
loadSidebarWidth().
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 6902d3c5-9537-47ae-a739-39f8cfce111c
📒 Files selected for processing (12)
SLASHED-for-WP/admin-app/src/App.svelteSLASHED-for-WP/admin-app/src/components/SettingsTab.svelteSLASHED-for-WP/admin-app/src/components/WpSidebar.svelteSLASHED-for-WP/admin-app/src/lib/store.svelte.jsSLASHED-for-WP/assets/admin-app/app.cssSLASHED-for-WP/assets/admin-app/app.jsSLASHED-for-WP/includes/class-token-page.phpSLASHED-for-WP/includes/class-token-store.phpSLASHED-for-WP/integrations/bricks/assets/editor-app/app.cssSLASHED-for-WP/integrations/bricks/assets/editor-app/app.jsSLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.jsSLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css
- color-swatches.js: add aria-label="SLASHED Colors" to SF swatch button so screen readers can announce its purpose (was missing alongside role=button) - App.svelte: remove vestigial main:400 from WIDTHS_KEY localStorage payload; only sidebar width is restored by loadSidebarWidth() after the multi-pane layout was removed https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
App.svelte: simplified to sidebar + main (removed preview, output, multi-pane
resizing); routes domain to ManualCssTab or SettingsTab; effect redirects any
configurator domain to 'manual-css' until v0.8.0
WpSidebar.svelte: replaced DOMAINS-based nav with Manual CSS + Settings items
plus a disabled "Configurator — v0.8.0" entry so users know what's coming
store.svelte.js: default domain changed to 'manual-css', useManualCss defaults
to true, previewOpen/outputOpen fixed to false (no preview pane)
SettingsTab.svelte: removed duplicates of PHP Plugin Settings (css_bundle,
html_font_size, show_class_hints); now owns only manual_css_mode and
configurator_url; configurator option shown as disabled with v0.8.0 badge;
added note linking to Plugin Settings for the rest
class-token-store.php: added manual_css_mode=true and configurator_url=''
to PLUGIN_SETTING_DEFAULTS so fresh installs default to manual CSS
class-token-page.php: changed PHP hydration default for manual_css_mode from
false to true (ensures SPA boots in manual CSS mode without a DB record)
https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
Summary by CodeRabbit
Release Notes
New Features
UI/Design Improvements
Upcoming