← All changes | modules/atomic-widgets/styles/styles-renderer.php +9 -33 4.1.0-dev2 → 3.30.1 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;
		@@ -113,22 +110,18 @@
113	110	return null;
114	111	}
115	112
116	113	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 );
	114	+ $css = $this->props_to_css_string( $variant['props'] );
119	115
120		- if ( ! $css && ! $custom_css ) {
	116	+ if ( ! $css ) {
121	117	return '';
122	118	}
123	119
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		- }
	120	+ $state = isset( $variant['meta']['state'] ) ? ':' . $variant['meta']['state'] : '';
	121	+ $selector = $base_selector . $state;
129	122
130		- $style_declaration = $selector . '{' . $css . $custom_css . '}';
	123	+ $style_declaration = $selector . '{' . $css . '}';
131	124
132	125	if ( isset( $variant['meta']['breakpoint'] ) ) {
133	126	$style_declaration = $this->wrap_with_media_query( $variant['meta']['breakpoint'], $style_declaration );
134	127	}
		@@ -135,9 +128,8 @@
135	128
136	129	return $style_declaration;
137	130	}
138	131
139		-
140	132	private function props_to_css_string( array $props ): string {
141	133	$schema = Style_Schema::get();
142	134
143	135	return Collection::make( Render_Props_Resolver::for_styles()->resolve( $schema, $props ) )
		@@ -151,14 +143,8 @@
151	143	} )
152	144	->implode( '' );
153	145	}
154	146
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	147	private function wrap_with_media_query( string $breakpoint_id, string $css ): string {
162	148	if ( ! isset( $this->breakpoints[ $breakpoint_id ] ) ) {
163	149	return $css;
164	150	}
		@@ -167,24 +153,14 @@
167	153	if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
168	154	return '';
169	155	}
170	156
171		- $query = $this->get_media_query( $this->breakpoints[ $breakpoint_id ] );
	157	+ $size = $this->get_breakpoint_size( $this->breakpoints[ $breakpoint_id ] );
172	158
173		- return $query ? $query . '{' . $css . '}' : $css;
	159	+ return $size ? '@media(' . $size . '){' . $css . '}' : $css;
174	160	}
175	161
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 {
	162	+ private function get_breakpoint_size( array $breakpoint ): ?string {
187	163	$bound = 'min' === $breakpoint['direction'] ? 'min-width' : 'max-width';
188	164	$width = $breakpoint['value'] . 'px';
189	165
190	166	return "{$bound}:{$width}";