fix (color schemes): remove color scheme styles in editor if there are no color schemes

[kaeizen]

Summary by CodeRabbit

• Bug Fixes
  • Prevents container areas from incorrectly inheriting background color schemes when a container/base scheme is missing, improving readability and contrast.
  • Adds smarter default color fallbacks for containers to avoid unreadable text in edge cases, improving accessibility without altering user settings.
  • Ensures more consistent color rendering across themes in the editor and resulting styles.
  • No changes to public settings or workflows; behavior is safer and more predictable in scenarios with incomplete color scheme configuration.

[coderabbitai]

Walkthrough

Adds a computed guard (addContainerSchemeDefaultColors) to set default colors for container schemes when background/container schemes are missing or conflicting, preventing unintended inheritance. Updates a conditional branch to use this flag while leaving render flow and CSS generation intact. No public APIs or exports changed.

Changes

Cohort / File(s)	Summary
Color Scheme Guard Logic src/plugins/global-settings/color-schemes/editor-loader.js	Introduces addContainerSchemeDefaultColors to detect absent/mismatched container/base schemes; adjusts conditional to apply container default colors in those cases; preserves existing rendering and CSS output; no API changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant UI as Editor UI
  participant Loader as editor-loader
  participant Schemes as ColorSchemes

  UI->>Loader: loadSchemes()
  Loader->>Schemes: get backgroundScheme, containerScheme
  Schemes-->>Loader: schemes data

  alt addContainerSchemeDefaultColors = true
    note right of Loader: New guard computes default colors<br/>for container to avoid fallback to background
    Loader->>Loader: apply container default colors
  else
    Loader->>Loader: keep existing container colors
  end

  Loader-->>UI: render with computed CSS

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nudge the hues with gentle care,
So text won’t vanish into air—
A rabbit dab of default light,
Keeps containers clear and bright.
Hop, hop! The palettes sing,
With guarded tones for spring. 🐇🎨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The title indicates that the PR removes color scheme styles in the editor when no schemes are present, but the actual changes introduce a guard to apply default container colors when a container scheme is missing rather than removing styles. This misrepresents the core update, which is about adding fallback coloring logic for edge cases.	Please rename the title to accurately reflect the new guard logic, for example: “fix(color schemes): add default container color fallback when container scheme is missing.”

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/remove-color-scheme-styles-in-editor

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3622-stackable-3622-merge.zip	de025c1

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3622-stackable-3622-merge.zip"}}]}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/plugins/global-settings/color-schemes/editor-loader.js (1)

72-79: Good fix for the inheritance issue; consider clarifying the length check.

The computed guard correctly prevents containers from inheriting background colors that could make text unreadable. The main logic (checking if background scheme has value while container is empty) is solid.

However, the colorSchemesArray.length !== 2 condition is somewhat fragile. It assumes a specific array structure and doesn't explicitly verify what those 2 schemes are. This could break if the array structure changes or if there are different combinations of schemes (e.g., default + container instead of default + background).

Consider replacing the length check with a more explicit condition that describes what you're actually checking for. For example:

-	// This fixes the issue wherein if there is a background scheme and no container/base scheme, the container inherits the background scheme which may cause the text to be unreadable
-	const addContainerSchemeDefaultColors = containerModeColorScheme in colorSchemes && ! schemeHasValue( colorSchemes[ containerModeColorScheme ] ) &&
-		(
-			// Add default container scheme if background scheme has value
-			( backgroundModeColorScheme in colorSchemes && schemeHasValue( colorSchemes[ backgroundModeColorScheme ] ) ) ||
-			// Add default container scheme if there are color schemes other than the default scheme and background scheme
-			( colorSchemesArray.length !== 2 )
-		)
+	// This fixes the issue wherein if there is a background scheme and no container/base scheme, 
+	// the container inherits the background scheme which may cause the text to be unreadable
+	const hasBackgroundSchemeWithValue = backgroundModeColorScheme in colorSchemes && 
+		schemeHasValue( colorSchemes[ backgroundModeColorScheme ] )
+	const hasCustomSchemes = colorSchemesArray.some( scheme => 
+		scheme.slug !== baseColorScheme && 
+		scheme.slug !== backgroundModeColorScheme && 
+		schemeHasValue( scheme )
+	)
+	const addContainerSchemeDefaultColors = 
+		containerModeColorScheme in colorSchemes && 
+		! schemeHasValue( colorSchemes[ containerModeColorScheme ] ) &&
+		( hasBackgroundSchemeWithValue || hasCustomSchemes )

This makes the intent clearer and is more resilient to changes in array structure.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 578783c and de025c1.

📒 Files selected for processing (1)

• src/plugins/global-settings/color-schemes/editor-loader.js (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/plugins/global-settings/color-schemes/editor-loader.js (1)

src/plugins/global-settings/color-schemes/utils.js (2)

• schemeHasValue (29-35)
• schemeHasValue (29-35)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)

• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: build

🔇 Additional comments (1)

src/plugins/global-settings/color-schemes/editor-loader.js (1)

91-91: LGTM! Cleaner conditional structure.

Using the computed addContainerSchemeDefaultColors flag instead of inline complex logic improves readability and maintainability.