Convert theme color slugs to CSS variables instead of resolving to hex

inc/class-base-css.php

@@ -202,6 +202,54 @@ public static function hex2rgba( $color, $opacity = false ) {
 		return $output;
 	}
 
+	/**
+	 * Convert a color slug to a CSS variable reference.
+	 * WordPress generates CSS variables in the format: --wp--preset--color--{slug}
+	 *
+	 * @param string|null $slug The color slug.
+	 * @return string|null The CSS variable reference.
+	 * @since   3.1.5
+	 * @access  public
+	 */
+	public static function get_color_css_variable( $slug ) {
+		if ( empty( $slug ) ) {
+			return $slug;
+		}
+
+		// If it's already a color value or CSS variable, return as-is.
+		if (
+			strpos( $slug, '#' ) === 0 ||
+			strpos( $slug, 'rgb' ) === 0 ||
+			strpos( $slug, 'hsl' ) === 0 ||
+			strpos( $slug, 'var(' ) === 0
+		) {
+			return $slug;
+		}
+
+		// Sanitize slug: WordPress slugs should only contain lowercase alphanumeric, hyphens, and underscores.
+		// This prevents potential CSS injection if slug comes from untrusted sources.
+		$sanitized_slug = strtolower( preg_replace( '/[^a-z0-9-_]/', '', $slug ) );
+
+		// Convert slug to CSS variable.
+		return 'var(--wp--preset--color--' . $sanitized_slug . ')';
+	}
+
+	/**
+	 * Resolve a color value which may be a slug from the theme color palette.
+	 * This function converts slugs to CSS variables to preserve the connection to theme.json.
+	 * If the value is a slug, it returns a CSS variable reference.
+	 * Otherwise, returns the value as-is (for hex, rgb, hsl values).
+	 *
+	 * @param string|null $value The color value or slug.
+	 * @return string|null The CSS variable or color value.
+	 * @since   3.1.5
+	 * @access  public
+	 */
+	public static function resolve_color_value( $value ) {
+		// Use CSS variable conversion for slugs.
+		return self::get_color_css_variable( $value );
+	}
+
 	/**
 	 * Get Blocks CSS
 	 *

inc/css/blocks/class-advanced-column-css.php

@@ -188,6 +188,9 @@ function ( $value ) use ( $block ) {
 						array(
 							'property' => '--background-color-hover',
 							'value'    => 'backgroundColorHover',
+							'format'   => function ( $value ) {
+								return Base_CSS::resolve_color_value( $value );
+							},
 						),
 						array(
 							'property' => 'align-self',

inc/css/blocks/class-advanced-heading-css.php

@@ -44,10 +44,16 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'headingColor',
+						'format'   => function ( $value, $attrs ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => 'background',
 						'value'    => 'backgroundColor',
+						'format'   => function ( $value, $attrs ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => 'font-family',
@@ -225,10 +231,16 @@ public function render_css( $block ) {
 			array(
 				'property' => 'color',
 				'value'    => 'highlightColor',
+				'format'   => function ( $value, $attrs ) {
+					return Base_CSS::resolve_color_value( $value );
+				},
 			),
 			array(
 				'property' => 'background',
 				'value'    => 'highlightBackground',
+				'format'   => function ( $value, $attrs ) {
+					return Base_CSS::resolve_color_value( $value );
+				},
 			),
 		);
 
@@ -537,6 +549,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'linkColor',
+						'format'   => function ( $value, $attrs ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 				),
 			)
@@ -549,6 +564,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'linkHoverColor',
+						'format'   => function ( $value, $attrs ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 				),
 			)

inc/css/blocks/class-button-css.php

@@ -135,11 +135,17 @@ public function render_css( $block ) {
 						'property' => 'color',
 						'value'    => 'color',
 						'hasSync'  => 'gr-btn-color',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => 'background',
 						'value'    => 'background',
 						'hasSync'  => 'gr-btn-background',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => 'background',
@@ -150,6 +156,9 @@ public function render_css( $block ) {
 						'property' => 'border-color',
 						'value'    => 'border',
 						'hasSync'  => 'gr-btn-border-color',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property'       => 'box-shadow',
@@ -201,11 +210,17 @@ public function render_css( $block ) {
 						'property' => 'color',
 						'value'    => 'hoverColor',
 						'hasSync'  => 'gr-btn-color-hover',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => 'background',
 						'value'    => 'hoverBackground',
 						'hasSync'  => 'gr-btn-background-hover',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => 'background',
@@ -216,6 +231,9 @@ public function render_css( $block ) {
 						'property' => 'border-color',
 						'value'    => 'hoverBorder',
 						'hasSync'  => 'gr-btn-border-color-hover',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property'       => 'box-shadow',
@@ -298,10 +316,16 @@ public function render_global_css() {
 					array(
 						'property' => '--gr-btn-color',
 						'value'    => 'color',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => '--gr-btn-background',
 						'value'    => 'background',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => '--gr-btn-background',
@@ -336,6 +360,9 @@ public function render_global_css() {
 					array(
 						'property'  => '--gr-btn-border-color',
 						'value'     => 'border',
+						'format'    => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 						'condition' => function ( $attrs ) {
 							return isset( $attrs['border'] ) && ! empty( $attrs['border'] );
 						},
@@ -421,10 +448,16 @@ public function render_global_css() {
 					array(
 						'property' => '--gr-btn-color-hover',
 						'value'    => 'hoverColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => '--gr-btn-background-hover',
 						'value'    => 'hoverBackground',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => '--gr-btn-background-hover',
@@ -433,6 +466,9 @@ public function render_global_css() {
 					array(
 						'property' => '--gr-btn-border-color-hover',
 						'value'    => 'hoverBorder',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property'       => '--gr-btn-shadow-hover',

inc/css/blocks/class-circle-counter-css.php

@@ -67,10 +67,10 @@ public function render_css( $block ) {
 							$percentage = isset( $attrs['percentage'] ) ? $attrs['percentage'] : 50;
 
 							if ( 50 > $percentage ) {
-								return isset( $attrs['progressColor'] ) ? $attrs['progressColor'] : '#3878ff';
+								return isset( $attrs['progressColor'] ) ? Base_CSS::resolve_color_value( $attrs['progressColor'] ) : '#3878ff';
 							}
 
-							return $value;
+							return Base_CSS::resolve_color_value( $value );
 						},
 					),
 					array(
@@ -80,10 +80,10 @@ public function render_css( $block ) {
 							$percentage = isset( $attrs['percentage'] ) ? $attrs['percentage'] : 50;
 
 							if ( 50 > $percentage ) {
-								return isset( $attrs['backgroundColor'] ) ? $attrs['backgroundColor'] : '#4682b426';
+								return isset( $attrs['backgroundColor'] ) ? Base_CSS::resolve_color_value( $attrs['backgroundColor'] ) : '#4682b426';
 							}
 
-							return $value;
+							return Base_CSS::resolve_color_value( $value );
 						},
 					),
 					array(
@@ -132,6 +132,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'titleColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 				),
 			)
@@ -144,6 +147,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'progressColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 				),
 			)

inc/css/blocks/class-countdown-css.php

@@ -78,10 +78,16 @@ public function render_css( $block ) {
 					array(
 						'property' => '--background-color',
 						'value'    => 'backgroundColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => '--border-color',
 						'value'    => 'borderColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => '--border-style',
@@ -279,6 +285,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'valueColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 				),
 			)
@@ -291,6 +300,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'labelColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 				),
 			)
@@ -303,6 +315,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'separatorColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 				),
 			)

inc/css/blocks/class-flip-css.php

@@ -96,6 +96,9 @@ public function render_css( $block ) {
 					array(
 						'property' => '--border-color',
 						'value'    => 'borderColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property'  => '--border-width',
@@ -136,6 +139,9 @@ public function render_css( $block ) {
 					array(
 						'property'  => '--front-background',
 						'value'     => 'frontBackgroundColor',
+						'format'    => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 						'condition' => function ( $attrs ) {
 							return ! isset( $attrs['frontBackgroundType'] );
 						},
@@ -198,6 +204,9 @@ public function render_css( $block ) {
 					array(
 						'property'  => '--back-background',
 						'value'     => 'backBackgroundColor',
+						'format'    => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 						'condition' => function ( $attrs ) {
 							return ! isset( $attrs['backBackgroundType'] );
 						},
@@ -373,6 +382,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'titleColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => 'font-size',
@@ -392,6 +404,9 @@ public function render_css( $block ) {
 					array(
 						'property' => 'color',
 						'value'    => 'descriptionColor',
+						'format'   => function ( $value ) {
+							return Base_CSS::resolve_color_value( $value );
+						},
 					),
 					array(
 						'property' => 'font-size',