Improve WP admin panel: configurator-parity CSS export - #24
Conversation
Port patterns from the framework configurator into the Bricks admin SPA:
- Add sanitizeValue() (from configurator/src/lib/css.js) and apply it to
every raw, user-entered value interpolated into generated CSS and the
live-preview inline style. A pasted Advanced value containing ';' or '}'
can no longer break out of the declaration block / style attribute.
- Extend generateExportCSS() with { mode, banner, version }: a @layer vs
bare :root output-framing toggle and a generated-by header comment.
Defaults preserve existing behaviour for LivePreview/SaveBar.
- ExportImportTab: @layer/:root segmented toggle, a Copy CSS button with
copied/blocked feedback, and a live CSS preview.
- Add ui.outputMode to the store.
- Cover sanitizeValue and generateExportCSS options with unit tests.
Co-authored-by: Jack Granatowski <contact@codeslash.net>
|
Warning Review limit reached
More reviews will be available in 52 minutes and 58 seconds. 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 (3)
📝 WalkthroughWalkthroughThis PR adds CSS injection protection through value sanitization, introduces configurable CSS output framing (layer-wrapped or bare ChangesCSS Export Sanitization and Framing Control
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 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 review |
✅ Action performedReview finished.
|
![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
🧹 Nitpick comments (1)
SLASHED-for-WP/integrations/bricks/admin-app/src/components/ExportImportTab.svelte (1)
180-180: ⚡ Quick winConsider announcing the "Copied" feedback to screen readers.
The transient "Copied ✓" text change provides visual feedback but is not announced to assistive technologies. Adding
aria-live="polite"to the button or a wrapper element would improve accessibility for screen reader users.♻️ Proposed improvement
<button type="button" class="btn btn--secondary" onclick={copyCSS} disabled={!canExportCSS} title={canExportCSS ? 'Copy the generated CSS to the clipboard' : 'No overrides set yet'} + aria-live="polite" > {copied ? 'Copied ✓' : 'Copy CSS'} </button>🤖 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/admin-app/src/components/ExportImportTab.svelte` at line 180, The "Copied ✓" transient text in ExportImportTab.svelte isn't announced to screen readers; update the button (or its wrapper element that renders {copied ? 'Copied ✓' : 'Copy CSS'}) to include an aria-live attribute (e.g., aria-live="polite") or role="status" so changes to the copied state are announced; ensure the element that contains the {copied} text (in the same component where the copied boolean is used) has the aria-live attribute and remains in the DOM for the duration of the feedback.
🤖 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
`@SLASHED-for-WP/integrations/bricks/admin-app/src/components/ExportImportTab.svelte`:
- Around line 43-53: The setTimeout in copyCSS can fire after the component
unmounts; fix it by storing the timeout ID (e.g., let copyTimeoutId) when you
call setTimeout in copyCSS and clear any previous timeout before creating a new
one, then clearTimeout(copyTimeoutId) in a Svelte onDestroy/cleanup effect so
you never update copied after unmount. Ensure you reference the existing copyCSS
function and the copied state variable when implementing the timeout tracking
and cleanup.
---
Nitpick comments:
In
`@SLASHED-for-WP/integrations/bricks/admin-app/src/components/ExportImportTab.svelte`:
- Line 180: The "Copied ✓" transient text in ExportImportTab.svelte isn't
announced to screen readers; update the button (or its wrapper element that
renders {copied ? 'Copied ✓' : 'Copy CSS'}) to include an aria-live attribute
(e.g., aria-live="polite") or role="status" so changes to the copied state are
announced; ensure the element that contains the {copied} text (in the same
component where the copied boolean is used) has the aria-live attribute and
remains in the DOM for the duration of the feedback.
🪄 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: 852c9290-4f1d-4216-b625-8552a743d0b4
📒 Files selected for processing (7)
SLASHED-for-WP/integrations/bricks/admin-app/src/components/ExportImportTab.svelteSLASHED-for-WP/integrations/bricks/admin-app/src/components/LivePreview.svelteSLASHED-for-WP/integrations/bricks/admin-app/src/lib/export.jsSLASHED-for-WP/integrations/bricks/admin-app/src/lib/stores.svelte.jsSLASHED-for-WP/integrations/bricks/assets/admin-app/app.cssSLASHED-for-WP/integrations/bricks/assets/admin-app/app.jstests/export-css.test.js
| async function copyCSS() { | ||
| if (!exportCSS) return; | ||
| copyError = ''; | ||
| try { | ||
| await navigator.clipboard.writeText(exportCSS); | ||
| copied = true; | ||
| setTimeout(() => (copied = false), 1400); | ||
| } catch { | ||
| copyError = 'Clipboard blocked — select the CSS below and copy manually.'; | ||
| } | ||
| } |
There was a problem hiding this comment.
Clean up the timeout on component unmount.
The setTimeout callback on line 49 could execute after the component unmounts, which may cause a state update on an unmounted component. In Svelte 5, you should store the timeout ID and clear it in an effect cleanup.
🛡️ Proposed fix to clear timeout on unmount
async function copyCSS() {
if (!exportCSS) return;
copyError = '';
try {
await navigator.clipboard.writeText(exportCSS);
copied = true;
- setTimeout(() => (copied = false), 1400);
+ const tid = setTimeout(() => (copied = false), 1400);
+ // Clean up if component unmounts before timeout fires
+ $effect(() => () => clearTimeout(tid));
} catch {
copyError = 'Clipboard blocked — select the CSS below and copy manually.';
}
}Alternatively, track the timeout ID in component state and clear it in an onDestroy lifecycle hook.
🤖 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/admin-app/src/components/ExportImportTab.svelte`
around lines 43 - 53, The setTimeout in copyCSS can fire after the component
unmounts; fix it by storing the timeout ID (e.g., let copyTimeoutId) when you
call setTimeout in copyCSS and clear any previous timeout before creating a new
one, then clearTimeout(copyTimeoutId) in a Svelte onDestroy/cleanup effect so
you never update copied after unmount. Ensure you reference the existing copyCSS
function and the copied state variable when implementing the timeout tracking
and cleanup.
- ExportImportTab: expose pressed state on the @layer/:root framing toggle (aria-pressed) so screen readers perceive the binary selection. - LivePreview: gate font-var emission on the sanitized result so a value that sanitizes to empty no longer emits a valueless --sf-font-*: declaration. Admin-app assets rebuilt.
2 participants
This pull request was created by @kiro-agent on behalf of @jackgranatowski 👻
Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro Web
Summary
Brings several proven patterns from the framework's standalone configurator (
SLASHED/configurator) into the WordPress plugin's Bricks admin-app Svelte panel, without disturbing its REST/section architecture.sanitizeValue()fromconfigurator/src/lib/css.jsand applied it to every raw, user-entered value that gets interpolated into generated CSS (export.js) and into the live-preview inline-style string (LivePreview.svelte). A pasted Advanced color/value containing;,{,}or comment delimiters can no longer break out of the declaration block or thestyleattribute. (PHP still sanitizes on save; this protects the purely client-side Download/Copy/preview paths.)generateExportCSS()now accepts{ mode: 'layer' | 'root', banner, version }.@layer slashed.overridesstays the default;:rootis offered for consumers without cascade layers — mirroring the configurator's OutputPanel.@layer/:rootsegmented control, a Copy CSS button with copied/blocked feedback, a live CSS preview, and a generated-by banner comment stamped with the framework/plugin version.ui.outputMode(session-only).Defaults are unchanged for
LivePreviewandSaveBar, so existing behaviour is preserved.What was tested
node --test tests/*.test.js— 80 pass (incl. newtests/export-css.test.js, 15 tests coveringsanitizeValueand the newgenerateExportCSSoptions/injection guard).node scripts/check-admin-app.js— OK (no cssVar / default drift vs. the framework).vite buildof the admin-app — succeeds; regenerated trackedassets/admin-app/app.js+app.cssare included.Notes / limitations
FontFamilyField.sveltestate_referenced_locally).size_m_min/maxbehindclamp()), so reverse-mapping CSS would be lossy. JSON export/import remains the portable path.Summary by CodeRabbit
Release Notes
New Features
@layeror:rootoutput format).Bug Fixes
Tests