← All changes | modules/atomic-widgets/css-converter/variable-prop-value-transformer.php +66 -1 4.2.0-beta1 → 4.3.1 View file →

		@@ -4,12 +4,16 @@
4	4
5	5	use Elementor\Modules\AtomicWidgets\CssConverter\Converter_Registry_Factory;
6	6	use Elementor\Modules\AtomicWidgets\PropTypes\Base\Array_Prop_Type;
7	7	use Elementor\Modules\AtomicWidgets\PropTypes\Base\Object_Prop_Type;
	8	+use Elementor\Modules\AtomicWidgets\PropTypes\Color_Prop_Type;
8	9	use Elementor\Modules\AtomicWidgets\PropTypes\Contracts\Prop_Type;
	10	+use Elementor\Modules\AtomicWidgets\PropTypes\Font_Family_Prop_Type;
	11	+use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
9	12	use Elementor\Modules\AtomicWidgets\PropTypes\Union_Prop_Type;
10	13	use Elementor\Modules\AtomicWidgets\Styles\Size_Constants;
11	14	use Elementor\Modules\Variables\Adapters\Prop_Type_Adapter;
	15	+use Elementor\Modules\Variables\PropTypes\Color_Variable_Prop_Type;
12	16	use Elementor\Modules\Variables\PropTypes\Size_Variable_Prop_Type;
13	17	use Elementor\Modules\Variables\Services\Variables_Service;
14	18	use Elementor\Modules\Variables\Utils\Variable_Type_Keys;
15	19
		@@ -24,8 +28,63 @@
24	28	$this->variables_service = $variables_service;
25	29	}
26	30
27	31	/**
	32	+ * Resolves global-color-variable references inside gradient color stops to their actual color values.
	33	+ * Variables cannot be used inside gradient stops because the gradient UI control does not support them.
	34	+ * If a variable cannot be resolved, the entire background prop is ejected to custom CSS.
	35	+ *
	36	+ * @param array $props Mutated in place.
	37	+ * @param array<int, array{property: string, value: string, declaration: string}> $rules
	38	+ * @return string[] Extra custom CSS declarations produced by ejected props.
	39	+ */
	40	+ public function normalize_gradient_color_stops( array &$props, array $rules ): array {
	41	+ $background = $props['background'] ?? null;
	42	+
	43	+ if ( ! is_array( $background ) || 'background' !== ( $background['$$type'] ?? null ) ) {
	44	+ return [];
	45	+ }
	46	+
	47	+ $overlays = $background['value']['background-overlay']['value'] ?? null;
	48	+
	49	+ if ( ! is_array( $overlays ) ) {
	50	+ return [];
	51	+ }
	52	+
	53	+ foreach ( $overlays as $i => $overlay ) {
	54	+ if ( 'background-gradient-overlay' !== ( $overlay['$$type'] ?? null ) ) {
	55	+ continue;
	56	+ }
	57	+
	58	+ $stops = $overlay['value']['stops']['value'] ?? [];
	59	+
	60	+ foreach ( $stops as $j => $stop ) {
	61	+ if ( 'color-stop' !== ( $stop['$$type'] ?? null ) ) {
	62	+ continue;
	63	+ }
	64	+
	65	+ $color = $stop['value']['color'] ?? null;
	66	+
	67	+ if ( ! is_array( $color ) || Color_Variable_Prop_Type::get_key() !== ( $color['$$type'] ?? null ) ) {
	68	+ continue;
	69	+ }
	70	+
	71	+ $variable = $this->variables_service->find_by_label_or_id( $color['value'] ?? '' );
	72	+
	73	+ if ( null === $variable || '' === ( $variable['value'] ?? '' ) ) {
	74	+ unset( $props['background'] );
	75	+ $declaration = $this->declaration_for_ejected_prop( $rules, 'background' );
	76	+ return null !== $declaration ? [ $declaration . ';' ] : [];
	77	+ }
	78	+
	79	+ $props['background']['value']['background-overlay']['value'][ $i ]['value']['stops']['value'][ $j ]['value']['color'] = Color_Prop_Type::generate( $variable['value'] );
	80	+ }
	81	+ }
	82	+
	83	+ return [];
	84	+ }
	85	+
	86	+ /**
28	87	* @param array $props
29	88	* @param array $schema
30	89	* @param array<int, array{property: string, value: string, declaration: string}> $rules
31	90	* @return array{props: array, custom_css: string[], rejected: string[]}
		@@ -192,9 +251,15 @@
192	251	private function extract_var_reference( array $prop_value ): ?string {
193	252	$type = $prop_value['$$type'] ?? '';
194	253	$value = $prop_value['value'] ?? null;
195	254
196		- if ( in_array( $type, [ 'color', 'string' ], true ) && is_string( $value ) ) {
	255	+ $string_backed_types = [
	256	+ Color_Prop_Type::get_key(),
	257	+ String_Prop_Type::get_key(),
	258	+ Font_Family_Prop_Type::get_key(),
	259	+ ];
	260	+
	261	+ if ( in_array( $type, $string_backed_types, true ) && is_string( $value ) ) {
197	262	return Css_Var_Reference::parse( $value );
198	263	}
199	264
200	265	if ( 'size' === $type && is_array( $value ) ) {