← All changes | modules/atomic-widgets/styles/styles-renderer.php +24 -105 4.2.4 → 3.27.4 View file →

		@@ -2,57 +2,43 @@
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		-use Elementor\Modules\AtomicWidgets\PropsResolver\Render_Props_Resolver;
11		-use Elementor\Plugin;
12		-use Elementor\Utils;
	6	+use Elementor\Modules\AtomicWidgets\PropsResolver\Props_Resolver;
13	7
14	8	class Styles_Renderer {
15		- const DEFAULT_SELECTOR_PREFIX = '.elementor';
16		-
17	9	/**
18		- * @var array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}>
	10	+ * @var array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}> $breakpoints
19	11	*/
20	12	private array $breakpoints;
21	13
22		- private $on_font_enqueue;
23		-
24		- private string $selector_prefix;
25		-
26	14	/**
27		- * @param array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}> $breakpoints
28		- * @param string $selector_prefix
	15	+ * Styles_Renderer constructor.
	16	+ *
	17	+ * @param array{
	18	+ * breakpoints: array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}>
	19	+ * } $config
29	20	*/
30		- private function __construct( array $breakpoints, string $selector_prefix = self::DEFAULT_SELECTOR_PREFIX ) {
31		- $this->breakpoints = $breakpoints;
32		- $this->selector_prefix = $selector_prefix;
	21	+ public function __construct( array $config ) {
	22	+ $this->breakpoints = $config['breakpoints'];
33	23	}
34	24
35		- public static function make( array $breakpoints, string $selector_prefix = self::DEFAULT_SELECTOR_PREFIX ): self {
36		- return new self( $breakpoints, $selector_prefix );
	25	+ public static function make( array $config ): self {
	26	+ return new self( $config );
37	27	}
38	28
39	29	/**
40	30	* Render the styles to a CSS string.
41	31	*
42		- * Styles format:
43		- * array<int, array{
	32	+ * @param array<int, array{
44	33	* id: string,
45	34	* type: string,
46		- * cssName: string | null,
47	35	* variants: array<int, array{
48	36	* props: array<string, mixed>,
49	37	* meta: array<string, mixed>
50	38	* }>
51		- * }>
	39	+ * }> $styles Array of style definitions.
52	40	*
53		- * @param array $styles Array of style definitions.
54		- *
55	41	* @return string Rendered CSS string.
56	42	*/
57	43	public function render( array $styles ): string {
58	44	$css_style = [];
		@@ -64,14 +50,8 @@
64	50
65	51	return implode( '', $css_style );
66	52	}
67	53
68		- public function on_font_enqueue( callable $callback ): self {
69		- $this->on_font_enqueue = $callback;
70		-
71		- return $this;
72		- }
73		-
74	54	private function style_definition_to_css_string( array $style ): string {
75	55	$base_selector = $this->get_base_selector( $style );
76	56
77	57	if ( ! $base_selector ) {
		@@ -101,17 +81,9 @@
101	81	isset( $style_def['id'] ) &&
102	82	isset( $map[ $style_def['type'] ] ) &&
103	83	$style_def['id']
104	84	) {
105		- $type = $map[ $style_def['type'] ];
106		- $name = $style_def['cssName'] ?? $style_def['id'];
107		-
108		- $selector_parts = array_filter( [
109		- $this->selector_prefix,
110		- "{$type}{$name}",
111		- ] );
112		-
113		- return implode( ' ', $selector_parts );
	85	+ return $map[ $style_def['type'] ] . $style_def['id'];
114	86	}
115	87
116	88	return null;
117	89	}
		@@ -116,22 +88,18 @@
116	88	return null;
117	89	}
118	90
119	91	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 );
	92	+ $css = $this->props_to_css_string( $variant['props'] );
122	93
123		- if ( ! $css && ! $custom_css ) {
	94	+ if ( ! $css ) {
124	95	return '';
125	96	}
126	97
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		- }
	98	+ $state = isset( $variant['meta']['state'] ) ? ':' . $variant['meta']['state'] : '';
	99	+ $selector = $base_selector . $state;
132	100
133		- $style_declaration = $selector . '{' . $css . $custom_css . '}';
	101	+ $style_declaration = $selector . '{' . $css . '}';
134	102
135	103	if ( isset( $variant['meta']['breakpoint'] ) ) {
136	104	$style_declaration = $this->wrap_with_media_query( $variant['meta']['breakpoint'], $style_declaration );
137	105	}
		@@ -138,58 +106,19 @@
138	106
139	107	return $style_declaration;
140	108	}
141	109
142		-
143	110	private function props_to_css_string( array $props ): string {
144	111	$schema = Style_Schema::get();
145	112
146		- return Collection::make( Render_Props_Resolver::for_styles()->resolve( $schema, $props ) )
	113	+ return Collection::make( Props_Resolver::for_styles()->resolve( $schema, $props ) )
147	114	->filter()
148		- ->map( function ( $value, $prop ) use ( $props, $schema ) {
149		- $this->maybe_enqueue_font( $schema, $prop, $props[ $prop ] ?? null );
150		-
	115	+ ->map( function ( $value, $prop ) {
151	116	return $prop . ':' . $value . ';';
152	117	} )
153	118	->implode( '' );
154	119	}
155	120
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		- }
191		-
192	121	private function wrap_with_media_query( string $breakpoint_id, string $css ): string {
193	122	if ( ! isset( $this->breakpoints[ $breakpoint_id ] ) ) {
194	123	return $css;
195	124	}
		@@ -198,24 +127,14 @@
198	127	if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
199	128	return '';
200	129	}
201	130
202		- $query = $this->get_media_query( $this->breakpoints[ $breakpoint_id ] );
	131	+ $size = $this->get_breakpoint_size( $this->breakpoints[ $breakpoint_id ] );
203	132
204		- return $query ? $query . '{' . $css . '}' : $css;
	133	+ return $size ? '@media(' . $size . '){' . $css . '}' : $css;
205	134	}
206	135
207		- public static function get_media_query( $breakpoint ): ?string {
208		- if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
209		- return null;
210		- }
211		-
212		- $size = self::get_breakpoint_size( $breakpoint );
213		-
214		- return $size ? '@media(' . $size . ')' : null;
215		- }
216		-
217		- private static function get_breakpoint_size( array $breakpoint ): ?string {
	136	+ private function get_breakpoint_size( array $breakpoint ): ?string {
218	137	$bound = 'min' === $breakpoint['direction'] ? 'min-width' : 'max-width';
219	138	$width = $breakpoint['value'] . 'px';
220	139
221	140	return "{$bound}:{$width}";