← All changes | modules/atomic-widgets/styles/styles-renderer.php +13 -58 4.2.4 → 3.31.4 View file →

		@@ -2,15 +2,9 @@
2	2
3	3	namespace Elementor\Modules\AtomicWidgets\Styles;
4	4
5	5	use Elementor\Core\Utils\Collection;
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	6	use Elementor\Modules\AtomicWidgets\PropsResolver\Render_Props_Resolver;
11		-use Elementor\Plugin;
12		-use Elementor\Utils;
13	7
14	8	class Styles_Renderer {
15	9	const DEFAULT_SELECTOR_PREFIX = '.elementor';
16	10
		@@ -18,15 +12,15 @@
18	12	* @var array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}>
19	13	*/
20	14	private array $breakpoints;
21	15
22		- private $on_font_enqueue;
	16	+ private $on_prop_transform;
23	17
24	18	private string $selector_prefix;
25	19
26	20	/**
27	21	* @param array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}> $breakpoints
28		- * @param string $selector_prefix
	22	+ * @param string $selector_prefix
29	23	*/
30	24	private function __construct( array $breakpoints, string $selector_prefix = self::DEFAULT_SELECTOR_PREFIX ) {
31	25	$this->breakpoints = $breakpoints;
32	26	$this->selector_prefix = $selector_prefix;
		@@ -64,10 +58,10 @@
64	58
65	59	return implode( '', $css_style );
66	60	}
67	61
68		- public function on_font_enqueue( callable $callback ): self {
69		- $this->on_font_enqueue = $callback;
	62	+ public function on_prop_transform( callable $callback ): self {
	63	+ $this->on_prop_transform = $callback;
70	64
71	65	return $this;
72	66	}
73	67
		@@ -116,22 +110,18 @@
116	110	return null;
117	111	}
118	112
119	113	private function variant_to_css_string( string $base_selector, array $variant ): string {
120		- $css = $this->props_to_css_string( $variant['props'] ) ?? '';
121		- $custom_css = $this->custom_css_to_css_string( $variant['custom_css'] ?? null );
	114	+ $css = $this->props_to_css_string( $variant['props'] );
122	115
123		- if ( ! $css && ! $custom_css ) {
	116	+ if ( ! $css ) {
124	117	return '';
125	118	}
126	119
127		- if ( isset( $variant['meta']['state'] ) ) {
128		- $selector = Style_States::get_selector_with_state( $base_selector, $variant['meta']['state'] );
129		- } else {
130		- $selector = $base_selector;
131		- }
	120	+ $state = isset( $variant['meta']['state'] ) ? ':' . $variant['meta']['state'] : '';
	121	+ $selector = $base_selector . $state;
132	122
133		- $style_declaration = $selector . '{' . $css . $custom_css . '}';
	123	+ $style_declaration = $selector . '{' . $css . '}';
134	124
135	125	if ( isset( $variant['meta']['breakpoint'] ) ) {
136	126	$style_declaration = $this->wrap_with_media_query( $variant['meta']['breakpoint'], $style_declaration );
137	127	}
		@@ -138,56 +128,21 @@
138	128
139	129	return $style_declaration;
140	130	}
141	131
142		-
143	132	private function props_to_css_string( array $props ): string {
144	133	$schema = Style_Schema::get();
145	134
146	135	return Collection::make( Render_Props_Resolver::for_styles()->resolve( $schema, $props ) )
147	136	->filter()
148		- ->map( function ( $value, $prop ) use ( $props, $schema ) {
149		- $this->maybe_enqueue_font( $schema, $prop, $props[ $prop ] ?? null );
	137	+ ->map( function ( $value, $prop ) {
	138	+ if ( $this->on_prop_transform ) {
	139	+ call_user_func( $this->on_prop_transform, $prop, $value );
	140	+ }
150	141
151	142	return $prop . ':' . $value . ';';
152	143	} )
153	144	->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		- }
185		-
186		- private function custom_css_to_css_string( ?array $custom_css ): string {
187		- return ! empty( $custom_css['raw'] )
188		- ? Utils::decode_string( $custom_css['raw'], '' ) . '\n'
189		- : '';
190	145	}
191	146
192	147	private function wrap_with_media_query( string $breakpoint_id, string $css ): string {
193	148	if ( ! isset( $this->breakpoints[ $breakpoint_id ] ) ) {