fix generated css when there are no color schemes

Author: kaeizen

src/plugins/global-settings/color-schemes/color-scheme-picker.js

@@ -137,11 +137,19 @@ const ColorSchemePicker = props => {
 	// Get the custom color schemes
 	const customColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', [] )
 
+	// Checks if there are any color schemes with set values
+	const hasNoColorSchemes = currentColorSchemes => {
+		return ! currentColorSchemes.some( item => schemeHasValue( item.colorScheme ) )
+	}
+
 	const saveColorSchemeSettings = updatedColorSchemes => {
 		clearTimeout( saveTimeout )
 		saveTimeout = setTimeout( () => {
 			const settings = new models.Settings( {
-				stackable_global_color_schemes: updatedColorSchemes, // eslint-disable-line camelcase
+				// Store an empty array if all color schemes have no values,
+				// which optimizes the frontend by skipping unnecessary color scheme calculations.
+				// Otherwise, save the provided updatedColorSchemes array.
+				stackable_global_color_schemes: hasNoColorSchemes( updatedColorSchemes ) ? [] : updatedColorSchemes, // eslint-disable-line camelcase
 				// Clear the cached CSS when the color scheme is updated
 				stackable_global_color_scheme_generated_css: '', // eslint-disable-line camelcase
 			} )

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

@@ -75,7 +75,7 @@ export const renderGlobalColorSchemeStyles = (
 			// 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 )
+			( colorSchemesArray.length > 2 )
 		)
 
 	if ( containerModeColorScheme in colorSchemes && schemeHasValue( colorSchemes[ containerModeColorScheme ] ) ) {

src/plugins/global-settings/color-schemes/index.php

@@ -341,8 +341,15 @@ public function add_global_color_schemes_styles( $current_css ) {
 			}
 
 			// 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
-			if ( isset( $this->color_schemes[ $container_default ] ) && $this::is_scheme_empty( $this->color_schemes[ $container_default ] ) ) {
-				$styles = $this->getDefaultContainerColors( $styles, $default_color_schemes[ 2 ] );
+			$add_default_container_colors = isset( $this->color_schemes[ $container_default ] ) && $this::is_scheme_empty( $this->color_schemes[ $container_default ] ) && (
+				// Add default container scheme if background scheme has value
+				( isset( $this->color_schemes[ $background_default ] ) && ! $this::is_scheme_empty( $this->color_schemes[ $background_default ] ) ) ||
+				// Add default container scheme if there are color schemes other than the default scheme and background scheme
+				count( $this->color_schemes ) > 2
+			);
+
+			if ( $add_default_container_colors ) {
+				$styles = $this->get_default_container_colors( $styles, $default_color_schemes[ 2 ] );
 			}
 
 			$color_scheme_css = '';
@@ -508,7 +515,7 @@ public function is_gradient( $scheme, $property, $state ) {
 		}
 
 		// These colors are used when there are color schemes but the default container scheme is empty
-		public function getDefaultContainerColors( $styles, $scheme ) {
+		public function get_default_container_colors( $styles, $scheme ) {
 			$selectors = $scheme[ 'selectors' ];
 
 			$default_styles = array();