feat: generate global css for presets

Author: Arukuen

plugin.php

@@ -230,6 +230,7 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/dynamic-breakpoints.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/design-library/init.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/global-settings.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/preset-controls/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );

src/plugins/global-settings/preset-controls/index.php

@@ -0,0 +1,95 @@
+<?php
+/**
+ * Size and Spacing Preset Controls
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! class_exists( 'Stackable_Size_And_Spacing_Preset_Controls' ) ) {
+
+	/**
+	 * Size and Spacing Preset Controls
+	 */
+    class Stackable_Size_And_Spacing_Preset_Controls {
+
+		public $stackable_presets;
+		public $theme_presets;
+
+		/**
+		 * Initialize
+		 */
+  		function __construct() {
+			$this->stackable_presets = $this->load_presets( __DIR__ . '/presets.json');
+			$this->theme_presets = $this->load_presets( get_template_directory() . '/theme.json' );
+			// Register our settings.
+			// add_action( 'register_stackable_global_settings', array( $this, 'register_preset_controls' ) );
+
+			add_filter( 'stackable_inline_styles_nodep', array( $this, 'add_preset_controls_styles' ) );
+		}
+
+		/**
+		 * Register the settings we need for preset controls
+		 *
+		 * @return void
+		 */
+		// public function register_preset_controls() {
+			
+		// }
+
+		public function sanitize_array_setting( $input ) {
+			return ! is_array( $input ) ? array( array() ) : $input;
+		}
+
+		private function load_presets( $json_path ) {
+			if ( file_exists( $json_path ) ) {
+				$json_data = file_get_contents( $json_path );
+				$decoded_data = json_decode( $json_data, true );
+				return $decoded_data[ 'settings' ] ?? [];
+			}
+			return [];
+		}
+
+		// Generate CSS variables based on preset type (e.g., fontSizes, spacing)
+		public function generate_css_variables( $presets, $prefix ) {
+			$css = "";
+			foreach ( $presets as $preset ) {
+				$slug = $preset[ 'slug' ];
+				$size = $preset[ 'size' ];
+				$css .= "--stk--preset--$prefix--$slug: $size;\n";
+			}
+	
+			return $css;
+		}
+
+		/**
+		 * Add our global preset control styles.
+		 *
+		 * @param String $current_css
+		 * @return String
+		 */
+		public function add_preset_controls_styles( $current_css ) {
+			$presets = $this->stackable_presets;
+			
+			if ( isset ( $this->theme_presets ) ) {
+				$presets = $this->theme_presets;
+			}
+	
+			$generated_css = ":root {\n";
+			$generated_css .= $this->generate_css_variables( $presets[ 'spacing' ][ 'spacingSizes' ], 'spacing' );
+			$generated_css .= $this->generate_css_variables( $presets[ 'typography' ][ 'fontSizes' ], 'font-size' );
+			$generated_css .= "}\n";
+
+			if ( ! $generated_css ) {
+				return $current_css;
+			}
+	
+			$current_css .= $generated_css;
+			return apply_filters( 'stackable_frontend_css' , $current_css );
+		}
+	}
+
+	new Stackable_Size_And_Spacing_Preset_Controls();
+}

src/plugins/global-settings/preset-controls/presets.json

@@ -0,0 +1,97 @@
+{   
+   "settings": {
+        "spacing": {
+			"spacingSizes": [
+                {
+                  "label": "XS",
+                  "size": "0.25rem",
+                  "slug": "x-small"
+                },
+                {
+                  "label": "S",
+                  "size": "0.5rem",
+                  "slug": "small"
+                },
+                {
+                  "label": "M",
+                  "size": "1rem",
+                  "slug": "medium"
+                },
+                {
+                  "label": "L",
+                  "size": "1.5rem",
+                  "slug": "large"
+                },
+                {
+                  "label": "XL",
+                  "size": "2rem",
+                  "slug": "x-large"
+                },
+                {
+                  "label": "2XL",
+                  "size": "3rem",
+                  "slug": "xx-large"
+                },
+                {
+                  "label": "3XL",
+                  "size": "4rem",
+                  "slug": "xxx-large"
+                },
+                {
+                  "label": "4XL",
+                  "size": "6rem",
+                  "slug": "xxxx-large"
+                }
+            ] 
+        },
+        "typography": {
+			"fontSizes": [
+                {
+                    "label": "XS",
+                    "size": "0.75rem",
+                    "slug": "x-small"
+                },
+                {
+                    "label": "S",
+                    "size": "0.875rem",
+                    "slug": "small"
+                },
+                {
+                    "label": "M",
+                    "size": "1rem",
+                    "slug": "medium"
+                },
+                {
+                    "label": "L",
+                    "size": "1.125rem",
+                    "slug": "large"
+                },
+                {
+                    "label": "XL",
+                    "size": "1.5rem",
+                    "slug": "x-large"
+                },
+                {
+                    "label": "2XL",
+                    "size": "2rem",
+                    "slug": "xx-large"
+                },
+                {
+                    "label": "3XL",
+                    "size": "2.5rem",
+                    "slug": "xxx-large"
+                },
+                {
+                    "label": "4XL",
+                    "size": "3rem",
+                    "slug": "xxxx-large"
+                },
+                {
+                    "label": "5XL",
+                    "size": "4rem",
+                    "slug": "xxxxx-large"
+                }
+            ]
+        }
+   }
+}