← All changes
|
modules/atomic-widgets/styles/styles-renderer.php
+25
-42
4.3.0
→
3.34.0-beta1
View file →
| @@ -3,14 +3,11 @@ | ||
| 3 | 3 | namespace Elementor\Modules\AtomicWidgets\Styles; |
| 4 | 4 | |
| 5 | 5 | use Elementor\Core\Utils\Collection; |
| 6 | 6 | use Elementor\Modules\AtomicWidgets\Module; |
| 7 | -use Elementor\Modules\AtomicWidgets\PropTypes\Contracts\Font_Enqueueable; | |
| 8 | -use Elementor\Modules\AtomicWidgets\PropTypes\Contracts\Prop_Type; | |
| 9 | -use Elementor\Modules\AtomicWidgets\PropTypes\Union_Prop_Type; | |
| 10 | -use Elementor\Modules\AtomicWidgets\PropsResolver\Render_Props_Resolver; | |
| 11 | 7 | use Elementor\Plugin; |
| 12 | 8 | use Elementor\Utils; |
| 9 | +use Elementor\Modules\AtomicWidgets\PropsResolver\Render_Props_Resolver; | |
| 13 | 10 | |
| 14 | 11 | class Styles_Renderer { |
| 15 | 12 | const DEFAULT_SELECTOR_PREFIX = '.elementor'; |
| 16 | 13 | |
| @@ -18,9 +15,9 @@ | ||
| 18 | 15 | * @var array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}> |
| 19 | 16 | */ |
| 20 | 17 | private array $breakpoints; |
| 21 | 18 | |
| 22 | - private $on_font_enqueue; | |
| 19 | + private $on_prop_transform; | |
| 23 | 20 | |
| 24 | 21 | private string $selector_prefix; |
| 25 | 22 | |
| 26 | 23 | /** |
| @@ -64,10 +61,10 @@ | ||
| 64 | 61 | |
| 65 | 62 | return implode( '', $css_style ); |
| 66 | 63 | } |
| 67 | 64 | |
| 68 | - public function on_font_enqueue( callable $callback ): self { | |
| 69 | - $this->on_font_enqueue = $callback; | |
| 65 | + public function on_prop_transform( callable $callback ): self { | |
| 66 | + $this->on_prop_transform = $callback; | |
| 70 | 67 | |
| 71 | 68 | return $this; |
| 72 | 69 | } |
| 73 | 70 | |
| @@ -123,14 +120,16 @@ | ||
| 123 | 120 | if ( ! $css && ! $custom_css ) { |
| 124 | 121 | return ''; |
| 125 | 122 | } |
| 126 | 123 | |
| 124 | + $state = ''; | |
| 125 | + | |
| 127 | 126 | if ( isset( $variant['meta']['state'] ) ) { |
| 128 | - $selector = Style_States::get_selector_with_state( $base_selector, $variant['meta']['state'] ); | |
| 129 | - } else { | |
| 130 | - $selector = $base_selector; | |
| 127 | + $state = $this->get_state_with_selector( $variant['meta']['state'] ); | |
| 131 | 128 | } |
| 132 | 129 | |
| 130 | + $selector = $base_selector . $state; | |
| 131 | + | |
| 133 | 132 | $style_declaration = $selector . '{' . $css . $custom_css . '}'; |
| 134 | 133 | |
| 135 | 134 | if ( isset( $variant['meta']['breakpoint'] ) ) { |
| 136 | 135 | $style_declaration = $this->wrap_with_media_query( $variant['meta']['breakpoint'], $style_declaration ); |
| @@ -138,50 +137,34 @@ | ||
| 138 | 137 | |
| 139 | 138 | return $style_declaration; |
| 140 | 139 | } |
| 141 | 140 | |
| 141 | + private function get_state_with_selector( string $state ): string { | |
| 142 | + if ( Style_States::is_class_state( $state ) ) { | |
| 143 | + return '.' . $state; | |
| 144 | + } | |
| 142 | 145 | |
| 146 | + if ( Style_States::is_pseudo_state( $state ) ) { | |
| 147 | + return ':' . $state; | |
| 148 | + } | |
| 149 | + | |
| 150 | + return ''; | |
| 151 | + } | |
| 152 | + | |
| 153 | + | |
| 143 | 154 | private function props_to_css_string( array $props ): string { |
| 144 | 155 | $schema = Style_Schema::get(); |
| 145 | 156 | |
| 146 | 157 | return Collection::make( Render_Props_Resolver::for_styles()->resolve( $schema, $props ) ) |
| 147 | 158 | ->filter() |
| 148 | - ->map( function ( $value, $prop ) use ( $props, $schema ) { | |
| 149 | - $this->maybe_enqueue_font( $schema, $prop, $props[ $prop ] ?? null ); | |
| 159 | + ->map( function ( $value, $prop ) { | |
| 160 | + if ( $this->on_prop_transform ) { | |
| 161 | + call_user_func( $this->on_prop_transform, $prop, $value ); | |
| 162 | + } | |
| 150 | 163 | |
| 151 | 164 | return $prop . ':' . $value . ';'; |
| 152 | 165 | } ) |
| 153 | 166 | ->implode( '' ); |
| 154 | - } | |
| 155 | - | |
| 156 | - private function maybe_enqueue_font( array $schema, string $prop_key, $prop_value ): void { | |
| 157 | - if ( ! $this->on_font_enqueue || ! is_array( $prop_value ) || empty( $prop_value['value'] ) ) { | |
| 158 | - return; | |
| 159 | - } | |
| 160 | - | |
| 161 | - $enqueueable = $this->resolve_font_enqueueable( $schema[ $prop_key ] ?? null, $prop_value ); | |
| 162 | - | |
| 163 | - if ( ! $enqueueable ) { | |
| 164 | - return; | |
| 165 | - } | |
| 166 | - | |
| 167 | - $font = $enqueueable->get_enqueue_font_family( $prop_value['value'] ); | |
| 168 | - | |
| 169 | - if ( $font ) { | |
| 170 | - call_user_func( $this->on_font_enqueue, $font ); | |
| 171 | - } | |
| 172 | - } | |
| 173 | - | |
| 174 | - private function resolve_font_enqueueable( ?Prop_Type $prop_type, array $prop_value ): ?Font_Enqueueable { | |
| 175 | - if ( $prop_type instanceof Union_Prop_Type ) { | |
| 176 | - $prop_type = $prop_type->get_prop_type( $prop_value['$$type'] ?? '' ); | |
| 177 | - } | |
| 178 | - | |
| 179 | - if ( $prop_type instanceof Font_Enqueueable ) { | |
| 180 | - return $prop_type; | |
| 181 | - } | |
| 182 | - | |
| 183 | - return null; | |
| 184 | 167 | } |
| 185 | 168 | |
| 186 | 169 | private function custom_css_to_css_string( ?array $custom_css ): string { |
| 187 | 170 | return ! empty( $custom_css['raw'] ) |