Development

composer.json

@@ -72,7 +72,7 @@
 	},
 	"minimum-stability": "dev",
 	"require": {
-		"codeinwp/themeisle-sdk": "^3.2",
+		"codeinwp/themeisle-sdk": "^3.3",
 		"masterminds/html5": "^2.7",
 		"tubalmartin/cssmin": "^4.1",
 		"wptt/webfont-loader": "^1.1",

inc/class-base-css.php

@@ -150,8 +150,11 @@ public function get_google_fonts( $attr ) {
 					'fontfamily'  => $attr['fontFamily'],
 					'fontvariant' => ( isset( $attr['fontVariant'] ) && ! empty( $attr['fontVariant'] ) ? array( $attr['fontVariant'] ) : array() ),
 				);
-			} elseif ( ! in_array( $attr['fontVariant'], self::$google_fonts[ $attr['fontFamily'] ]['fontvariant'], true ) ) {
-					array_push( self::$google_fonts[ $attr['fontFamily'] ]['fontvariant'], ( isset( $attr['fontStyle'] ) && 'italic' === $attr['fontStyle'] ) ? $attr['fontVariant'] . ':i' : $attr['fontVariant'] );
+			} elseif ( isset( $attr['fontVariant'] ) && ! empty( $attr['fontVariant'] ) ) {
+				$font_variant = $attr['fontVariant'];
+				if ( ! in_array( $font_variant, self::$google_fonts[ $attr['fontFamily'] ]['fontvariant'], true ) ) {
+					self::$google_fonts[ $attr['fontFamily'] ]['fontvariant'][] = $font_variant;
+				}
 			}
 		}
 	}
@@ -199,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/class-main.php

@@ -599,30 +599,52 @@ public function about_page() {
 	public function add_black_friday_data( $configs ) {
 		$config = $configs['default'];
 
-		// translators: %1$s - HTML tag, %2$s - discount, %3$s - HTML tag, %4$s - product name.
-		$message_template = __( 'Our biggest sale of the year: %1$sup to %2$s OFF%3$s on %4$s. Don\'t miss this limited-time offer.', 'otter-blocks' );
-		$product_label    = 'Otter Blocks';
-		$discount         = '70%';
+		$message   = __( 'Advanced blocks, custom CSS, WooCommerce integration. Everything you need to build better pages, without code. Exclusively for existing Otter users.', 'otter-blocks' );
+		$cta_label = __( 'Get Otter Pro', 'otter-blocks' );
 
 		$plan    = apply_filters( 'product_otter_license_plan', 0 );
 		$license = apply_filters( 'product_otter_license_key', false );
-		$is_pro  = 0 < $plan;
+		$status  = apply_filters( 'product_otter_license_status', false );
+
+		$is_pro           = 'valid' === $status;
+		$is_expired       = 'expired' === $status || 'active-expired' === $status;
+		$pro_product_slug = defined( 'OTTER_PRO_BASEFILE' ) ? basename( dirname( OTTER_PRO_BASEFILE ) ) : '';
 
 		if ( $is_pro ) {
-			// translators: %1$s - HTML tag, %2$s - discount, %3$s - HTML tag, %4$s - product name.
-			$message_template = __( 'Get %1$sup to %2$s off%3$s when you upgrade your %4$s plan or renew early.', 'otter-blocks' );
-			$product_label    = 'Otter Pro';
-			$discount         = '30%';
-		}
-
-		$product_label = sprintf( '<strong>%s</strong>', $product_label );
-		$url_params    = array(
+			// translators: %s is the discount percentage.
+			$config['plugin_meta_message'] = sprintf( __( 'Black Friday Sale - up to %s off', 'otter-blocks' ), '30%' );
+			// translators: %1$s - discount, %2$s - discount.
+			$message   = sprintf( __( 'Upgrade your Otter Pro plan: %1$s off this week. Already on the plan you need? Renew early and save up to %2$s.', 'otter-blocks' ), '30%', '20%' );
+			$cta_label = __( 'See your options', 'otter-blocks' );
+		} elseif ( $is_expired ) {
+			// translators: %s is the discount percentage.
+			$config['plugin_meta_message'] = sprintf( __( 'Black Friday Sale - %s off', 'otter-blocks' ), '50%' );
+			// translators: %s is the discount percentage.
+			$config['upgrade_menu_text'] = sprintf( __( 'BF Sale - %s off', 'otter-blocks' ), '50%' );
+			$message                     = __( 'Your Otter Pro features are still here, just locked. Renew at a reduced rate this week.', 'otter-blocks' );
+			$cta_label                   = __( 'Reactivate now', 'otter-blocks' );
+		} else {
+			// translators: %s is the discount percentage.
+			$config['plugin_meta_message'] = sprintf( __( 'Black Friday Sale - %s off', 'otter-blocks' ), '60%' );
+			// translators: %s is the discount percentage.
+			$config['upgrade_menu_text'] = sprintf( __( 'BF Sale - %s off', 'otter-blocks' ), '60%' );
+			// translators: %s - discount.
+			$config['title'] = sprintf( __( 'Otter Pro: %s off this week', 'otter-blocks' ), '60%' );
+		}
+
+		$url_params = array(
 			'utm_term' => $is_pro ? 'plan-' . $plan : 'free',
 			'lkey'     => ! empty( $license ) ? $license : false,
+			'expired'  => $is_expired ? '1' : false,
 		);
-
-		$config['message']  = sprintf( $message_template, '<strong>', $discount, '</strong>', $product_label );
-		$config['sale_url'] = add_query_arg(
+
+		if ( ( $is_pro || $is_expired ) && ! empty( $pro_product_slug ) ) {
+			$config['plugin_meta_targets'] = array( $pro_product_slug );
+		}
+
+		$config['cta_label'] = $cta_label;
+		$config['message']   = $message;
+		$config['sale_url']  = add_query_arg(
 			$url_params,
 			tsdk_translate_link( tsdk_utmify( 'https://themeisle.link/otter-bf', 'bfcm', 'otter' ) )
 		);

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',