elementor / modules / atomic-widgets / styles / atomic-styles-manager.php

atomic-styles-manager.php in Elementor Website Builder – more than just a page builder 3.35.0-dev2, at modules/atomic-widgets/styles/atomic-styles-manager.php

263 lines 7.3 KB

Raw Download Zip

1	<?php
2
3	namespace Elementor\Modules\AtomicWidgets\Styles;
4
5	use Elementor\Core\Base\Document;
6	use Elementor\Core\Breakpoints\Breakpoint;
7	use Elementor\Core\Utils\Collection;
8	use Elementor\Modules\AtomicWidgets\Utils\Memo;
9	use Elementor\Modules\AtomicWidgets\Styles\CacheValidity\Cache_Validity;
10	use Elementor\Plugin;
11
12	if ( ! defined( 'ABSPATH' ) ) {
13	exit; // Exit if accessed directly.
14	}
15
16	class Atomic_Styles_Manager {
17	private static ?self $instance = null;
18
19	/**
20	* @var array<string, array{styles: callable, path: array<string>}>
21	*/
22	private array $registered_styles_by_key = [];
23
24	private Cache_Validity $cache_validity;
25
26	private array $post_ids = [];
27
28	private CSS_Files_Manager $css_files_manager;
29
30	const DEFAULT_BREAKPOINT = 'desktop';
31
32	private array $fonts = [];
33
34	public function __construct() {
35	$this->css_files_manager = new CSS_Files_Manager();
36	$this->cache_validity = new Cache_Validity();
37	}
38
39	public static function instance() {
40	if ( ! self::$instance ) {
41	self::$instance = new self();
42	}
43
44	return self::$instance;
45	}
46
47	public function register_hooks() {
48	add_action( 'elementor/frontend/after_enqueue_post_styles', fn() => $this->enqueue_styles() );
49
50	add_action( 'elementor/post/render', function( $post_id ) {
51	$this->post_ids[] = $post_id;
52	} );
53
54	add_action( 'elementor/atomic-widgets/styles/clear', fn( array $path ) => $this->clear_styles( $path ) );
55	}
56
57	public function register( array $path, callable $get_style_defs ) {
58	$key = $this->convert_path_to_handle( $path );
59
60	$this->registered_styles_by_key[ $key ] = [
61	'get_styles' => $get_style_defs,
62	'path' => $path,
63	];
64	}
65
66	private function enqueue_styles() {
67	if ( empty( $this->post_ids ) ) {
68	return;
69	}
70
71	do_action( 'elementor/atomic-widgets/styles/register', $this, $this->post_ids );
72
73	$get_styles_memo = new Memo();
74
75	$styles_by_key = Collection::make( $this->registered_styles_by_key )
76	->map_with_keys( fn ( $style_params, $style_key ) => [
77	$style_key => [
78	'get_styles' => $get_styles_memo->memoize( $style_key, $style_params['get_styles'] ),
79	'path' => $style_params['path'],
80	],
81	])
82	->all();
83
84	$this->before_render( $styles_by_key );
85
86	$this->render( $styles_by_key );
87
88	$this->after_render( $styles_by_key );
89	}
90
91	private function before_render( array $styles_by_key ) {
92	$this->fonts = [];
93
94	foreach ( $styles_by_key as $style_key => $style_params ) {
95	$path = $style_params['path'];
96
97	// This cache validity check is of the general style, and used to reset dependencies that can only be evaluated
98	// upon the style rendering flow (i.e. when cache is invalid).
99	// (the corresponding css files cache validity includes also the file's breakpoint in the cache keys array)
100	if ( ! $this->cache_validity->is_valid( $path ) ) {
101	Style_Fonts::make( $style_key )->clear();
102
103	// We should validate it after this iteration
104	$this->cache_validity->validate( $path, uniqid() );
105	}
106	}
107	}
108
109	private function render( array $styles_by_key ) {
110	$group_by_breakpoint_memo = new Memo();
111	$breakpoints = $this->get_breakpoints();
112
113	foreach ( $breakpoints as $breakpoint_key ) {
114	foreach ( $styles_by_key as $style_key => $style_params ) {
115	$path = $style_params['path'];
116	$render_css = fn() => $this->render_css_by_breakpoints( $style_params['get_styles'], $style_key, $breakpoint_key, $group_by_breakpoint_memo );
117
118	$version = $this->cache_validity->get_meta( $path );
119
120	$breakpoint_media = $this->get_breakpoint_media( $breakpoint_key );
121
122	if ( ! $breakpoint_media ) {
123	continue;
124	}
125
126	$breakpoint_path = array_merge( $path, [ $breakpoint_key ] );
127
128	$style_file = $this->css_files_manager->get(
129	$this->convert_path_to_handle( $breakpoint_path ),
130	$breakpoint_media,
131	$render_css,
132	$this->cache_validity->is_valid( $breakpoint_path )
133	);
134
135	$this->cache_validity->validate( $breakpoint_path );
136
137	if ( ! $style_file ) {
138	continue;
139	}
140
141	wp_enqueue_style(
142	$style_file->get_handle(),
143	$style_file->get_url(),
144	[],
145	$version,
146	$style_file->get_media()
147	);
148	}
149	}
150	}
151
152	private function render_css( array $styles, string $style_key ) {
153	$style_fonts = Style_Fonts::make( $style_key );
154
155	return Styles_Renderer::make(
156	Plugin::$instance->breakpoints->get_breakpoints_config()
157	)->on_prop_transform( function( $key, $value ) use ( $style_fonts ) {
158	if ( 'font-family' !== $key ) {
159	return;
160	}
161
162	$style_fonts->add( $value );
163	} )->render( $styles );
164	}
165
166	private function get_breakpoint_media( string $breakpoint_key ): ?string {
167	$breakpoint_config = Plugin::$instance->breakpoints->get_breakpoints_config()[ $breakpoint_key ] ?? null;
168
169	return $breakpoint_config ? Styles_Renderer::get_media_query( $breakpoint_config ) : 'all';
170	}
171
172	private function render_css_by_breakpoints( callable $get_styles, string $style_key, string $breakpoint_key, Memo $group_by_breakpoint_memo ) {
173	$memo_key = $style_key . '-' . $breakpoint_key;
174	$get_grouped_styles = $group_by_breakpoint_memo->memoize( $memo_key, fn() => $this->group_by_breakpoint( $get_styles() ) );
175	$grouped_styles = $get_grouped_styles();
176
177	return $this->render_css( $grouped_styles[ $breakpoint_key ] ?? [], $style_key );
178	}
179
180	private function group_by_breakpoint( $styles ) {
181	return Collection::make( $styles )->reduce( function( $group, $style ) {
182	Collection::make( $style['variants'] )->each( function( $variant ) use ( &$group, $style ) {
183	$breakpoint = $variant['meta']['breakpoint'] ?? self::DEFAULT_BREAKPOINT;
184
185	if ( ! isset( $group[ $breakpoint ][ $style['id'] ] ) ) {
186	$group[ $breakpoint ][ $style['id'] ] = [
187	'id' => $style['id'],
188	'type' => $style['type'],
189	'variants' => [],
190	];
191	}
192
193	$group[ $breakpoint ][ $style['id'] ]['variants'][] = $variant;
194	} );
195
196	return $group;
197	}, [] );
198	}
199
200	private function get_breakpoints() {
201	return Collection::make( Plugin::$instance->breakpoints->get_breakpoints() )
202	->map( fn( Breakpoint $breakpoint ) => $breakpoint->get_name() )
203	->reverse()
204	->prepend( self::DEFAULT_BREAKPOINT )
205	->all();
206	}
207
208	private function after_render( array $styles_by_key ) {
209	foreach ( $styles_by_key as $style_key => $style_params ) {
210	$this->add_fonts_to_enqueue( $style_key );
211	}
212
213	$this->enqueue_fonts();
214	}
215
216	private function add_fonts_to_enqueue( string $style_key ) {
217	$style_fonts = Style_Fonts::make( $style_key );
218
219	$this->fonts = array_unique(
220	array_merge(
221	$this->fonts,
222	array_values( $style_fonts->get() )
223	)
224	);
225	}
226
227	private function enqueue_fonts() {
228	foreach ( $this->fonts as $font ) {
229	Plugin::instance()->frontend->enqueue_font( $font );
230	}
231	}
232
233	private function clear_styles( array $path ) {
234	$node = $this->cache_validity->get_node( $path );
235
236	$this->clear_styles_by_node( $path, $node );
237
238	$this->cache_validity->invalidate( $path );
239	}
240
241	private function clear_styles_by_node( array $path, $node ) {
242	if ( ! $node ) {
243	return;
244	}
245
246	if ( true === $node \|\| $node['state'] ) {
247	$this->css_files_manager->delete( $this->convert_path_to_handle( $path ) );
248	}
249
250	if ( is_bool( $node ) \|\| empty( $node['children'] ) ) {
251	return;
252	}
253
254	foreach ( $node['children'] as $child_key => $child_node ) {
255	$this->clear_styles_by_node( array_merge( $path, [ $child_key ] ), $child_node );
256	}
257	}
258
259	private function convert_path_to_handle( array $path ) {
260	return implode( '-', $path );
261	}
262	}
263