← All changes
|
modules/atomic-widgets/css-converter/variable-prop-value-transformer.php
+66
-1
4.2.1
→
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 ) ) { |