ultimate-post-kit / modules / alice-grid / widgets / alice-grid.php

alice-grid.php in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets trunk, at modules/alice-grid/widgets/alice-grid.php

1,144 lines 33.6 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\AliceGrid\Widgets;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Typography;
9	use Elementor\Group_Control_Text_Shadow;
10	use Elementor\Group_Control_Image_Size;
11	use Elementor\Group_Control_Background;
12
13	use UltimatePostKit\Traits\Global_Widget_Controls;
14	use UltimatePostKit\Traits\Global_Widget_Functions;
15	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
16	use WP_Query;
17
18	if (!defined('ABSPATH')) exit; // Exit if accessed directly
19
20	class Alice_Grid extends Group_Control_Query {
21
22	use Global_Widget_Controls;
23	use Global_Widget_Functions;
24
25	private $_query = null;
26
27	public function get_name() {
28	return 'upk-alice-grid';
29	}
30
31	public function get_title() {
32	return BDTUPK . esc_html__('Alice Grid', 'ultimate-post-kit');
33	}
34
35	public function get_icon() {
36	return 'upk-widget-icon upk-icon-alice-grid';
37	}
38
39	public function get_categories() {
40	return ['ultimate-post-kit'];
41	}
42
43	public function get_keywords() {
44	return ['post', 'grid', 'blog', 'recent', 'news', 'alice'];
45	}
46
47	public function get_style_depends() {
48	if ($this->upk_is_edit_mode()) {
49	return ['upk-all-styles'];
50	} else {
51	return ['upk-font', 'upk-alice-grid'];
52	}
53	}
54
55	public function get_script_depends() {
56	if ($this->upk_is_edit_mode()) {
57	return ['upk-all-scripts'];
58	} else {
59	return ['upk-ajax-loadmore'];
60	}
61	}
62
63	public function get_custom_help_url() {
64	return 'https://youtu.be/E7W5WSAvxbA';
65	}
66
67
68	public function get_query() {
69	return $this->_query;
70	}
71
72	public function has_widget_inner_wrapper(): bool {
73	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
74	}
75
76
77	protected function register_controls() {
78	$this->start_controls_section(
79	'section_content_layout',
80	[
81	'label' => esc_html__('Layout', 'ultimate-post-kit'),
82	]
83	);
84
85	$this->add_control(
86	'grid_style',
87	[
88	'label' => esc_html__('Layout Style', 'ultimate-post-kit'),
89	'type' => Controls_Manager::SELECT,
90	'default' => '1',
91	'options' => [
92	'1' => esc_html__('01', 'ultimate-post-kit'),
93	'2' => esc_html__('02', 'ultimate-post-kit'),
94	'3' => esc_html__('03', 'ultimate-post-kit'),
95	'4' => esc_html__('04', 'ultimate-post-kit'),
96	],
97	]
98	);
99
100	// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- established hook name relied on across the plugin family; renaming would break integration.
101	$column_size = apply_filters('upk_column_size', '');
102
103	$this->add_responsive_control(
104	'columns',
105	[
106	'label' => esc_html__('Columns', 'ultimate-post-kit') . BDTUPK_PC,
107	'type' => Controls_Manager::SELECT,
108	'default' => '3',
109	'tablet_default' => '2',
110	'mobile_default' => '1',
111	'options' => [
112	'1' => esc_html__('1', 'ultimate-post-kit'),
113	'2' => esc_html__('2', 'ultimate-post-kit'),
114	'3' => esc_html__('3', 'ultimate-post-kit'),
115	'4' => esc_html__('4', 'ultimate-post-kit'),
116	'5' => esc_html__('5', 'ultimate-post-kit'),
117	'6' => esc_html__('6', 'ultimate-post-kit'),
118	],
119	'selectors' => [
120	'{{WRAPPER}} .upk-alice-grid .upk-style-1' => $column_size,
121	],
122	'condition' => [
123	'grid_style' => ['1']
124	],
125	'classes' => BDTUPK_IS_PC
126	]
127	);
128
129	$this->add_responsive_control(
130	'row_gap',
131	[
132	'label' => esc_html__('Row Gap', 'ultimate-post-kit'),
133	'type' => Controls_Manager::SLIDER,
134	'selectors' => [
135	'{{WRAPPER}} .upk-alice-grid .upk-alice-wrap' => 'grid-row-gap: {{SIZE}}{{UNIT}};',
136	],
137	]
138	);
139
140	$this->add_responsive_control(
141	'column_gap',
142	[
143	'label' => esc_html__('Column Gap', 'ultimate-post-kit'),
144	'type' => Controls_Manager::SLIDER,
145	'selectors' => [
146	'{{WRAPPER}} .upk-alice-grid .upk-alice-wrap' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
147	],
148	]
149	);
150
151	$this->add_responsive_control(
152	'default_item_height',
153	[
154	'label' => esc_html__('Default Item Height', 'ultimate-post-kit'),
155	'type' => Controls_Manager::SLIDER,
156	'range' => [
157	'px' => [
158	'min' => 200,
159	'max' => 800,
160	],
161	],
162	'selectors' => [
163	'{{WRAPPER}} .upk-alice-grid .upk-style-1 .upk-item, {{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+1), {{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+3), {{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+4), {{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+5)' => 'height: {{SIZE}}{{UNIT}};',
164	'(mobile){{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+2)' => 'height: {{SIZE}}{{UNIT}};',
165	],
166	'condition' => [
167	'grid_style' => ['1', '4']
168	]
169	]
170	);
171
172	$this->add_responsive_control(
173	'primary_item_height',
174	[
175	'label' => esc_html__('Primary Item Height', 'ultimate-post-kit'),
176	'type' => Controls_Manager::SLIDER,
177	'range' => [
178	'px' => [
179	'min' => 200,
180	'max' => 800,
181	],
182	],
183	'selectors' => [
184	'{{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+1), {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+2), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+1)' => 'height: {{SIZE}}{{UNIT}};',
185	],
186	'condition' => [
187	'grid_style!' => ['1', '3', '4']
188	]
189	]
190	);
191
192	$this->add_responsive_control(
193	'secondary_item_height',
194	[
195	'label' => esc_html__('Secondary Item Height', 'ultimate-post-kit'),
196	'type' => Controls_Manager::SLIDER,
197	'range' => [
198	'px' => [
199	'min' => 200,
200	'max' => 800,
201	],
202	],
203	'selectors' => [
204	'{{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+3), {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+4), {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+5), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+2), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+3), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+4), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+5), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+6)' => 'height: {{SIZE}}{{UNIT}};',
205	'(mobile){{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+1)' => 'height: {{SIZE}}{{UNIT}};',
206	],
207	'condition' => [
208	'grid_style!' => ['1', '4']
209	]
210	]
211	);
212
213	$this->add_control(
214	'content_position',
215	[
216	'label' => esc_html__('Content Position', 'ultimate-post-kit'),
217	'type' => Controls_Manager::CHOOSE,
218	'toggle' => false,
219	'default' => 'bottom-center',
220	'options' => [
221	'bottom-left' => [
222	'title' => esc_html__('Left', 'ultimate-post-kit'),
223	'icon' => 'eicon-text-align-left',
224	],
225	'bottom-center' => [
226	'title' => esc_html__('Center', 'ultimate-post-kit'),
227	'icon' => 'eicon-text-align-center',
228	],
229	'bottom-right' => [
230	'title' => esc_html__('Right', 'ultimate-post-kit'),
231	'icon' => 'eicon-text-align-right',
232	],
233	],
234	]
235	);
236
237	$this->add_group_control(
238	Group_Control_Image_Size::get_type(),
239	[
240	'name' => 'primary_thumbnail',
241	// phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude -- Elementor widget query built from user-configured controls; expected behaviour.
242	'exclude' => ['custom'],
243	'default' => 'medium',
244	]
245	);
246
247	$this->end_controls_section();
248
249	// Query Settings
250	$this->start_controls_section(
251	'section_post_query_builder',
252	[
253	'label' => esc_html__('Query', 'ultimate-post-kit'),
254	'tab' => Controls_Manager::TAB_CONTENT,
255	]
256	);
257
258	$this->add_control(
259	'item_limit',
260	[
261	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
262	'type' => Controls_Manager::SLIDER,
263	'range' => [
264	'px' => [
265	'min' => 0,
266	'max' => 21,
267	'step' => 3
268	],
269	],
270	'default' => [
271	'size' => 6,
272	],
273	'condition' => [
274	'grid_style' => ['1', '3'],
275	'posts_source!' => 'current_query'
276	]
277	]
278	);
279
280	$this->add_control(
281	'item_limit_2',
282	[
283	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
284	'type' => Controls_Manager::SLIDER,
285	'range' => [
286	'px' => [
287	'min' => 0,
288	'max' => 20,
289	'step' => 5
290	],
291	],
292	'default' => [
293	'size' => 5,
294	],
295	'condition' => [
296	'grid_style' => ['2', '4'],
297	'posts_source!' => 'current_query'
298	]
299	]
300	);
301
302	$this->register_query_builder_controls();
303
304	$this->end_controls_section();
305
306	$this->start_controls_section(
307	'section_content_additional',
308	[
309	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
310	]
311	);
312
313	//Global Title Controls
314	$this->register_title_controls();
315
316	$this->add_control(
317	'show_category',
318	[
319	'label' => esc_html__('Category', 'ultimate-post-kit'),
320	'type' => Controls_Manager::SWITCHER,
321	'default' => 'yes',
322	]
323	);
324
325	$this->add_control(
326	'show_author',
327	[
328	'label' => esc_html__('Author', 'ultimate-post-kit'),
329	'type' => Controls_Manager::SWITCHER,
330	'default' => 'yes',
331	]
332	);
333
334	//Global Date Controls
335	$this->register_date_controls();
336
337	//Global Reading Time Controls
338	$this->register_reading_time_controls();
339
340	$this->add_control(
341	'meta_separator',
342	[
343	'label' => esc_html__('Separator', 'ultimate-post-kit'),
344	'type' => Controls_Manager::TEXT,
345	'default' => '.',
346	'label_block' => false,
347	]
348	);
349
350	$this->add_control(
351	'show_pagination',
352	[
353	'label' => esc_html__('Pagination', 'ultimate-post-kit'),
354	'type' => Controls_Manager::SWITCHER,
355	'separator' => 'before'
356	]
357	);
358
359	//Global Ajax Controls
360	$this->register_ajax_loadmore_controls();
361
362	$this->add_control(
363	'global_link',
364	[
365	'label' => esc_html__('Item Wrapper Link', 'ultimate-post-kit'),
366	'type' => Controls_Manager::SWITCHER,
367	'prefix_class' => 'upk-global-link-',
368	'description' => esc_html__('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
369	]
370	);
371
372	$this->end_controls_section();
373
374	//Style
375	$this->start_controls_section(
376	'upk_section_style',
377	[
378	'label' => esc_html__('Items', 'ultimate-post-kit'),
379	'tab' => Controls_Manager::TAB_STYLE,
380	]
381	);
382
383	$this->add_responsive_control(
384	'content_padding',
385	[
386	'label' => esc_html__('Content Padding', 'ultimate-post-kit'),
387	'type' => Controls_Manager::DIMENSIONS,
388	'size_units' => ['px', 'em', '%'],
389	'selectors' => [
390	'{{WRAPPER}} .upk-alice-grid .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
391	],
392	]
393	);
394
395	$this->start_controls_tabs('tabs_item_style');
396
397	$this->start_controls_tab(
398	'tab_item_normal',
399	[
400	'label' => esc_html__('Normal', 'ultimate-post-kit'),
401	]
402	);
403
404	$this->add_control(
405	'overlay_blur_effect',
406	[
407	'label' => esc_html__('Glassmorphism', 'ultimate-post-kit'),
408	'type' => Controls_Manager::SWITCHER,
409	// translators: %1s: Opening anchor tag with link to MDN backdrop-filter documentation, %2s: Closing anchor tag
410	'description' => sprintf(__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1$s look here %2$s', 'ultimate-post-kit'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),
411	]
412	);
413
414	$this->add_control(
415	'overlay_blur_level',
416	[
417	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
418	'type' => Controls_Manager::SLIDER,
419	'range' => [
420	'px' => [
421	'min' => 0,
422	'step' => 1,
423	'max' => 50,
424	]
425	],
426	'default' => [
427	'size' => 5
428	],
429	'selectors' => [
430	'{{WRAPPER}} .upk-alice-grid .upk-item-box::before' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
431	],
432	'condition' => [
433	'overlay_blur_effect' => 'yes'
434	]
435	]
436	);
437
438	$this->add_control(
439	'item_overlay_color',
440	[
441	'label' => esc_html__('Overlay Color', 'ultimate-post-kit'),
442	'type' => Controls_Manager::COLOR,
443	'selectors' => [
444	'{{WRAPPER}} .upk-alice-grid .upk-item-box::before' => 'background: {{VALUE}};',
445	],
446	]
447	);
448
449	$this->add_group_control(
450	Group_Control_Border::get_type(),
451	[
452	'name' => 'item_border',
453	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-item',
454	]
455	);
456
457	$this->add_responsive_control(
458	'item_border_radius',
459	[
460	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
461	'type' => Controls_Manager::DIMENSIONS,
462	'size_units' => ['px', '%'],
463	'selectors' => [
464	'{{WRAPPER}} .upk-alice-grid .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
465	],
466	]
467	);
468
469	$this->add_responsive_control(
470	'item_padding',
471	[
472	'label' => esc_html__('Padding', 'ultimate-post-kit'),
473	'type' => Controls_Manager::DIMENSIONS,
474	'size_units' => ['px', 'em', '%'],
475	'selectors' => [
476	'{{WRAPPER}} .upk-alice-grid .upk-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
477	],
478	]
479	);
480
481	$this->add_group_control(
482	Group_Control_Box_Shadow::get_type(),
483	[
484	'name' => 'item_box_shadow',
485	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-item',
486	]
487	);
488
489	$this->end_controls_tab();
490
491	$this->start_controls_tab(
492	'tab_item_hover',
493	[
494	'label' => esc_html__('Hover', 'ultimate-post-kit'),
495	]
496	);
497
498	$this->add_control(
499	'overlay_blur_level_hover',
500	[
501	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
502	'type' => Controls_Manager::SLIDER,
503	'range' => [
504	'px' => [
505	'min' => 0,
506	'step' => 1,
507	'max' => 50,
508	]
509	],
510	'default' => [
511	'size' => 0
512	],
513	'selectors' => [
514	'{{WRAPPER}} .upk-alice-grid .upk-item:hover .upk-item-box::before' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
515	],
516	'condition' => [
517	'overlay_blur_effect' => 'yes'
518	]
519	]
520	);
521
522	$this->add_control(
523	'item_overlay_hover_color',
524	[
525	'label' => esc_html__('Overlay Color', 'ultimate-post-kit'),
526	'type' => Controls_Manager::COLOR,
527	'selectors' => [
528	'{{WRAPPER}} .upk-alice-grid .upk-item:hover .upk-item-box::before' => 'background: {{VALUE}};',
529	],
530	]
531	);
532
533	$this->add_control(
534	'item_hover_border_color',
535	[
536	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
537	'type' => Controls_Manager::COLOR,
538	'condition' => [
539	'item_border_border!' => '',
540	],
541	'selectors' => [
542	'{{WRAPPER}} .upk-alice-grid .upk-item:hover' => 'border-color: {{VALUE}};',
543	],
544	]
545	);
546
547	$this->add_group_control(
548	Group_Control_Box_Shadow::get_type(),
549	[
550	'name' => 'item_hover_box_shadow',
551	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-item:hover',
552	]
553	);
554
555	$this->end_controls_tab();
556
557	$this->end_controls_tabs();
558
559	$this->end_controls_section();
560
561	$this->start_controls_section(
562	'section_style_title',
563	[
564	'label' => esc_html__('Title', 'ultimate-post-kit'),
565	'tab' => Controls_Manager::TAB_STYLE,
566	'condition' => [
567	'show_title' => 'yes',
568	],
569	]
570	);
571
572	$this->add_control(
573	'title_style',
574	[
575	'label' => esc_html__('Style', 'ultimate-post-kit'),
576	'type' => Controls_Manager::SELECT,
577	'default' => 'underline',
578	'options' => [
579	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
580	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
581	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
582	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
583	],
584	]
585	);
586
587	$this->add_control(
588	'title_color',
589	[
590	'label' => esc_html__('Color', 'ultimate-post-kit'),
591	'type' => Controls_Manager::COLOR,
592	'selectors' => [
593	'{{WRAPPER}} .upk-alice-grid .upk-title a' => 'color: {{VALUE}};',
594	],
595	]
596	);
597
598	$this->add_control(
599	'title_hover_color',
600	[
601	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
602	'type' => Controls_Manager::COLOR,
603	'selectors' => [
604	'{{WRAPPER}} .upk-alice-grid .upk-title a:hover' => 'color: {{VALUE}};',
605	],
606	]
607	);
608
609	$this->add_responsive_control(
610	'title_spacing',
611	[
612	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
613	'type' => Controls_Manager::SLIDER,
614	'range' => [
615	'px' => [
616	'min' => 0,
617	'max' => 50,
618	],
619	],
620	'selectors' => [
621	'{{WRAPPER}} .upk-alice-grid .upk-title' => 'padding-bottom: {{SIZE}}{{UNIT}};',
622	],
623	]
624	);
625
626	$this->add_group_control(
627	Group_Control_Typography::get_type(),
628	[
629	'name' => 'title_typography',
630	'label' => esc_html__('Typography', 'ultimate-post-kit'),
631	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-item .upk-title',
632	]
633	);
634
635	$this->add_group_control(
636	Group_Control_Typography::get_type(),
637	[
638	'name' => 'secondary_title_typography',
639	'label' => esc_html__('Secondary Typography', 'ultimate-post-kit'),
640	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+3) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+4) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+5) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+2) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+3) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+4) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+5) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+6) .upk-title',
641	'condition' => [
642	'grid_style!' => ['1', '4']
643	]
644	]
645	);
646
647	$this->add_group_control(
648	Group_Control_Text_Shadow::get_type(),
649	[
650	'name' => 'title_text_shadow',
651	'label' => esc_html__('Text Shadow', 'ultimate-post-kit'),
652	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-title a',
653	]
654	);
655
656	$this->end_controls_section();
657
658	$this->start_controls_section(
659	'section_style_author',
660	[
661	'label' => esc_html__('Meta', 'ultimate-post-kit'),
662	'tab' => Controls_Manager::TAB_STYLE,
663	'conditions' => [
664	'relation' => 'or',
665	'terms' => [
666	[
667	'name' => 'show_author',
668	'value' => 'yes'
669	],
670	[
671	'name' => 'show_date',
672	'value' => 'yes'
673	]
674	]
675	],
676	]
677	);
678
679	$this->add_control(
680	'author_color',
681	[
682	'label' => esc_html__('Color', 'ultimate-post-kit'),
683	'type' => Controls_Manager::COLOR,
684	'selectors' => [
685	'{{WRAPPER}} .upk-alice-grid .upk-meta *' => 'color: {{VALUE}};',
686	],
687	]
688	);
689
690	$this->add_control(
691	'author_hover_color',
692	[
693	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
694	'type' => Controls_Manager::COLOR,
695	'selectors' => [
696	'{{WRAPPER}} .upk-alice-grid .upk-meta .upk-author a:hover' => 'color: {{VALUE}};',
697	],
698	]
699	);
700
701	// $this->add_control(
702	// 'date_divider_color',
703	// [
704	// 'label' => esc_html__('Divider Color', 'ultimate-post-kit'),
705	// 'type' => Controls_Manager::COLOR,
706	// 'selectors' => [
707	// '{{WRAPPER}} .upk-alice-grid .upk-meta .upk-date:before' => 'background: {{VALUE}};',
708	// ],
709	// ]
710	// );
711
712	// $this->add_responsive_control(
713	// 'date_spacing',
714	// [
715	// 'label' => esc_html__('Spacing', 'ultimate-post-kit'),
716	// 'type' => Controls_Manager::SLIDER,
717	// 'range' => [
718	// 'px' => [
719	// 'min' => 0,
720	// 'max' => 50,
721	// 'step' => 2,
722	// ],
723	// ],
724	// 'selectors' => [
725	// '{{WRAPPER}} .upk-alice-grid .upk-meta .upk-date' => 'margin-left: {{SIZE}}{{UNIT}}; padding-left: {{SIZE}}{{UNIT}};',
726	// ],
727	// ]
728	// );
729	$this->add_responsive_control(
730	'date_spacing',
731	[
732	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
733	'type' => Controls_Manager::SLIDER,
734	'range' => [
735	'px' => [
736	'min' => 0,
737	'max' => 50,
738	],
739	],
740	'selectors' => [
741	'{{WRAPPER}} .upk-alice-grid .upk-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
742	],
743	]
744	);
745
746	$this->add_group_control(
747	Group_Control_Typography::get_type(),
748	[
749	'name' => 'author_typography',
750	'label' => esc_html__('Typography', 'ultimate-post-kit'),
751	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-meta *',
752	]
753	);
754
755	$this->end_controls_section();
756
757	$this->start_controls_section(
758	'section_style_category',
759	[
760	'label' => esc_html__('Category', 'ultimate-post-kit'),
761	'tab' => Controls_Manager::TAB_STYLE,
762	'condition' => [
763	'show_category' => 'yes',
764	],
765	]
766	);
767
768	$this->add_responsive_control(
769	'category_bottom_spacing',
770	[
771	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
772	'type' => Controls_Manager::SLIDER,
773	'range' => [
774	'px' => [
775	'min' => 0,
776	'max' => 50,
777	],
778	],
779	'selectors' => [
780	'{{WRAPPER}} .upk-alice-grid .upk-category' => 'margin: {{SIZE}}{{UNIT}};',
781	],
782	]
783	);
784
785	$this->start_controls_tabs('tabs_category_style');
786
787	$this->start_controls_tab(
788	'tab_category_normal',
789	[
790	'label' => esc_html__('Normal', 'ultimate-post-kit'),
791	]
792	);
793
794	$this->add_control(
795	'category_color',
796	[
797	'label' => esc_html__('Color', 'ultimate-post-kit'),
798	'type' => Controls_Manager::COLOR,
799	'selectors' => [
800	'{{WRAPPER}} .upk-alice-grid .upk-category a' => 'color: {{VALUE}};',
801	],
802	]
803	);
804
805	$this->add_group_control(
806	Group_Control_Background::get_type(),
807	[
808	'name' => 'category_background',
809	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a',
810	]
811	);
812
813	$this->add_group_control(
814	Group_Control_Border::get_type(),
815	[
816	'name' => 'category_border',
817	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a',
818	]
819	);
820
821	$this->add_responsive_control(
822	'category_border_radius',
823	[
824	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
825	'type' => Controls_Manager::DIMENSIONS,
826	'size_units' => ['px', '%'],
827	'selectors' => [
828	'{{WRAPPER}} .upk-alice-grid .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
829	],
830	]
831	);
832
833	$this->add_responsive_control(
834	'category_padding',
835	[
836	'label' => esc_html__('Padding', 'ultimate-post-kit'),
837	'type' => Controls_Manager::DIMENSIONS,
838	'size_units' => ['px', 'em', '%'],
839	'selectors' => [
840	'{{WRAPPER}} .upk-alice-grid .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
841	],
842	]
843	);
844
845	$this->add_responsive_control(
846	'category_spacing',
847	[
848	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
849	'type' => Controls_Manager::SLIDER,
850	'range' => [
851	'px' => [
852	'min' => 0,
853	'max' => 50,
854	'step' => 1,
855	],
856	],
857	'selectors' => [
858	'{{WRAPPER}} .upk-alice-grid .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
859	],
860	]
861	);
862
863
864	$this->add_group_control(
865	Group_Control_Box_Shadow::get_type(),
866	[
867	'name' => 'category_shadow',
868	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a',
869	]
870	);
871
872	$this->add_group_control(
873	Group_Control_Typography::get_type(),
874	[
875	'name' => 'category_typography',
876	'label' => esc_html__('Typography', 'ultimate-post-kit'),
877	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a',
878	]
879	);
880
881	$this->end_controls_tab();
882
883	$this->start_controls_tab(
884	'tab_category_hover',
885	[
886	'label' => esc_html__('Hover', 'ultimate-post-kit'),
887	]
888	);
889
890	$this->add_control(
891	'category_hover_color',
892	[
893	'label' => esc_html__('Color', 'ultimate-post-kit'),
894	'type' => Controls_Manager::COLOR,
895	'selectors' => [
896	'{{WRAPPER}} .upk-alice-grid .upk-category a:hover' => 'color: {{VALUE}};',
897	],
898	]
899	);
900
901	$this->add_group_control(
902	Group_Control_Background::get_type(),
903	[
904	'name' => 'category_hover_background',
905	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a:hover',
906	]
907	);
908
909	$this->add_control(
910	'category_hover_border_color',
911	[
912	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
913	'type' => Controls_Manager::COLOR,
914	'condition' => [
915	'category_border_border!' => '',
916	],
917	'selectors' => [
918	'{{WRAPPER}} .upk-alice-grid .upk-category a:hover' => 'border-color: {{VALUE}};',
919	],
920	]
921	);
922
923	$this->end_controls_tab();
924
925	$this->end_controls_tabs();
926
927	$this->end_controls_section();
928
929	//Global Pagination Controls
930	$this->register_pagination_controls();
931
932	//Global ajax style controls
933	$this->register_ajax_loadmore_style_controls();
934	}
935
936	/**
937	* Get post query builder arguments
938	*/
939	public function query_posts( $posts_per_page ) {
940	$settings = $this->get_settings();
941	$posts_per_page = isset( $posts_per_page ) ? (int) $posts_per_page : 0;
942	$args = $this->getGroupControlQueryArgs();
943	$is_current_query = ( ! empty( $settings['posts_source'] ) && $settings['posts_source'] === 'current_query' );
944
945	if ( $is_current_query ) {
946	unset( $args['offset'] );
947	unset( $args['no_found_rows'] );
948	$posts_per_page = 0;
949	}
950
951	if ( $posts_per_page > 0 ) {
952	$args['posts_per_page'] = $posts_per_page;
953	} else {
954	$args['posts_per_page'] = (int) get_option( 'posts_per_page', 10 );
955	}
956
957	if ( $settings['show_pagination'] ) {
958	$args['paged'] = max( 1, (int) get_query_var( 'paged' ), (int) get_query_var( 'page' ) );
959	}
960
961	$this->_query = new \WP_Query( $args );
962	}
963
964	public function render_author() {
965
966	if (!$this->get_settings('show_author')) {
967	return;
968	}
969
970	?>
971
972	<div class="upk-author">
973	<span><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit') ?></span>
974	<a
975	href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>"
976	aria-label="<?php echo esc_attr( 'View all posts by ' . get_the_author() ); ?>"
977	>
978	<?php echo esc_html( get_the_author() ) ?>
979	</a>
980	</div>
981	<?php
982	}
983
984	public function render_post_grid_item($post_id, $image_size) {
985	$settings = $this->get_settings_for_display();
986
987	if ('yes' == $settings['global_link']) {
988
989	$this->add_render_attribute('grid-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
990	}
991	$this->add_render_attribute('grid-item', 'class', 'upk-item', true);
992
993	?>
994	<div <?php $this->print_render_attribute_string('grid-item'); ?>>
995	<div class="upk-item-box">
996	<div class="upk-img-wrap">
997	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
998	</div>
999	<?php $this->render_category(); ?>
1000	<div class="upk-content">
1001	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1002
1003	<?php if ($settings['show_author'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
1004	<div class="upk-meta">
1005	<?php $this->render_author(); ?>
1006	<div data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1007	<?php $this->render_date(); ?>
1008	</div>
1009	<?php if (_is_upk_pro_activated()) :
1010	if ('yes' === $settings['show_reading_time']) : ?>
1011	<div class="upk-reading-time" data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1012	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
1013	</div>
1014	<?php endif; ?>
1015	<?php endif; ?>
1016	</div>
1017	<?php endif; ?>
1018
1019	</div>
1020	</div>
1021	</div>
1022	<?php
1023	}
1024
1025	protected function render() {
1026	$settings = $this->get_settings_for_display();
1027
1028
1029	if ($settings['grid_style'] == '2' or $settings['grid_style'] == '4') {
1030	$this->query_posts($settings['item_limit_2']['size']);
1031	} else {
1032	$this->query_posts($settings['item_limit']['size']);
1033	}
1034
1035	$wp_query = $this->get_query();
1036
1037	if (!$wp_query->found_posts) {
1038	return;
1039	}
1040
1041	$this->add_render_attribute('grid-wrap', 'class', 'upk-alice-wrap upk-ajax-grid-wrap');
1042	$this->add_render_attribute('grid-wrap', 'class', 'upk-content-' . $settings['content_position']);
1043	$this->add_render_attribute('grid-wrap', 'class', 'upk-style-' . $settings['grid_style']);
1044
1045	$this->add_render_attribute(
1046	[
1047	'upk-alice-grid' => [
1048	'class' => 'upk-alice-grid upk-ajax-grid',
1049	'data-loadmore' => [
1050	wp_json_encode(array_filter([
1051	'loadmore_enable' => $settings['ajax_loadmore_enable'],
1052	'loadmore_btn' => $settings['ajax_loadmore_btn'],
1053	'infinite_scroll' => $settings['ajax_loadmore_infinite_scroll'],
1054	]))
1055
1056	]
1057	]
1058	]
1059	);
1060
1061	if (isset($settings['ajax_loadmore_enable']) && $settings['ajax_loadmore_enable'] == 'yes') {
1062
1063	$ajax_settings = [
1064	'posts_source' => isset($settings['posts_source']) ? $settings['posts_source'] : 'post',
1065	'posts_per_page' => isset($posts_load) ? $posts_load : 6,
1066	'ajax_item_load' => isset($settings['ajax_loadmore_items']) ? $settings['ajax_loadmore_items'] : 3,
1067	'posts_selected_ids' => isset($settings['posts_selected_ids']) ? $settings['posts_selected_ids'] : '',
1068	'posts_include_by' => isset($settings['posts_include_by']) ? $settings['posts_include_by'] : '',
1069	'posts_include_author_ids' => isset($settings['posts_include_author_ids']) ? $settings['posts_include_author_ids'] : '',
1070	'posts_include_term_ids' => isset($settings['posts_include_term_ids']) ? $settings['posts_include_term_ids'] : '',
1071	'posts_exclude_by' => isset($settings['posts_exclude_by']) ? $settings['posts_exclude_by'] : '',
1072	'posts_exclude_ids' => isset($settings['posts_exclude_ids']) ? $settings['posts_exclude_ids'] : '',
1073	'posts_exclude_author_ids' => isset($settings['posts_exclude_author_ids']) ? $settings['posts_exclude_author_ids'] : '',
1074	'posts_exclude_term_ids' => isset($settings['posts_exclude_term_ids']) ? $settings['posts_exclude_term_ids'] : '',
1075	'posts_offset' => isset($settings['posts_offset']) ? $settings['posts_offset'] : 0,
1076	'posts_select_date' => isset($settings['posts_select_date']) ? $settings['posts_select_date'] : '',
1077	'posts_date_before' => isset($settings['posts_date_before']) ? $settings['posts_date_before'] : '',
1078	'posts_date_after' => isset($settings['posts_date_after']) ? $settings['posts_date_after'] : '',
1079	'posts_orderby' => isset($settings['posts_orderby']) ? $settings['posts_orderby'] : 'date',
1080	'posts_order' => isset($settings['posts_order']) ? $settings['posts_order'] : 'DESC',
1081	'posts_ignore_sticky_posts' => isset($settings['posts_ignore_sticky_posts']) ? $settings['posts_ignore_sticky_posts'] : 'no',
1082	'posts_only_with_featured_image' => isset($settings['posts_only_with_featured_image']) ? $settings['posts_only_with_featured_image'] : 'no',
1083	// Grid Settings
1084	'show_title' => isset($settings['show_title']) ? $settings['show_title'] : 'yes',
1085	'title_tags' => isset($settings['title_tags']) ? $settings['title_tags'] : 'h3',
1086	'show_author' => isset($settings['show_author']) ? $settings['show_author'] : 'yes',
1087	'show_date' => isset($settings['show_date']) ? $settings['show_date'] : 'yes',
1088	'show_time' => isset($settings['show_time']) ? $settings['show_time'] : 'no',
1089	'show_category' => isset($settings['show_category']) ? $settings['show_category'] : 'yes',
1090	'show_reading_time' => isset($settings['show_reading_time']) ? $settings['show_reading_time'] : 'no',
1091	'avg_reading_speed' => isset($settings['avg_reading_speed']) ? $settings['avg_reading_speed'] : 200,
1092	'hide_seconds' => isset($settings['hide_seconds']) ? $settings['hide_seconds'] : 'no',
1093	'hide_minutes' => isset($settings['hide_minutes']) ? $settings['hide_minutes'] : 'no',
1094	'meta_separator' => isset($settings['meta_separator']) ? $settings['meta_separator'] : '\|',
1095	'human_diff_time' => isset($settings['human_diff_time']) ? $settings['human_diff_time'] : 'no',
1096	'human_diff_time_short' => isset($settings['human_diff_time_short']) ? $settings['human_diff_time_short'] : 'no',
1097	'global_link' => isset($settings['global_link']) ? $settings['global_link'] : 'no',
1098	'title_style' => isset($settings['title_style']) ? $settings['title_style'] : 'underline',
1099	'upk_link_new_tab' => isset($settings['upk_link_new_tab']) ? $settings['upk_link_new_tab'] : 'no',
1100	];
1101
1102	$this->add_render_attribute(
1103	[
1104	'upk-alice-grid' => [
1105	'data-settings' => [
1106	wp_json_encode($ajax_settings)
1107	]
1108	]
1109	]
1110	);
1111	}
1112
1113	if (isset($settings['upk_in_animation_show']) && ($settings['upk_in_animation_show'] == 'yes')) {
1114	$this->add_render_attribute('grid-wrap', 'class', 'upk-in-animation');
1115	if (isset($settings['upk_in_animation_delay']['size'])) {
1116	$this->add_render_attribute('grid-wrap', 'data-in-animation-delay', $settings['upk_in_animation_delay']['size']);
1117	}
1118	}
1119
1120	?>
1121	<div <?php $this->print_render_attribute_string('upk-alice-grid'); ?>>
1122	<div <?php $this->print_render_attribute_string('grid-wrap'); ?>>
1123	<?php while ($wp_query->have_posts()) :
1124	$wp_query->the_post();
1125	$thumbnail_size = $settings['primary_thumbnail_size'];
1126	?>
1127	<?php $this->render_post_grid_item(get_the_ID(), $thumbnail_size); ?>
1128	<?php endwhile; ?>
1129	</div>
1130	</div>
1131
1132	<?php $this->render_ajax_loadmore(); ?>
1133
1134	<?php
1135	if ($settings['show_pagination']) { ?>
1136	<div class="ep-pagination">
1137	<?php ultimate_post_kit_post_pagination($wp_query, $this->get_id()); ?>
1138	</div>
1139	<?php
1140	}
1141	wp_reset_postdata();
1142	}
1143	}
1144