← All changes | modules/atomic-widgets/styles/styles-renderer.php +11 -36 4.1.0-dev3 → 3.29.0-beta4 View file →

		@@ -2,11 +2,8 @@
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\Plugin;
8		-use Elementor\Utils;
9	6	use Elementor\Modules\AtomicWidgets\PropsResolver\Render_Props_Resolver;
10	7
11	8	class Styles_Renderer {
12	9	const DEFAULT_SELECTOR_PREFIX = '.elementor';
		@@ -21,9 +18,9 @@
21	18	private string $selector_prefix;
22	19
23	20	/**
24	21	* @param array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}> $breakpoints
25		- * @param string $selector_prefix
	22	+ * @param string $selector_prefix
26	23	*/
27	24	private function __construct( array $breakpoints, string $selector_prefix = self::DEFAULT_SELECTOR_PREFIX ) {
28	25	$this->breakpoints = $breakpoints;
29	26	$this->selector_prefix = $selector_prefix;
		@@ -39,9 +36,8 @@
39	36	* Styles format:
40	37	* array<int, array{
41	38	* id: string,
42	39	* type: string,
43		- * cssName: string | null,
44	40	* variants: array<int, array{
45	41	* props: array<string, mixed>,
46	42	* meta: array<string, mixed>
47	43	* }>
		@@ -99,13 +95,13 @@
99	95	isset( $map[ $style_def['type'] ] ) &&
100	96	$style_def['id']
101	97	) {
102	98	$type = $map[ $style_def['type'] ];
103		- $name = $style_def['cssName'] ?? $style_def['id'];
	99	+ $id = $style_def['id'];
104	100
105	101	$selector_parts = array_filter( [
106	102	$this->selector_prefix,
107		- "{$type}{$name}",
	103	+ "{$type}{$id}",
108	104	] );
109	105
110	106	return implode( ' ', $selector_parts );
111	107	}
		@@ -113,22 +109,18 @@
113	109	return null;
114	110	}
115	111
116	112	private function variant_to_css_string( string $base_selector, array $variant ): string {
117		- $css = $this->props_to_css_string( $variant['props'] ) ?? '';
118		- $custom_css = $this->custom_css_to_css_string( $variant['custom_css'] ?? null );
	113	+ $css = $this->props_to_css_string( $variant['props'] );
119	114
120		- if ( ! $css && ! $custom_css ) {
	115	+ if ( ! $css ) {
121	116	return '';
122	117	}
123	118
124		- if ( isset( $variant['meta']['state'] ) ) {
125		- $selector = Style_States::get_selector_with_state( $base_selector, $variant['meta']['state'] );
126		- } else {
127		- $selector = $base_selector;
128		- }
	119	+ $state = isset( $variant['meta']['state'] ) ? ':' . $variant['meta']['state'] : '';
	120	+ $selector = $base_selector . $state;
129	121
130		- $style_declaration = $selector . '{' . $css . $custom_css . '}';
	122	+ $style_declaration = $selector . '{' . $css . '}';
131	123
132	124	if ( isset( $variant['meta']['breakpoint'] ) ) {
133	125	$style_declaration = $this->wrap_with_media_query( $variant['meta']['breakpoint'], $style_declaration );
134	126	}
		@@ -135,9 +127,8 @@
135	127
136	128	return $style_declaration;
137	129	}
138	130
139		-
140	131	private function props_to_css_string( array $props ): string {
141	132	$schema = Style_Schema::get();
142	133
143	134	return Collection::make( Render_Props_Resolver::for_styles()->resolve( $schema, $props ) )
		@@ -151,14 +142,8 @@
151	142	} )
152	143	->implode( '' );
153	144	}
154	145
155		- private function custom_css_to_css_string( ?array $custom_css ): string {
156		- return ! empty( $custom_css['raw'] )
157		- ? Utils::decode_string( $custom_css['raw'], '' ) . '\n'
158		- : '';
159		- }
160		-
161	146	private function wrap_with_media_query( string $breakpoint_id, string $css ): string {
162	147	if ( ! isset( $this->breakpoints[ $breakpoint_id ] ) ) {
163	148	return $css;
164	149	}
		@@ -167,24 +152,14 @@
167	152	if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
168	153	return '';
169	154	}
170	155
171		- $query = $this->get_media_query( $this->breakpoints[ $breakpoint_id ] );
	156	+ $size = $this->get_breakpoint_size( $this->breakpoints[ $breakpoint_id ] );
172	157
173		- return $query ? $query . '{' . $css . '}' : $css;
	158	+ return $size ? '@media(' . $size . '){' . $css . '}' : $css;
174	159	}
175	160
176		- public static function get_media_query( $breakpoint ): ?string {
177		- if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
178		- return null;
179		- }
180		-
181		- $size = self::get_breakpoint_size( $breakpoint );
182		-
183		- return $size ? '@media(' . $size . ')' : null;
184		- }
185		-
186		- private static function get_breakpoint_size( array $breakpoint ): ?string {
	161	+ private function get_breakpoint_size( array $breakpoint ): ?string {
187	162	$bound = 'min' === $breakpoint['direction'] ? 'min-width' : 'max-width';
188	163	$width = $breakpoint['value'] . 'px';
189	164
190	165	return "{$bound}:{$width}";