feat: builder-agnostic CSS delivery and de-Bricks admin UI - #170
Conversation
SLASHED is a CSS framework, not a Bricks tool. This commit makes the core CSS delivery work on any WordPress site — custom theme, classic theme, or no page builder — and removes Bricks branding from the shared admin surfaces. CSS delivery - Add includes/class-core-enqueue.php (Slashed_Core_Enqueue): always enqueues `slashed-framework` on wp_enqueue_scripts and enqueue_block_editor_assets, independent of any builder integration. Includes the html_font_size override (moved from Bricks enqueue). Skips bricks_is_builder_main() context to protect Bricks' panel UI. - slashed.php: instantiate Slashed_Core_Enqueue unconditionally, before integration bootstraps. - slashed-bricks.php standalone: load class-settings.php, class-css-loader.php, class-core-enqueue.php and instantiate Slashed_Core_Enqueue so the standalone Bricks plugin also gets the global CSS pipeline. Bricks integration cleanup - class-enqueue.php: remove framework handle registration and html_font_size injection (both now handled by Slashed_Core_Enqueue). Bricks enqueue now only adds the dark-mode bridge inline style. Admin page restructure (class-admin.php) - Renamed "Active integrations" section to "CSS framework" — explains that CSS loads automatically on any site, no builder required. - Added "Customize design tokens →" link pointing to slashed-tokens (fixes broken link that previously pointed to non-existent slashed-bricks). - Moved bundle selector into the CSS framework section. - Renamed second section to "Builder integrations (optional)" with accurate descriptions of what each integration actually adds. Token editor de-Brickification (class-token-page.php + SPA) - Renamed wp_localize_script global: slashedBricksApp → slashedApp - Renamed script/style handles: slashed-bricks-admin-app → slashed-admin-app - Updated SPA source (stores.svelte.js, main.js, api.js) to reference window.slashedApp and slashed/v1 endpoints - Rebuilt compiled bundle (assets/admin-app/app.js) https://claude.ai/code/session_01DU3r3kT7GqH7w7jeadV2DT
|
Warning Review limit reached
More reviews will be available in 52 minutes and 39 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 (2)
📝 WalkthroughWalkthroughThis PR refactors CSS framework delivery by introducing a new builder-agnostic ChangesCore CSS Enqueue and Bootstrap Reorganization
Admin App Handle and Global Object Rename
Admin Settings Page UI Reorganization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
includes/class-token-page.php (1)
100-118:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate the remaining legacy global reference in the Bricks dev harness.
includes/class-token-page.phpnow consistently enqueues/localizesslashed-admin-app/slashedApp, and repo searches show no remaining PHP/JS/TS references toslashed-bricks-admin-apporwindow.slashedBricksAppfor runtime.
However,integrations/bricks/admin-app/index.html(dev harness) still setswindow.slashedBricksApp, which won’t match the currentwindow.slashedApp-based hydration—so adjust it toslashedAppto avoid silent breakage in the dev harness.🤖 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 `@includes/class-token-page.php` around lines 100 - 118, Replace the legacy global window.slashedBricksApp in the Bricks dev harness HTML with the current global name window.slashedApp so the localized object used by the enqueued script ('slashed-admin-app' / 'slashedApp') is matched at runtime; locate the dev harness index.html code that sets window.slashedBricksApp and change the assignment/initialization to window.slashedApp (preserving the same shape/fields), and also update any boot/hydration references that read window.slashedBricksApp so they read window.slashedApp instead.
🤖 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 `@includes/class-core-enqueue.php`:
- Around line 67-73: The editor stylesheet enqueuing in enqueue_editor() omits
the html font-size override that enqueue_frontend() injects, causing rem-based
sizing to differ in the block editor; update enqueue_editor() (and related
editor registration code) to apply the same html_font_size override (the
injected rule like "html { font-size: 62.5% !important; }" or 100%) when
registering/enqueuing the 'slashed-framework' stylesheet for the block editor
iframe so the editor canvas matches the frontend; ensure this only targets the
editor canvas (iframe) in supported WP versions (block editor is iframed in WP
6.4+) or add a short comment explaining deliberate omission if you intentionally
want to avoid affecting wp-admin chrome.
---
Outside diff comments:
In `@includes/class-token-page.php`:
- Around line 100-118: Replace the legacy global window.slashedBricksApp in the
Bricks dev harness HTML with the current global name window.slashedApp so the
localized object used by the enqueued script ('slashed-admin-app' /
'slashedApp') is matched at runtime; locate the dev harness index.html code that
sets window.slashedBricksApp and change the assignment/initialization to
window.slashedApp (preserving the same shape/fields), and also update any
boot/hydration references that read window.slashedBricksApp so they read
window.slashedApp instead.
🪄 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: 251c6956-e382-489f-882f-ba24f4d14c44
📒 Files selected for processing (10)
includes/class-admin.phpincludes/class-core-enqueue.phpincludes/class-token-page.phpintegrations/bricks/admin-app/src/lib/api.jsintegrations/bricks/admin-app/src/lib/stores.svelte.jsintegrations/bricks/admin-app/src/main.jsintegrations/bricks/assets/admin-app/app.jsintegrations/bricks/includes/class-enqueue.phpintegrations/bricks/slashed-bricks.phpslashed.php
- class-core-enqueue: enqueue_editor() now injects the same
html { font-size } override as enqueue_frontend() so the iframed
editor canvas renders rem-based values at the same root size as the
public site (block editor is always iframed in WP 6.4+, our minimum)
- admin-app/index.html: rename window.slashedBricksApp → window.slashedApp
in the Vite dev harness to match the renamed wp_localize_script global
https://claude.ai/code/session_01DU3r3kT7GqH7w7jeadV2DT
2 participants
Summary
SLASHED is a CSS framework, not a Bricks tool. This PR makes the core CSS delivery work on any WordPress site — custom theme, classic theme, or no page builder at all — and removes Bricks branding from every shared admin surface.
CSS delivery is now global
includes/class-core-enqueue.php(Slashed_Core_Enqueue): registers and enqueuesslashed-frameworkonwp_enqueue_scripts(frontend) andenqueue_block_editor_assets(block editor) regardless of which builder, if any, is active. Skipsbricks_is_builder_main()to protect Bricks' panel UI.html_font_sizeoverride moved from the Bricks enqueue class intoSlashed_Core_Enqueue— it's a global token setting, not Bricks-specific.slashed.phpinstantiatesSlashed_Core_Enqueueunconditionally, before any integration bootstrap.Slashed_Core_Enqueue(plusclass-settings.phpandclass-css-loader.php).Bricks integration simplified
Slashed_Bricks_Enqueuenow only adds the Bricks dark-mode bridge inline style ([data-brx-theme]→--sf-is-dark). Framework handle registration and font-size injection are handled globally.Admin page restructured
slashed-bricks)slashed-tokens)Token editor de-Brickification
slashedBricksApp→slashedApp(PHPwp_localize_script+ SPA source + compiled bundle)slashed-bricks-admin-app→slashed-admin-appmain.js,api.js,stores.svelte.js)Test plan
slashed/v1endpoints)https://claude.ai/code/session_01DU3r3kT7GqH7w7jeadV2DT
Generated by Claude Code
Summary by CodeRabbit