cache color scheme css

Author: kaeizen

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

@@ -89,10 +89,13 @@ const ColorSchemePicker = props => {
 		setDisplayHoverNotice,
 	} = props
 
-	const { colorSchemes } = useSelect( select => {
-		const { colorSchemes: _colorSchemes } = select( 'stackable/global-color-schemes' ).getSettings()
+	const {
+		colorSchemes, cachedCss,
+	} = useSelect( select => {
+		const { colorSchemes: _colorSchemes, cachedCss } = select( 'stackable/global-color-schemes' ).getSettings()
 		return {
 			colorSchemes: cloneDeep( _colorSchemes ),
+			cachedCss,
 		}
 	} )
 
@@ -125,7 +128,7 @@ const ColorSchemePicker = props => {
 
 	// Add a custom color scheme
 	const handleAddItem = ( event, scheme = null ) => {
-		doAction( 'stackable.global-settings.global-color-schemes.custom-color-schemes.add-color-scheme', scheme, setItemInEdit, saveTimeout )
+		doAction( 'stackable.global-settings.global-color-schemes.custom-color-schemes.add-color-scheme', scheme, setItemInEdit, cachedCss, saveTimeout )
 	}
 
 	// For sorting custom color schemes
@@ -137,7 +140,7 @@ const ColorSchemePicker = props => {
 		clearTimeout( saveTimeout )
 
 		// If the color scheme being edited is a custom color scheme, customUpdate will return true
-		const customUpdate = applyFilters( 'stackable.global-settings.global-color-schemes.update-color-schemes', false, currentItem, saveTimeout )
+		const customUpdate = applyFilters( 'stackable.global-settings.global-color-schemes.update-color-schemes', false, currentItem, cachedCss, saveTimeout )
 
 		if ( ! customUpdate ) {
 			// Do this only when the color scheme being edited is the default/fixed color schemes (the first two color schemes)
@@ -146,12 +149,17 @@ const ColorSchemePicker = props => {
 			updatedColorSchemes[ currentIndex ] = currentItem
 
 			saveTimeout = setTimeout( () => {
-				const settings = new models.Settings( { stackable_global_color_schemes: updatedColorSchemes } ) // eslint-disable-line camelcase
+				const settings = new models.Settings( {
+					stackable_global_color_schemes: updatedColorSchemes, // eslint-disable-line camelcase
+					// Clear the cached CSS when the color scheme is updated
+					...( cachedCss ? { stackable_global_color_scheme_generated_css: '' } : {} ), // eslint-disable-line camelcase
+				} )
 				settings.save()
 			}, 300 )
 
 			// Update our store.
 			dispatch( 'stackable/global-color-schemes' ).updateColorSchemes( updatedColorSchemes )
+			dispatch( 'stackable/global-color-schemes' ).updateSettings( { cachedCss: '' } )
 		}
 	}
 
@@ -255,7 +263,7 @@ const ColorSchemePicker = props => {
 
 	const onDeleteItem = item => {
 		// If the color scheme to be deleted is a custom color scheme, customDelete will return true
-		const customDelete = applyFilters( 'stackable.global-settings.global-color-schemes.delete-color-scheme', false, item, setItemInEdit, saveTimeout )
+		const customDelete = applyFilters( 'stackable.global-settings.global-color-schemes.delete-color-scheme', false, item, setItemInEdit, cachedCss, saveTimeout )
 
 		if ( ! customDelete ) {
 			// Do not delete if it is not a custom color scheme, reset it to the default value instead.

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

@@ -120,6 +120,18 @@ public function register_color_schemes() {
 					'default' => '',
 				)
 			);
+
+			register_setting(
+				'stackable_global_settings',
+				'stackable_global_color_scheme_generated_css',
+				array(
+					'type' => 'string',
+					'description' => __( 'Stackable Global Color Scheme Generated CSS', STACKABLE_I18N ),
+					'sanitize_callback' => 'sanitize_text_field',
+					'show_in_rest' => true,
+					'default' => '',
+				)
+			);
 		}
 
 		// Make this function static so it can be used when
@@ -178,6 +190,15 @@ public static function get_color_scheme_properties( $values = null ) {
 		 * @return String
 		 */
 		public function add_global_color_schemes_styles( $current_css ) {
+			$cached_color_scheme_css = get_option( 'stackable_global_color_scheme_generated_css' );
+
+			// If there is cached CSS, use it
+			if ( $cached_color_scheme_css ) {
+				$current_css .= $cached_color_scheme_css;
+				return apply_filters( 'stackable_frontend_css' , $current_css );
+			}
+
+			// Generate the CSS for the color schemes if there is no cached CSS
 			$schemes_array = is_array( get_option( 'stackable_global_color_schemes' ) ) ? get_option( 'stackable_global_color_schemes' ) : [];
 
 			// Get all color schemes, including custom color schemes if any
@@ -251,10 +272,11 @@ public function add_global_color_schemes_styles( $current_css ) {
 				$styles = $this->generate_color_scheme_styles( $styles, $scheme );
 			}
 
+			$color_scheme_css = '';
 			$generated_css = wp_style_engine_get_stylesheet_from_css_rules( $styles );
 			if ( $generated_css != '' ) {
-				$current_css .= "\n/* Global Color Schemes */\n";
-				$current_css .= $generated_css;
+				$color_scheme_css .= "\n/* Global Color Schemes */\n";
+				$color_scheme_css .= $generated_css;
 			}
 
 			foreach( $block_color_schemes as $mode => $block_schemes ) {
@@ -263,12 +285,15 @@ public function add_global_color_schemes_styles( $current_css ) {
 					$generated_css = wp_style_engine_get_stylesheet_from_css_rules( $styles );
 					if ( $generated_css != '' ) {
 						$scheme_key = $scheme[ 'key' ];
-						$current_css .= "\n/* Global Color Schemes ($mode-$scheme_key) */\n";
-						$current_css .= $generated_css;
+						$color_scheme_css .= "\n/* Global Color Schemes ($mode-$scheme_key) */\n";
+						$color_scheme_css .= $generated_css;
 					}
 				}
 			}
+			// Add the generated CSS to the database
+			update_option( 'stackable_global_color_scheme_generated_css', $color_scheme_css );
 
+			$current_css .= $color_scheme_css;
 			return apply_filters( 'stackable_frontend_css' , $current_css );
 		}
 

src/plugins/global-settings/color-schemes/store.js

@@ -18,6 +18,7 @@ const DEFAULT_STATE = {
 	baseColorScheme: '',
 	backgroundModeColorScheme: '',
 	containerModeColorScheme: '',
+	cachedCss: '',
 }
 
 const STORE_ACTIONS = {
@@ -75,6 +76,7 @@ domReady( () => {
 			stackable_global_base_color_scheme: baseColorScheme,
 			stackable_global_background_mode_color_scheme: backgroundModeColorScheme,
 			stackable_global_container_mode_color_scheme: containerModeColorScheme,
+			stackable_global_color_scheme_generated_css: cachedCss,
 		} = response
 
 		const colorSchemes = Array.isArray( _colorSchemes ) && _colorSchemes.length > 0 ? _colorSchemes : [ {
@@ -113,6 +115,7 @@ domReady( () => {
 			baseColorScheme,
 			backgroundModeColorScheme,
 			containerModeColorScheme,
+			cachedCss,
 		}
 
 		dispatch( 'stackable/global-color-schemes' ).updateSettings( settings )