feat: add admin GUI for editing SLASHED design tokens - #77
Merged
Conversation
Co-authored-by: Jack Granatowski <contact@codeslash.net>
…zation - Create class-token-defaults.php with factory defaults for all 7 token sections - Create class-admin-page.php with WordPress admin menu, tabbed interface, form handling, save/load via wp_options, and reset functionality - Update slashed-bricks.php to bootstrap admin page on plugins_loaded hook (independent of Bricks theme activation)
Create Slashed_Bricks_CSS_Generator class that reads saved token overrides from the slashed_bricks_tokens option and generates CSS wrapped in @layer slashed.overrides { :root { ... } }. - Maps all settings keys to CSS custom properties (colors, typography, spacing, radius, shadows, motion, z-index) - Generates fluid type clamp() expressions from min/max rem values - Outputs shadow-strength with dark mode calc() formula - Outputs motion durations with motion-scale multiplication - Only includes non-empty values in the output Update class-enqueue.php to inject override CSS via wp_add_inline_style attached to the slashed-framework handle, ensuring overrides load after the framework in both frontend and Bricks editor contexts.
- Add CSS value sanitization to reject {, }, <, >, @ characters
- Replace empty() with isset/strict checks for numeric token fields
- Wrap admin-only hook in is_admin() to avoid frontend overhead
- Verify has_overrides() nested array path correctly handles '0'
|
Important Review skippedBot user detected. To trigger a single review, invoke the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds a Bricks integration admin for editing SLASHED design tokens: token defaults, a tabbed settings page with client preview and JS/CSS assets, backend save/reset handling and sanitization, generator for CSS custom-property overrides, frontend injection, and README updates for CDN bundling. ChangesDesign Token Admin & Override System
Sequence DiagramsequenceDiagram
participant AdminUser
participant AdminForm
participant AdminScript
participant Handler
participant OptionStorage
participant CSSGen
participant FrontendEnqueue
AdminUser->>AdminForm: load settings page
AdminScript->>AdminForm: init tabs from URL hash and color pickers
AdminUser->>AdminForm: change token inputs
AdminScript->>AdminScript: regenerate live preview CSS
AdminUser->>AdminForm: submit form
AdminForm->>Handler: POST with tokens and nonce
Handler->>Handler: verify capability and nonce
Handler->>Handler: sanitize_section
Handler->>OptionStorage: update_option slashed_bricks_tokens
FrontendEnqueue->>CSSGen: request override CSS
CSSGen->>OptionStorage: load slashed_bricks_tokens
CSSGen->>CSSGen: generate override declarations
FrontendEnqueue->>FrontendEnqueue: wp_add_inline_style generated CSS
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 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 `@integrations/bricks/assets/admin-page.css`:
- Line 79: The CSS file has Stylelint violations around the keyframe name and
modern syntax: rename the `@keyframes` identifier slashedFadeIn to a kebab-case
name (e.g. slashed-fade-in) and update all references (animation,
animation-name) to that new identifier; convert any legacy color formats to the
modern canonical notation required by your linter (e.g. full hex `#rrggbb` or
functional rgb()/rgba()/hsl()/hsla() as configured) and replace any media
feature ranges using comparison operators with the canonical range syntax (use
min-width/max-width or media queries like (min-width: 600px) instead of
deprecated range operators). Apply the same fixes to the other occurrences
mentioned (lines around the other keyframe definitions and media queries) so
naming and syntax are consistent across the file.
In `@integrations/bricks/includes/class-admin-page.php`:
- Around line 247-249: The reset buttons in class-admin-page.php are missing the
JS hook classes expected by admin-page.js so the handlers never run; update the
submit buttons (the one with page-title-action and the other occurrence around
the 283-286 block) to include the CSS classes used by the script (add
slashed-reset-all-btn for the global reset button and slashed-reset-btn for
individual reset buttons) while keeping existing classes/attributes (e.g.,
page-title-action) intact so admin-page.js can find and bind to them.
- Around line 159-165: Validate incoming section slugs against the allowed tabs
before mutating options: when handling $_POST['reset_section'] and
$_POST['active_tab'] in class-admin-page.php, sanitize the value as you're
already doing, then check it exists in $this->tabs (e.g.
isset($this->tabs[$section]) or in_array($section, array_keys($this->tabs)))
before calling get_settings(), unset($settings[$section]) and
update_option(self::OPTION_NAME, $settings) or before using it to build the
redirect; if the slug is not a known tab, skip the mutation/redirect (or return
an error) to prevent creating/removing arbitrary top-level keys in the
slashed_bricks_tokens option.
- Around line 240-263: The admin template is missing the wrapper elements
targeted by admin-page.css; wrap the header block (the <h1> with the Reset All
form and the call to $this->render_notices( $message )) in a container with
class "slashed-admin-header" and wrap the nav block that iterates $this->tabs
(uses $this->tabs and $active_tab) in a container with class
"slashed-admin-tabs" so the stylesheet rules apply; ensure you add those classes
to the correct surrounding elements and keep existing markup/nonce/form handlers
intact.
In `@integrations/bricks/README.md`:
- Line 140: Update the README's default CDN URL that currently uses the mutable
ref
'https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/dist/slashed.optimal.css'
to reference an immutable release tag or commit SHA (for example replace '`@main`'
with a version tag like '`@v1.2.3`' or a specific commit SHA) and update any
examples mentioning 'dist/slashed.optimal.css' to recommend pinning to a tagged
release or SHA for reproducibility and supply-chain safety.
In `@integrations/bricks/slashed-bricks.php`:
- Around line 92-100: The code currently registers slashed_bricks_admin_init for
admin pages but a separate deactivation branch still force-deactivates the
plugin when Bricks is inactive, which blocks the preconfiguration path; modify
the deactivation logic so it does not auto-deactivate in admin contexts: instead
of calling deactivate_plugins(...) when Bricks is missing, only show an admin
notice (or restrict deactivation to non-admin/front-end requests or the actual
plugin activation hook), and ensure the new slashed_bricks_admin_init +
add_action('plugins_loaded', 'slashed_bricks_admin_init') path remains usable
before Bricks is active.
- Around line 39-40: The default CDN URL ($default_url) currently points to the
moving ref '`@main`'—replace it with an immutable identifier (a commit SHA or
immutable release tag) so the CSS is pinned; update the assignment for
$default_url to reference a specific commit hash or a guaranteed immutable tag
and, if appropriate, map SLASHED_BRICKS_VERSION to that immutable CDN ref (use
SLASHED_BRICKS_VERSION only for WP enqueue version/caching and not as the CDN
pointer).
🪄 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: 8d5517a2-38b4-46b6-94b2-c977ab10e857
📒 Files selected for processing (8)
integrations/bricks/README.mdintegrations/bricks/assets/admin-page.cssintegrations/bricks/assets/admin-page.jsintegrations/bricks/includes/class-admin-page.phpintegrations/bricks/includes/class-css-generator.phpintegrations/bricks/includes/class-enqueue.phpintegrations/bricks/includes/class-token-defaults.phpintegrations/bricks/slashed-bricks.php
Contributor
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
Replaces the mutable @main ref with an immutable release tag (v0.2.12) via a new SLASHED_BRICKS_CSS_REF constant. jsDelivr treats branch refs as moving (12h cache) while commit/tag refs are effectively immutable, which is required for reproducibility and supply-chain safety. The pinned ref is overridable per-site via the slashed_bricks/css_bundle_url filter and is bumped explicitly with each plugin release. Addresses CodeRabbit review feedback on PR #77. Co-authored-by: Jack Granatowski <contact@codeslash.net>
Contributor
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
integrations/bricks/includes/class-admin-page.php (1)
226-228: 💤 Low valueConsider adding semicolon to the sanitization blocklist.
The current sanitization prevents escaping the CSS block context, but semicolons could allow injecting additional CSS declarations within
:root. While the blast radius is limited (admins already have full control), stripping;would provide defense-in-depth.private function sanitize_css_value( $value ) { - return str_replace( array( '{', '}', '<', '>', '@' ), '', $value ); + return str_replace( array( '{', '}', '<', '>', '@', ';' ), '', $value ); }🤖 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 `@integrations/bricks/includes/class-admin-page.php` around lines 226 - 228, The sanitize_css_value function currently strips { } < > @ but not semicolons; update the sanitizer in sanitize_css_value to also remove ';' from $value so CSS declarations cannot be chained (i.e., include ';' in the array passed to str_replace), ensuring the logics in sanitize_css_value continue returning the cleaned string.
🤖 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.
Nitpick comments:
In `@integrations/bricks/includes/class-admin-page.php`:
- Around line 226-228: The sanitize_css_value function currently strips { } < >
@ but not semicolons; update the sanitizer in sanitize_css_value to also remove
';' from $value so CSS declarations cannot be chained (i.e., include ';' in the
array passed to str_replace), ensuring the logics in sanitize_css_value continue
returning the cleaned string.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: e33f3016-ce46-45eb-a536-96669b26e85e
📒 Files selected for processing (4)
integrations/bricks/README.mdintegrations/bricks/assets/admin-page.cssintegrations/bricks/includes/class-admin-page.phpintegrations/bricks/slashed-bricks.php
✅ Files skipped from review due to trivial changes (1)
- integrations/bricks/README.md
Contributor
/kiro fix |
This was referenced May 24, 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.
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 autonomous agent
Summary
Adds a full WordPress admin settings page to the Bricks Builder integration plugin for visually editing all user-customizable SLASHED design tokens.
Changes
class-admin-page.php) - Tabbed UI with 7 sections: Colors, Typography, Spacing, Radius, Shadows, Motion, Z-Indexclass-token-defaults.php) - Factory default values for all editable tokensclass-css-generator.php) - Generates@layer slashed.overrides { :root { ... } }override CSS from saved settingsassets/admin-page.css,assets/admin-page.js) - Color picker integration, range/number sync, live preview panel, tab persistenceclass-enqueue.phpinjects customized token CSS viawp_add_inline_styleafter the framework bundleFeatures
Testing
php -l) on all new filesSummary by CodeRabbit
New Features
Documentation