feat(bricks): expand admin panel to full API + add cheatsheet tab - #98
Merged
Conversation
- Create VariablesTab.svelte: read-only view of all --sf-* variables grouped by category (mirrors class-inventory.php categorization logic) - Create ClassesTab.svelte: collapsible lists of .sf-* and .is-* classes - Create BundleTab.svelte: bundle info + html_font_size plugin setting with independent save button calling POST /settings - Create HooksTab.svelte: static reference for all 7 filter hooks with descriptions and PHP code examples - Update stores.svelte.js: expose inventory and pluginSettings from bootstrap - Update api.js: add saveSettings() function - Update App.svelte: route new tab slugs to their components - Update class-admin-page.php: register variables/classes/bundle/hooks tabs - Update class-admin-page-svelte.php: pass inventory data to SPA hydration - Update index.html dev harness: include mock inventory data and new tabs
…n admin cheatsheet - CheatsheetTab: replace broken AND condition for no-results with a proper $derived that works for all viewMode values - CheatsheetTab: replace hard-coded totalVarCount/totalSfClassCount/ totalIsClassCount with values derived from meta.inventory - App.svelte: add 'bundle' to readOnlyTabs so BundleTab (which has its own save button) does not show the global SaveBar
Contributor
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
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:
📝 WalkthroughWalkthroughExpands the Svelte 5 admin SPA with five new read-only tabs (Variables, Classes, Cheatsheet, Hooks) and one writable Bundle/settings tab, all powered by inventory data hydrated from the PHP backend. Includes searchable cheatsheet, save flow for html_font_size setting, and conditional SaveBar visibility for read-only tabs. ChangesAdmin Panel Full API Expansion
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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: 8
🤖 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 @.agents/tasks/task-admin-panel-full-api-cheatsheet/features/FEAT-003.json:
- Line 27: The findings text currently states "variableGroups (14 categories)"
but Step 1 defines 16 categories; update the findings entry to match Step 1 by
changing the count to "variableGroups (16 categories)" so the "findings" field
and the Step 1 definition of variableGroups are consistent (verify the string in
FEAT-003.json under the "findings" key and the Step 1 list that defines
variableGroups).
In @.agents/tasks/task-admin-panel-full-api-cheatsheet/task.json:
- Line 4: Update the "status" field in task.json from "in_progress" to
"completed" so the task accurately reflects that FEAT-001, FEAT-002, and
FEAT-003 are finished; edit the JSON key "status" in the existing task object
and verify any related metadata (e.g., feature IDs or completed flags) in the
same file are consistent with the completed state to avoid release-tracking
drift.
In `@integrations/bricks/admin-app/src/components/BundleTab.svelte`:
- Around line 14-22: In handleSave, prevent overlapping success timers by
tracking the timeout ID in a module/component-scoped variable (e.g.,
savedTimeout) and clearing any existing timeout with clearTimeout(savedTimeout)
before calling setTimeout to reset saved; update the code referenced by
handleSave and the saved state so the new savedTimeout variable is declared
outside the function and reused to cancel the previous timer before scheduling a
new one.
In `@integrations/bricks/admin-app/src/components/CheatsheetTab.svelte`:
- Around line 65-79: The view-mode buttons act as a toggle group but don't
expose their pressed state to assistive tech; update each button in
CheatsheetTab.svelte (the three buttons using viewMode ===
'all'/'variables'/'classes') to include aria-pressed bound to the same condition
(e.g., aria-pressed={viewMode === 'all'}), keep the existing class:active
bindings, and ensure the click handlers remain (onclick or Svelte on:click) so
the visible state and ARIA pressed state stay in sync.
- Around line 58-63: The search input in CheatsheetTab.svelte currently uses
only placeholder text and needs an explicit accessible name; update the <input>
for the search (the element binding to the search variable) to include an
explicit label — either add a visible <label> tied to the input via id or add an
aria-label or aria-labelledby attribute (e.g., aria-label="Search tokens or
classes") so screen readers receive a proper accessible name for the field.
In `@integrations/bricks/admin-app/src/components/ClassesTab.svelte`:
- Around line 75-88: The .category__toggle rule uses "all: unset" which removes
native focus styles and breaks keyboard accessibility; restore a visible focus
indicator by adding an explicit :focus-visible style for .category__toggle
(e.g., a clear outline or ring and preserved focus background) so keyboard users
can see focus when tabbing through section toggles; update the stylesheet by
adding a .category__toggle:focus-visible rule that applies a visible
outline/box-shadow and optionally sets outline-offset or background to match
hover styling.
In `@integrations/bricks/admin-app/src/components/VariablesTab.svelte`:
- Around line 146-159: The .category__toggle rule uses all: unset which strips
the browser focus ring; restore visible keyboard focus by either removing all:
unset or (preferred) add an explicit focus style such as
.category__toggle:focus-visible { outline: 2px solid var(--focus-color);
outline-offset: 2px; border-radius: 4px; } so keyboard users see focus; update
the CSS block containing .category__toggle to include this :focus-visible rule
(and keep .category__toggle:hover unchanged).
In `@integrations/bricks/includes/class-admin-page.php`:
- Around line 69-73: The legacy admin tab list ($this->tabs) now contains
SPA-only slugs ('variables','classes','bundle','hooks','cheatsheet') which
causes the classic page to try to call nonexistent render_tab_* methods and
produce blank content; update class-admin-page.php to separate SPA-only tabs
from legacy tabs (e.g., remove those slugs from $this->tabs or move them into a
new $this->spa_tabs/$spaOnlyTabs property) so the legacy render flow (methods
like render_tab_* ) only iterates real legacy tabs, and ensure any tab-render
loop or tab registration checks against the legacy list rather than the combined
list.
🪄 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: 67f53037-6591-47c0-9882-c8d49171513d
📒 Files selected for processing (20)
.agents/tasks/task-admin-panel-full-api-cheatsheet/2025-05-26-001000-review.md.agents/tasks/task-admin-panel-full-api-cheatsheet/context.json.agents/tasks/task-admin-panel-full-api-cheatsheet/features/FEAT-001.json.agents/tasks/task-admin-panel-full-api-cheatsheet/features/FEAT-002.json.agents/tasks/task-admin-panel-full-api-cheatsheet/features/FEAT-003.json.agents/tasks/task-admin-panel-full-api-cheatsheet/task.jsonintegrations/bricks/admin-app/index.htmlintegrations/bricks/admin-app/src/App.svelteintegrations/bricks/admin-app/src/components/BundleTab.svelteintegrations/bricks/admin-app/src/components/CheatsheetTab.svelteintegrations/bricks/admin-app/src/components/ClassesTab.svelteintegrations/bricks/admin-app/src/components/HooksTab.svelteintegrations/bricks/admin-app/src/components/VariablesTab.svelteintegrations/bricks/admin-app/src/lib/api.jsintegrations/bricks/admin-app/src/lib/cheatsheet-data.jsintegrations/bricks/admin-app/src/lib/stores.svelte.jsintegrations/bricks/assets/admin-app/app.cssintegrations/bricks/assets/admin-app/app.jsintegrations/bricks/includes/class-admin-page-svelte.phpintegrations/bricks/includes/class-admin-page.php
| "Run `cd integrations/bricks/admin-app && npm run build` and confirm exit code 0" | ||
| ], | ||
| "blocked_reason": null, | ||
| "findings": "All steps implemented successfully. Created cheatsheet-data.js with variableGroups (14 categories), classGroups (5 categories), and miscTokens. Created CheatsheetTab.svelte with search, view mode toggle (All/Variables/Classes), collapsible details sections, and total counts display. Updated App.svelte to import CheatsheetTab, hide SaveBar on read-only tabs (cheatsheet, hooks, variables, classes). Added cheatsheet tab to PHP class-admin-page.php and index.html dev harness. Build passes (vite build exits 0). Bundle grew from ~62KB to ~84KB due to the static cheatsheet data." |
There was a problem hiding this comment.
Fix inconsistent variable category count in findings.
Line 27 says variableGroups (14 categories), but Step 1 defines 16 categories. Please align this count to prevent future confusion in task tracking/audits.
🤖 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 @.agents/tasks/task-admin-panel-full-api-cheatsheet/features/FEAT-003.json at
line 27, The findings text currently states "variableGroups (14 categories)" but
Step 1 defines 16 categories; update the findings entry to match Step 1 by
changing the count to "variableGroups (16 categories)" so the "findings" field
and the Step 1 definition of variableGroups are consistent (verify the string in
FEAT-003.json under the "findings" key and the Step 1 list that defines
variableGroups).
| { | ||
| "task_id": "task-admin-panel-full-api-cheatsheet", | ||
| "task_description": "Expand the Svelte admin panel to cover the entire public API (variables, classes, bundle settings, hooks) and add a Cheatsheet tab with a searchable index of all CSS custom properties and classes in the framework with descriptions.", | ||
| "status": "in_progress", |
There was a problem hiding this comment.
Update task status to match completed feature set.
task.json is still in_progress while FEAT-001/002/003 are all marked completed. This creates tracking drift for release readiness and automation.
Suggested fix
- "status": "in_progress",
+ "status": "completed",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "status": "in_progress", | |
| "status": "completed", |
🤖 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 @.agents/tasks/task-admin-panel-full-api-cheatsheet/task.json at line 4,
Update the "status" field in task.json from "in_progress" to "completed" so the
task accurately reflects that FEAT-001, FEAT-002, and FEAT-003 are finished;
edit the JSON key "status" in the existing task object and verify any related
metadata (e.g., feature IDs or completed flags) in the same file are consistent
with the completed state to avoid release-tracking drift.
Comment on lines
+14
to
+22
| async function handleSave() { | ||
| saving = true; | ||
| saved = false; | ||
| error = ''; | ||
| try { | ||
| await saveSettings({ html_font_size: fontSize }); | ||
| saved = true; | ||
| setTimeout(() => { saved = false; }, 3000); | ||
| } catch (e) { |
There was a problem hiding this comment.
Prevent overlapping success timers across rapid saves.
Line 21 schedules a new timer on every save without clearing the previous one, so an older timer can clear saved too early after a newer save.
Suggested fix
let saving = $state(false);
let saved = $state(false);
let error = $state('');
+ let savedTimer = null;
@@
await saveSettings({ html_font_size: fontSize });
saved = true;
- setTimeout(() => { saved = false; }, 3000);
+ if (savedTimer) clearTimeout(savedTimer);
+ savedTimer = setTimeout(() => {
+ saved = false;
+ savedTimer = null;
+ }, 3000);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| async function handleSave() { | |
| saving = true; | |
| saved = false; | |
| error = ''; | |
| try { | |
| await saveSettings({ html_font_size: fontSize }); | |
| saved = true; | |
| setTimeout(() => { saved = false; }, 3000); | |
| } catch (e) { | |
| async function handleSave() { | |
| saving = true; | |
| saved = false; | |
| error = ''; | |
| try { | |
| await saveSettings({ html_font_size: fontSize }); | |
| saved = true; | |
| if (savedTimer) clearTimeout(savedTimer); | |
| savedTimer = setTimeout(() => { | |
| saved = false; | |
| savedTimer = null; | |
| }, 3000); | |
| } catch (e) { |
🤖 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/admin-app/src/components/BundleTab.svelte` around lines
14 - 22, In handleSave, prevent overlapping success timers by tracking the
timeout ID in a module/component-scoped variable (e.g., savedTimeout) and
clearing any existing timeout with clearTimeout(savedTimeout) before calling
setTimeout to reset saved; update the code referenced by handleSave and the
saved state so the new savedTimeout variable is declared outside the function
and reused to cancel the previous timer before scheduling a new one.
Comment on lines
+58
to
+63
| <input | ||
| type="search" | ||
| class="cheatsheet__search" | ||
| placeholder="Search tokens or classes..." | ||
| bind:value={search} | ||
| /> |
There was a problem hiding this comment.
Add an explicit accessible name to the search field.
At Lines 58-63, the search input relies on placeholder text only. That does not provide a reliable accessible label for screen readers.
Proposed fix
<input
type="search"
class="cheatsheet__search"
placeholder="Search tokens or classes..."
+ aria-label="Search tokens or classes"
bind:value={search}
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <input | |
| type="search" | |
| class="cheatsheet__search" | |
| placeholder="Search tokens or classes..." | |
| bind:value={search} | |
| /> | |
| <input | |
| type="search" | |
| class="cheatsheet__search" | |
| placeholder="Search tokens or classes..." | |
| aria-label="Search tokens or classes" | |
| bind:value={search} | |
| /> |
🤖 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/admin-app/src/components/CheatsheetTab.svelte` around
lines 58 - 63, The search input in CheatsheetTab.svelte currently uses only
placeholder text and needs an explicit accessible name; update the <input> for
the search (the element binding to the search variable) to include an explicit
label — either add a visible <label> tied to the input via id or add an
aria-label or aria-labelledby attribute (e.g., aria-label="Search tokens or
classes") so screen readers receive a proper accessible name for the field.
Comment on lines
+65
to
+79
| <button | ||
| type="button" | ||
| class:active={viewMode === 'all'} | ||
| onclick={() => viewMode = 'all'} | ||
| >All</button> | ||
| <button | ||
| type="button" | ||
| class:active={viewMode === 'variables'} | ||
| onclick={() => viewMode = 'variables'} | ||
| >Variables</button> | ||
| <button | ||
| type="button" | ||
| class:active={viewMode === 'classes'} | ||
| onclick={() => viewMode = 'classes'} | ||
| >Classes</button> |
There was a problem hiding this comment.
Expose selected state for the view-mode toggle buttons.
At Lines 65-79, these buttons behave like a toggle group but don’t expose their pressed state to assistive tech.
Proposed fix
<button
type="button"
class:active={viewMode === 'all'}
+ aria-pressed={viewMode === 'all'}
onclick={() => viewMode = 'all'}
>All</button>
<button
type="button"
class:active={viewMode === 'variables'}
+ aria-pressed={viewMode === 'variables'}
onclick={() => viewMode = 'variables'}
>Variables</button>
<button
type="button"
class:active={viewMode === 'classes'}
+ aria-pressed={viewMode === 'classes'}
onclick={() => viewMode = 'classes'}
>Classes</button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <button | |
| type="button" | |
| class:active={viewMode === 'all'} | |
| onclick={() => viewMode = 'all'} | |
| >All</button> | |
| <button | |
| type="button" | |
| class:active={viewMode === 'variables'} | |
| onclick={() => viewMode = 'variables'} | |
| >Variables</button> | |
| <button | |
| type="button" | |
| class:active={viewMode === 'classes'} | |
| onclick={() => viewMode = 'classes'} | |
| >Classes</button> | |
| <button | |
| type="button" | |
| class:active={viewMode === 'all'} | |
| aria-pressed={viewMode === 'all'} | |
| onclick={() => viewMode = 'all'} | |
| >All</button> | |
| <button | |
| type="button" | |
| class:active={viewMode === 'variables'} | |
| aria-pressed={viewMode === 'variables'} | |
| onclick={() => viewMode = 'variables'} | |
| >Variables</button> | |
| <button | |
| type="button" | |
| class:active={viewMode === 'classes'} | |
| aria-pressed={viewMode === 'classes'} | |
| onclick={() => viewMode = 'classes'} | |
| >Classes</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 `@integrations/bricks/admin-app/src/components/CheatsheetTab.svelte` around
lines 65 - 79, The view-mode buttons act as a toggle group but don't expose
their pressed state to assistive tech; update each button in
CheatsheetTab.svelte (the three buttons using viewMode ===
'all'/'variables'/'classes') to include aria-pressed bound to the same condition
(e.g., aria-pressed={viewMode === 'all'}), keep the existing class:active
bindings, and ensure the click handlers remain (onclick or Svelte on:click) so
the visible state and ARIA pressed state stay in sync.
Comment on lines
+75
to
+88
| .category__toggle { | ||
| all: unset; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| width: 100%; | ||
| padding: 10px 12px; | ||
| cursor: pointer; | ||
| font-size: 14px; | ||
| font-weight: 500; | ||
| } | ||
| .category__toggle:hover { | ||
| background: #f6f7f7; | ||
| } |
There was a problem hiding this comment.
Add an explicit focus-visible style for section toggles.
On Line 76, all: unset strips browser focus styling; without a replacement, keyboard users cannot track focus.
Suggested fix
.category__toggle {
all: unset;
display: flex;
@@
.category__toggle:hover {
background: `#f6f7f7`;
}
+ .category__toggle:focus-visible {
+ outline: 2px solid `#2271b1`;
+ outline-offset: 2px;
+ border-radius: 4px;
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .category__toggle { | |
| all: unset; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| padding: 10px 12px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .category__toggle:hover { | |
| background: #f6f7f7; | |
| } | |
| .category__toggle { | |
| all: unset; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| padding: 10px 12px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .category__toggle:hover { | |
| background: `#f6f7f7`; | |
| } | |
| .category__toggle:focus-visible { | |
| outline: 2px solid `#2271b1`; | |
| outline-offset: 2px; | |
| border-radius: 4px; | |
| } |
🤖 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/admin-app/src/components/ClassesTab.svelte` around lines
75 - 88, The .category__toggle rule uses "all: unset" which removes native focus
styles and breaks keyboard accessibility; restore a visible focus indicator by
adding an explicit :focus-visible style for .category__toggle (e.g., a clear
outline or ring and preserved focus background) so keyboard users can see focus
when tabbing through section toggles; update the stylesheet by adding a
.category__toggle:focus-visible rule that applies a visible outline/box-shadow
and optionally sets outline-offset or background to match hover styling.
Comment on lines
+146
to
+159
| .category__toggle { | ||
| all: unset; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| width: 100%; | ||
| padding: 10px 12px; | ||
| cursor: pointer; | ||
| font-size: 14px; | ||
| font-weight: 500; | ||
| } | ||
| .category__toggle:hover { | ||
| background: #f6f7f7; | ||
| } |
There was a problem hiding this comment.
Restore visible keyboard focus for category toggles.
all: unset on Line 147 removes the default focus ring, and there is no :focus-visible replacement, so keyboard focus becomes invisible.
Suggested fix
.category__toggle {
all: unset;
display: flex;
align-items: center;
@@
.category__toggle:hover {
background: `#f6f7f7`;
}
+ .category__toggle:focus-visible {
+ outline: 2px solid `#2271b1`;
+ outline-offset: 2px;
+ border-radius: 4px;
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .category__toggle { | |
| all: unset; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| padding: 10px 12px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .category__toggle:hover { | |
| background: #f6f7f7; | |
| } | |
| .category__toggle { | |
| all: unset; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| padding: 10px 12px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .category__toggle:hover { | |
| background: `#f6f7f7`; | |
| } | |
| .category__toggle:focus-visible { | |
| outline: 2px solid `#2271b1`; | |
| outline-offset: 2px; | |
| border-radius: 4px; | |
| } |
🤖 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/admin-app/src/components/VariablesTab.svelte` around
lines 146 - 159, The .category__toggle rule uses all: unset which strips the
browser focus ring; restore visible keyboard focus by either removing all: unset
or (preferred) add an explicit focus style such as
.category__toggle:focus-visible { outline: 2px solid var(--focus-color);
outline-offset: 2px; border-radius: 4px; } so keyboard users see focus; update
the CSS block containing .category__toggle to include this :focus-visible rule
(and keep .category__toggle:hover unchanged).
Comment on lines
+69
to
+73
| 'variables' => 'Variables', | ||
| 'classes' => 'Classes', | ||
| 'bundle' => 'Bundle', | ||
| 'hooks' => 'Hooks', | ||
| 'cheatsheet' => 'Cheatsheet', |
There was a problem hiding this comment.
Split legacy tab navigation from SPA tab hydration.
These new slugs are now part of the legacy $this->tabs source, so the classic admin page renders tabs it cannot display (render_tab_* methods don’t exist for them), resulting in blank tab content with active Save/Reset controls.
💡 Suggested fix
--- a/integrations/bricks/includes/class-admin-page.php
+++ b/integrations/bricks/includes/class-admin-page.php
@@
$this->tabs = array(
'colors' => 'Colors',
'contrast' => 'Contrast',
'typography' => 'Typography',
'spacing' => 'Spacing',
'radius' => 'Radius',
'shadows' => 'Shadows',
'motion' => 'Motion',
'zindex' => 'Z-Index',
- 'variables' => 'Variables',
- 'classes' => 'Classes',
- 'bundle' => 'Bundle',
- 'hooks' => 'Hooks',
- 'cheatsheet' => 'Cheatsheet',
);
@@
public function get_tabs() {
- return $this->tabs;
+ return array_merge(
+ $this->tabs,
+ array(
+ 'variables' => 'Variables',
+ 'classes' => 'Classes',
+ 'bundle' => 'Bundle',
+ 'hooks' => 'Hooks',
+ 'cheatsheet' => 'Cheatsheet',
+ )
+ );
}🤖 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 69 - 73, The
legacy admin tab list ($this->tabs) now contains SPA-only slugs
('variables','classes','bundle','hooks','cheatsheet') which causes the classic
page to try to call nonexistent render_tab_* methods and produce blank content;
update class-admin-page.php to separate SPA-only tabs from legacy tabs (e.g.,
remove those slugs from $this->tabs or move them into a new
$this->spa_tabs/$spaOnlyTabs property) so the legacy render flow (methods like
render_tab_* ) only iterates real legacy tabs, and ensure any tab-render loop or
tab registration checks against the legacy list rather than the combined list.
Contributor
|
/kiro all |
This was referenced May 28, 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
Expands the Svelte 5 admin SPA (
integrations/bricks/admin-app/) to cover the entire SLASHED Bricks plugin public API and adds a comprehensive Cheatsheet reference page.New tabs
--sf-*CSS custom properties, grouped by category (Colors, Typography, Spacing, etc.), using the same categorization logic as the PHP backend..sf-*layout/utility classes and.is-*state classes in collapsible sections.html_font_sizeplugin setting with independent save.Supporting changes
stores.svelte.jsnow exposesinventoryandpluginSettingsfrom the PHP hydration payloadapi.jsgainssaveSettings()for the font-size REST endpointindex.html) updated with mock data for standalone developmentBuild
npm run buildpasses, producingapp.js(84KB) andapp.css(11KB). Compiled assets committed.Review
Semantic review approved. Three issues found in v1 (empty-state logic bug, hard-coded counts instead of dynamic, dual save affordance confusion) were fixed before final review.
Summary by CodeRabbit