Skip to content

fix: Gutenberg CSS bleed into Bricks editor + dark mode toggle + misc #176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackgranatowski merged 3 commits into from
May 31, 2026
Merged

fix: Gutenberg CSS bleed into Bricks editor + dark mode toggle + misc #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a4e544
fix: correct CSS bundle descriptions to match actual bundle contents
claude May 31, 2026
bade0e6
fix: guard Gutenberg enqueue_frontend_styles against Bricks builder p…
claude May 31, 2026
50dcfeb
fix: add dark_mode field to Bricks color entries to enable dark mode …
claude May 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions plugins/SLASHED-for-WP/includes/class-admin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,9 @@ public function render_page() {
<table class="form-table" role="presentation">
<?php
$bundles = array(
'essential' => __( 'Essential — reset + design tokens only', 'slashed' ),
'optimal' => __( 'Optimal — + layout, typography, states, forms (recommended)', 'slashed' ),
'full' => __( 'Full — + utilities layer', 'slashed' ),
'essential' => __( 'Essential — core layer only: tokens, reset, layout, states, motion', 'slashed' ),
'optimal' => __( 'Optimal — + color palette, forms, legacy support (recommended)', 'slashed' ),
'full' => __( 'Full — + components + utilities', 'slashed' ),
);
foreach ( $bundles as $value => $label ) :
?>
Expand Down
6 changes: 3 additions & 3 deletions plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/BundleTab.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@
<div class="setting-row">
<label for="css-bundle">CSS Bundle</label>
<select id="css-bundle" bind:value={bundle}>
<option value="essential">Essential — base variables only</option>
<option value="optimal">Optimal — variables + core utilities (default)</option>
<option value="full">Full — all utilities included</option>
<option value="essential">Essential — core layer only: tokens, reset, layout, states, motion</option>
<option value="optimal">Optimal — + color palette, forms, legacy support (recommended)</option>
<option value="full">Full — + components + utilities</option>
</select>
<p class="description">
Choose which SLASHED CSS bundle to load on the frontend and in builder canvases.
Expand Down
2 changes: 1 addition & 1 deletion plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 13 additions & 4 deletions plugins/SLASHED-for-WP/integrations/bricks/includes/class-colors.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,10 +250,19 @@ private function vars_to_palette_colors( $palette_slug, $vars, $hex_map ) {
$hex_fallback = isset( $hex_map[ $var ] ) ? $hex_map[ $var ] : '#808080';

$colors[] = array(
'id' => self::PALETTE_ID_PREFIX . $palette_slug . '-' . $this->slugify( $key ),
'name' => $this->humanize_key( $key ),
'hex' => $hex_fallback,
'raw' => 'var(' . $var . ')',
'id' => self::PALETTE_ID_PREFIX . $palette_slug . '-' . $this->slugify( $key ),
'name' => $this->humanize_key( $key ),
'hex' => $hex_fallback,
'raw' => 'var(' . $var . ')',
// Bricks only enables its dark-mode toggle element when at least
// one palette color has a dark_mode entry. SLASHED's CSS custom
// properties resolve to their dark-mode value automatically when
// data-brx-theme="dark" is set (bridged by the inline rule in
// class-enqueue.php), so both modes can reference the same var().
'dark_mode' => array(
'hex' => $hex_fallback,
'raw' => 'var(' . $var . ')',
),
);
}
return $colors;
Expand Down
8 changes: 8 additions & 0 deletions plugins/SLASHED-for-WP/integrations/gutenberg/includes/class-enqueue.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,16 @@ public function enqueue_editor_styles() {

/**
* Load SLASHED CSS on the public frontend.
*
* Skips the Bricks builder-panel context when Bricks is active:
* loading CSS resets into the builder chrome breaks Bricks' icons.
* The same guard lives in Slashed_Core_Enqueue::enqueue_frontend().
*/
public function enqueue_frontend_styles() {
if ( function_exists( 'bricks_is_builder_main' ) && bricks_is_builder_main() ) {
return;
}

$css_url = slashed_gutenberg_get_css_url();
if ( '' === $css_url ) {
return;
Expand Down