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

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

1,807 lines 52.4 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\AlexGrid\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')) {
19	exit;
20	} // Exit if accessed directly
21
22	class Alex_Grid extends Group_Control_Query {
23
24	use Global_Widget_Controls;
25	use Global_Widget_Functions;
26
27	private $_query = null;
28
29	public function get_name() {
30	return 'upk-alex-grid';
31	}
32
33	public function get_title() {
34	return BDTUPK . esc_html__('Alex Grid', 'ultimate-post-kit');
35	}
36
37	public function get_icon() {
38	return 'upk-widget-icon upk-icon-alex-grid';
39	}
40
41	public function get_categories() {
42	return ['ultimate-post-kit'];
43	}
44
45	public function get_keywords() {
46	return ['post', 'grid', 'blog', 'recent', 'news', 'alex'];
47	}
48
49	public function get_style_depends() {
50	if ($this->upk_is_edit_mode()) {
51	return ['upk-all-styles'];
52	} else {
53	return ['upk-font', 'upk-alex-grid'];
54	}
55	}
56
57	public function get_script_depends() {
58	if ($this->upk_is_edit_mode()) {
59	return ['upk-all-scripts'];
60	} else {
61	return ['upk-ajax-loadmore'];
62	}
63	}
64
65	public function get_custom_help_url() {
66	return 'https://youtu.be/criKI7Mm-5g';
67	}
68
69	public function get_query() {
70	return $this->_query;
71	}
72
73	public function has_widget_inner_wrapper(): bool {
74	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
75	}
76
77
78	protected function register_controls() {
79	$this->start_controls_section(
80	'section_content_layout',
81	[
82	'label' => esc_html__('Layout', 'ultimate-post-kit'),
83	]
84	);
85
86	$this->add_control(
87	'grid_style',
88	[
89	'label' => esc_html__('Layout Style', 'ultimate-post-kit'),
90	'type' => Controls_Manager::SELECT,
91	'default' => '1',
92	'options' => [
93	'1' => esc_html__('Style 01', 'ultimate-post-kit'),
94	'2' => esc_html__('Style 02', 'ultimate-post-kit'),
95	'3' => esc_html__('Style 03', 'ultimate-post-kit'),
96	],
97	]
98	);
99
100	// if (_is_upk_pro_activated()) {
101	// $column_size = 'grid-template-columns: repeat({{SIZE}}, 1fr);';
102
103	// } else {
104	// $column_size = '';
105	// }
106
107	$column_size = apply_filters('upk_column_size', '');
108
109	$this->add_responsive_control(
110	'columns',
111	[
112	'label' => esc_html__('Columns', 'ultimate-post-kit') . BDTUPK_PC,
113	'type' => Controls_Manager::SELECT,
114	'default' => '3',
115	'tablet_default' => '2',
116	'mobile_default' => '1',
117	'options' => [
118	'1' => esc_html__('1', 'ultimate-post-kit'),
119	'2' => esc_html__('2', 'ultimate-post-kit'),
120	'3' => esc_html__('3', 'ultimate-post-kit'),
121	'4' => esc_html__('4', 'ultimate-post-kit'),
122	'5' => esc_html__('5', 'ultimate-post-kit'),
123	'6' => esc_html__('6', 'ultimate-post-kit'),
124	],
125	'selectors' => [
126	'{{WRAPPER}} .upk-alex-grid .upk-style-2' => $column_size,
127	],
128	'condition' => [
129	'grid_style' => ['2']
130	],
131	'classes' => BDTUPK_IS_PC
132	]
133	);
134
135	$this->add_responsive_control(
136	'row_gap',
137	[
138	'label' => esc_html__('Row Gap', 'ultimate-post-kit'),
139	'type' => Controls_Manager::SLIDER,
140	'default' => [
141	'size' => 20,
142	],
143	'selectors' => [
144	'{{WRAPPER}} .upk-alex-grid .upk-alex-wrap' => 'grid-row-gap: {{SIZE}}{{UNIT}};',
145	],
146	]
147	);
148
149	$this->add_responsive_control(
150	'column_gap',
151	[
152	'label' => esc_html__('Column Gap', 'ultimate-post-kit'),
153	'type' => Controls_Manager::SLIDER,
154	'default' => [
155	'size' => 20,
156	],
157	'selectors' => [
158	'{{WRAPPER}} .upk-alex-grid .upk-alex-wrap' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
159	],
160	]
161	);
162
163	$this->add_responsive_control(
164	'default_item_height',
165	[
166	'label' => esc_html__('Item Height(px)', 'ultimate-post-kit'),
167	'type' => Controls_Manager::SLIDER,
168	'range' => [
169	'px' => [
170	'min' => 200,
171	'max' => 600,
172	],
173	],
174	'selectors' => [
175	'{{WRAPPER}} .upk-alex-grid .upk-style-2 .upk-item, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+3), {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+4), {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+5), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+1), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+3), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+4), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+5)' => 'height: {{SIZE}}{{UNIT}};',
176
177	],
178	'condition' => [
179	'grid_style' => ['2', '3']
180	]
181	]
182	);
183
184	$this->add_responsive_control(
185	'primary_item_height',
186	[
187	'label' => esc_html__('Primary Item Height', 'ultimate-post-kit'),
188	'type' => Controls_Manager::SLIDER,
189	'range' => [
190	'px' => [
191	'min' => 200,
192	'max' => 800,
193	],
194	],
195	'default' => [
196	'size' => 420,
197	'unit' => 'px',
198	],
199	'selectors' => [
200	'{{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+1), {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+2), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+2)' => 'height: {{SIZE}}{{UNIT}};',
201	],
202	'condition' => [
203	'grid_style!' => ['2', '3']
204	]
205	]
206	);
207
208	$this->add_responsive_control(
209	'secondary_item_height',
210	[
211	'label' => esc_html__('Secondary Item Height', 'ultimate-post-kit'),
212	'type' => Controls_Manager::SLIDER,
213	'range' => [
214	'px' => [
215	'min' => 200,
216	'max' => 800,
217	],
218	],
219	'default' => [
220	'size' => 280,
221	'unit' => 'px',
222	],
223	'selectors' => [
224	'{{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+3), {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+4), {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+5), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+1), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+3), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+4), {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+5)' => 'height: {{SIZE}}{{UNIT}};',
225	],
226	'condition' => [
227	'grid_style!' => ['2', '3']
228	]
229	]
230	);
231
232	$this->add_control(
233	'content_position',
234	[
235	'label' => esc_html__('Content Position', 'ultimate-post-kit'),
236	'type' => Controls_Manager::CHOOSE,
237	'toggle' => false,
238	'default' => 'right',
239	'options' => [
240	'left' => [
241	'title' => esc_html__('Left', 'ultimate-post-kit'),
242	'icon' => 'eicon-h-align-left',
243	],
244	'right' => [
245	'title' => esc_html__('Right', 'ultimate-post-kit'),
246	'icon' => 'eicon-h-align-right',
247	],
248	],
249	]
250	);
251
252	$this->add_group_control(
253	Group_Control_Image_Size::get_type(),
254	[
255	'name' => 'primary_thumbnail',
256	'exclude' => ['custom'],
257	'default' => 'medium',
258	]
259	);
260
261	$this->end_controls_section();
262
263	//New Query Builder Settings
264	$this->start_controls_section(
265	'section_post_query_builder',
266	[
267	'label' => esc_html__('Query', 'ultimate-post-kit'),
268	'tab' => Controls_Manager::TAB_CONTENT,
269	]
270	);
271
272	$this->add_control(
273	'item_limit',
274	[
275	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
276	'type' => Controls_Manager::SLIDER,
277	'range' => [
278	'px' => [
279	'min' => 0,
280	'max' => 20,
281	'step' => 5
282	],
283	],
284	'default' => [
285	'size' => 5,
286	],
287	'condition' => [
288	'grid_style' => ['1', '3'],
289	'posts_source!' => 'current_query',
290	]
291	]
292	);
293
294	$this->add_control(
295	'item_limit_2',
296	[
297	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
298	'type' => Controls_Manager::SLIDER,
299	'range' => [
300	'px' => [
301	'min' => 1,
302	'max' => 21,
303	'step' => 1
304	],
305	],
306	'default' => [
307	'size' => 6,
308	],
309	'condition' => [
310	'grid_style' => ['2']
311	]
312	]
313	);
314
315	$this->register_query_builder_controls();
316
317	$this->end_controls_section();
318
319	$this->start_controls_section(
320	'section_content_additional',
321	[
322	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
323	]
324	);
325
326	//Global Title Controls
327	$this->register_title_controls();
328
329	$this->add_control(
330	'show_category',
331	[
332	'label' => esc_html__('Category', 'ultimate-post-kit'),
333	'type' => Controls_Manager::SWITCHER,
334	'default' => 'yes',
335	]
336	);
337
338	$this->add_control(
339	'show_readmore',
340	[
341	'label' => esc_html__('Read More', 'ultimate-post-kit'),
342	'type' => Controls_Manager::SWITCHER,
343	'default' => 'yes',
344	]
345	);
346
347	$this->add_control(
348	'show_author',
349	[
350	'label' => esc_html__('Author', 'ultimate-post-kit'),
351	'type' => Controls_Manager::SWITCHER,
352	'default' => 'yes',
353	]
354	);
355
356	//Global Date Controls
357	$this->register_date_controls();
358
359	//Global Reading Time Controls
360	$this->register_reading_time_controls();
361
362	$this->add_control(
363	'meta_separator',
364	[
365	'label' => esc_html__('Separator', 'ultimate-post-kit'),
366	'type' => Controls_Manager::TEXT,
367	'default' => '\|',
368	'label_block' => false,
369	]
370	);
371
372	$this->add_control(
373	'show_post_format',
374	[
375	'label' => esc_html__('Post Format', 'ultimate-post-kit'),
376	'type' => Controls_Manager::SWITCHER,
377	'separator' => 'before'
378	]
379	);
380
381	$this->add_control(
382	'show_pagination',
383	[
384	'label' => esc_html__('Pagination', 'ultimate-post-kit'),
385	'type' => Controls_Manager::SWITCHER,
386	'separator' => 'before'
387	]
388	);
389
390	//Global Ajax Controls
391	$this->register_ajax_loadmore_controls();
392
393	$this->add_control(
394	'global_link',
395	[
396	'label' => esc_html__('Item Wrapper Link', 'ultimate-post-kit'),
397	'type' => Controls_Manager::SWITCHER,
398	'prefix_class' => 'upk-global-link-',
399	'description' => esc_html__('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
400	'separator' => 'before'
401	]
402	);
403
404	$this->end_controls_section();
405
406	//Style
407	$this->start_controls_section(
408	'upk_section_style',
409	[
410	'label' => esc_html__('Items', 'ultimate-post-kit'),
411	'tab' => Controls_Manager::TAB_STYLE,
412	]
413	);
414
415	$this->start_controls_tabs('tabs_item_style');
416
417	$this->start_controls_tab(
418	'tab_item_normal',
419	[
420	'label' => esc_html__('Normal', 'ultimate-post-kit'),
421	]
422	);
423
424	$this->add_responsive_control(
425	'item_border_radius',
426	[
427	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
428	'type' => Controls_Manager::DIMENSIONS,
429	'size_units' => ['px', '%'],
430	'selectors' => [
431	'{{WRAPPER}} .upk-alex-grid .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
432	],
433	]
434	);
435
436	$this->add_group_control(
437	Group_Control_Box_Shadow::get_type(),
438	[
439	'name' => 'item_box_shadow',
440	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item',
441	]
442	);
443
444	$this->end_controls_tab();
445
446	$this->start_controls_tab(
447	'tab_item_hover',
448	[
449	'label' => esc_html__('Hover', 'ultimate-post-kit'),
450	]
451	);
452
453	$this->add_group_control(
454	Group_Control_Box_Shadow::get_type(),
455	[
456	'name' => 'item_box_shadow_hover',
457	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item:hover',
458	]
459	);
460
461	$this->end_controls_tab();
462
463	$this->end_controls_tabs();
464
465	$this->end_controls_section();
466
467	$this->start_controls_section(
468	'section_style_content',
469	[
470	'label' => esc_html__('Content', 'ultimate-post-kit'),
471	'tab' => Controls_Manager::TAB_STYLE,
472	]
473	);
474
475	$this->add_control(
476	'overlay_blur_effect',
477	[
478	'label' => esc_html__('Glassmorphism', 'ultimate-post-kit'),
479	'type' => Controls_Manager::SWITCHER,
480	// translators: %1s: Opening anchor tag with link to MDN backdrop-filter documentation, %2s: Closing anchor tag
481	'description' => sprintf(__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1s look here %2s', 'ultimate-post-kit'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),
482	'default' => 'yes',
483	]
484	);
485
486	$this->add_control(
487	'overlay_blur_level',
488	[
489	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
490	'type' => Controls_Manager::SLIDER,
491	'range' => [
492	'px' => [
493	'min' => 0,
494	'step' => 1,
495	'max' => 50,
496	]
497	],
498	'default' => [
499	'size' => 10
500	],
501	'selectors' => [
502	'{{WRAPPER}} .upk-alex-grid .upk-content-wrap' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
503	],
504	'condition' => [
505	'overlay_blur_effect' => 'yes'
506	]
507	]
508	);
509
510	$this->add_group_control(
511	Group_Control_Background::get_type(),
512	[
513	'name' => 'content_background',
514	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-content-wrap',
515	]
516	);
517
518	$this->add_responsive_control(
519	'content_border_radius',
520	[
521	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
522	'type' => Controls_Manager::DIMENSIONS,
523	'size_units' => ['px', '%'],
524	'selectors' => [
525	'{{WRAPPER}} .upk-alex-grid .upk-content-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
526	],
527	]
528	);
529
530	$this->add_control(
531	'hr_1',
532	[
533	'type' => Controls_Manager::DIVIDER,
534	]
535	);
536
537	$this->add_responsive_control(
538	'content_width',
539	[
540	'label' => esc_html__('Width(%)', 'ultimate-post-kit'),
541	'type' => Controls_Manager::SLIDER,
542	'selectors' => [
543	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-content-wrap' => 'width: {{SIZE}}%;'
544	],
545	]
546	);
547
548	$this->add_responsive_control(
549	'secondary_content_width',
550	[
551	'label' => esc_html__('Secondary Width(%)', 'ultimate-post-kit'),
552	'type' => Controls_Manager::SLIDER,
553	'selectors' => [
554	'{{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+3) .upk-content-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+4) .upk-content-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+5) .upk-content-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-content-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-content-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-content-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-content-wrap' => 'width: {{SIZE}}%;'
555	],
556	'condition' => [
557	'grid_style!' => '2'
558	]
559	]
560	);
561
562	$this->add_control(
563	'hr_32',
564	[
565	'type' => Controls_Manager::DIVIDER,
566	]
567	);
568
569	$this->add_responsive_control(
570	'content_height',
571	[
572	'label' => esc_html__('Height(px)', 'ultimate-post-kit'),
573	'type' => Controls_Manager::SLIDER,
574	'range' => [
575	'px' => [
576	'min' => 50,
577	'max' => 500,
578	],
579	],
580	'selectors' => [
581	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-content' => 'height: {{SIZE}}px;'
582	],
583	]
584	);
585
586	$this->add_responsive_control(
587	'secondary_content_height',
588	[
589	'label' => esc_html__('Secondary height(px)', 'ultimate-post-kit'),
590	'type' => Controls_Manager::SLIDER,
591	'range' => [
592	'px' => [
593	'min' => 50,
594	'max' => 500,
595	],
596	],
597	'selectors' => [
598	'{{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+3) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+4) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+5) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-content' => 'height: {{SIZE}}px;'
599	],
600	'condition' => [
601	'grid_style!' => '2'
602	]
603	]
604	);
605
606	$this->add_control(
607	'hr_2',
608	[
609	'type' => Controls_Manager::DIVIDER,
610	]
611	);
612
613	$this->add_responsive_control(
614	'content_inner_padding',
615	[
616	'label' => esc_html__('Inner Padding', 'ultimate-post-kit'),
617	'type' => Controls_Manager::DIMENSIONS,
618	'size_units' => ['px', 'em', '%'],
619	'selectors' => [
620	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
621	],
622	]
623	);
624
625	$this->add_responsive_control(
626	'content_secondary_inner_padding',
627	[
628	'label' => esc_html__('Secondary Inner Padding', 'ultimate-post-kit'),
629	'type' => Controls_Manager::DIMENSIONS,
630	'size_units' => ['px', 'em', '%'],
631	'selectors' => [
632	'{{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+3) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+4) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+5) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-content, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
633	],
634	'condition' => [
635	'grid_style!' => '2'
636	]
637	]
638	);
639
640	$this->end_controls_section();
641
642	$this->start_controls_section(
643	'section_style_title',
644	[
645	'label' => esc_html__('Title', 'ultimate-post-kit'),
646	'tab' => Controls_Manager::TAB_STYLE,
647	'condition' => [
648	'show_title' => 'yes',
649	],
650	]
651	);
652
653	$this->add_control(
654	'title_style',
655	[
656	'label' => esc_html__('Style', 'ultimate-post-kit'),
657	'type' => Controls_Manager::SELECT,
658	'default' => '',
659	'options' => [
660	'' => esc_html__('Default', 'ultimate-post-kit'),
661	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
662	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
663	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
664	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
665	],
666	]
667	);
668
669	$this->start_controls_tabs('tabs_title_style');
670
671	$this->start_controls_tab(
672	'tab_title_normal',
673	[
674	'label' => esc_html__('Normal', 'ultimate-post-kit'),
675	]
676	);
677
678	$this->add_control(
679	'title_color',
680	[
681	'label' => esc_html__('Color', 'ultimate-post-kit'),
682	'type' => Controls_Manager::COLOR,
683	'selectors' => [
684	'{{WRAPPER}} .upk-alex-grid .upk-title a' => 'color: {{VALUE}};',
685	],
686	]
687	);
688
689	$this->add_group_control(
690	Group_Control_Typography::get_type(),
691	[
692	'name' => 'title_typography',
693	'label' => esc_html__('Typography', 'ultimate-post-kit'),
694	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item .upk-title',
695	]
696	);
697
698	$this->add_group_control(
699	Group_Control_Typography::get_type(),
700	[
701	'name' => 'secondary_title_typography',
702	'label' => esc_html__('Secondary Typography', 'ultimate-post-kit'),
703	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+3) .upk-title, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+4) .upk-title, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+5) .upk-title, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-title, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-title, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-title, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-title',
704	'condition' => [
705	'grid_style!' => '2'
706	]
707	]
708	);
709
710	$this->add_control(
711	'title_advanced_style',
712	[
713	'label' => esc_html__('Advanced Style', 'ultimate-post-kit'),
714	'type' => Controls_Manager::SWITCHER,
715	]
716	);
717
718	$this->add_group_control(
719	Group_Control_Background::get_type(),
720	[
721	'name' => 'title_background',
722	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-title',
723	'condition' => [
724	'title_advanced_style' => 'yes'
725	]
726	]
727	);
728
729	$this->add_group_control(
730	Group_Control_Text_Shadow::get_type(),
731	[
732	'name' => 'title_text_shadow',
733	'label' => esc_html__('Text Shadow', 'ultimate-post-kit'),
734	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-title',
735	'condition' => [
736	'title_advanced_style' => 'yes'
737	]
738	]
739	);
740
741	$this->add_group_control(
742	Group_Control_Border::get_type(),
743	[
744	'name' => 'title_border',
745	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-title',
746	'condition' => [
747	'title_advanced_style' => 'yes'
748	]
749	]
750	);
751
752	$this->add_responsive_control(
753	'title_border_radius',
754	[
755	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
756	'type' => Controls_Manager::DIMENSIONS,
757	'size_units' => ['px', '%'],
758	'selectors' => [
759	'{{WRAPPER}} .upk-alex-grid .upk-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
760	],
761	'condition' => [
762	'title_advanced_style' => 'yes'
763	]
764	]
765	);
766
767	$this->add_group_control(
768	Group_Control_Box_Shadow::get_type(),
769	[
770	'name' => 'title_box_shadow',
771	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-title',
772	'condition' => [
773	'title_advanced_style' => 'yes'
774	]
775	]
776	);
777
778	$this->add_responsive_control(
779	'title_text_padding',
780	[
781	'label' => esc_html__('Padding', 'ultimate-post-kit'),
782	'type' => Controls_Manager::DIMENSIONS,
783	'size_units' => ['px', 'em', '%'],
784	'selectors' => [
785	'{{WRAPPER}} .upk-alex-grid .upk-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
786	],
787	'condition' => [
788	'title_advanced_style' => 'yes'
789	]
790	]
791	);
792
793	$this->end_controls_tab();
794
795	$this->start_controls_tab(
796	'tab_title_hover',
797	[
798	'label' => esc_html__('Hover', 'ultimate-post-kit'),
799	]
800	);
801
802	$this->add_control(
803	'title_hover_color',
804	[
805	'label' => esc_html__('Color', 'ultimate-post-kit'),
806	'type' => Controls_Manager::COLOR,
807	'selectors' => [
808	'{{WRAPPER}} .upk-alex-grid .upk-item:hover .upk-title a' => 'color: {{VALUE}};',
809	],
810	]
811	);
812
813	$this->add_control(
814	'title_border_hover_color',
815	[
816	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
817	'type' => Controls_Manager::COLOR,
818	'selectors' => [
819	'{{WRAPPER}} .upk-alex-grid .upk-item:hover .upk-title' => 'color: {{VALUE}};',
820	],
821	'condition' => [
822	'title_advanced_style' => 'yes',
823	'title_border_border!' => '',
824	]
825	]
826	);
827
828	$this->add_group_control(
829	Group_Control_Background::get_type(),
830	[
831	'name' => 'title_hover_background',
832	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item:hover .upk-title',
833	'condition' => [
834	'title_advanced_style' => 'yes'
835	]
836	]
837	);
838
839	$this->end_controls_tab();
840
841	$this->end_controls_tabs();
842
843	$this->end_controls_section();
844
845	$this->start_controls_section(
846	'section_style_category',
847	[
848	'label' => esc_html__('Category', 'ultimate-post-kit'),
849	'tab' => Controls_Manager::TAB_STYLE,
850	'condition' => [
851	'show_category' => 'yes'
852	],
853	]
854	);
855
856	$this->add_responsive_control(
857	'category_bottom_spacing',
858	[
859	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
860	'type' => Controls_Manager::SLIDER,
861	'range' => [
862	'px' => [
863	'min' => 0,
864	'max' => 50,
865	],
866	],
867	'selectors' => [
868	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
869	],
870	]
871	);
872
873	$this->start_controls_tabs('tabs_category_style');
874
875	$this->start_controls_tab(
876	'tab_category_normal',
877	[
878	'label' => esc_html__('Normal', 'ultimate-post-kit'),
879	]
880	);
881
882	$this->add_control(
883	'category_color',
884	[
885	'label' => esc_html__('Color', 'ultimate-post-kit'),
886	'type' => Controls_Manager::COLOR,
887	'selectors' => [
888	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a' => 'color: {{VALUE}};',
889	],
890	]
891	);
892
893	$this->add_group_control(
894	Group_Control_Background::get_type(),
895	[
896	'name' => 'category_background',
897	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a',
898	]
899	);
900
901	$this->add_group_control(
902	Group_Control_Border::get_type(),
903	[
904	'name' => 'category_border',
905	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a',
906	]
907	);
908
909	$this->add_responsive_control(
910	'category_border_radius',
911	[
912	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
913	'type' => Controls_Manager::DIMENSIONS,
914	'size_units' => ['px', '%'],
915	'selectors' => [
916	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
917	],
918	]
919	);
920
921	$this->add_responsive_control(
922	'category_padding',
923	[
924	'label' => esc_html__('Padding', 'ultimate-post-kit'),
925	'type' => Controls_Manager::DIMENSIONS,
926	'size_units' => ['px', 'em', '%'],
927	'selectors' => [
928	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
929	],
930	]
931	);
932
933	$this->add_responsive_control(
934	'category_space_between',
935	[
936	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
937	'type' => Controls_Manager::SLIDER,
938	'range' => [
939	'px' => [
940	'min' => 0,
941	'max' => 50,
942	'step' => 2,
943	],
944	],
945	'selectors' => [
946	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
947	],
948	]
949	);
950
951	$this->add_group_control(
952	Group_Control_Box_Shadow::get_type(),
953	[
954	'name' => 'category_shadow',
955	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a',
956	]
957	);
958
959	$this->add_group_control(
960	Group_Control_Typography::get_type(),
961	[
962	'name' => 'category_typography',
963	'label' => esc_html__('Typography', 'ultimate-post-kit'),
964	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a',
965	]
966	);
967
968	$this->end_controls_tab();
969
970	$this->start_controls_tab(
971	'tab_category_hover',
972	[
973	'label' => esc_html__('Hover', 'ultimate-post-kit'),
974	'condition' => [
975	'show_category' => 'yes'
976	]
977	]
978	);
979
980	$this->add_control(
981	'category_hover_color',
982	[
983	'label' => esc_html__('Color', 'ultimate-post-kit'),
984	'type' => Controls_Manager::COLOR,
985	'selectors' => [
986	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a:hover' => 'color: {{VALUE}};',
987	],
988	]
989	);
990
991	$this->add_group_control(
992	Group_Control_Background::get_type(),
993	[
994	'name' => 'category_hover_background',
995	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a:hover',
996	]
997	);
998
999	$this->add_control(
1000	'category_hover_border_color',
1001	[
1002	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
1003	'type' => Controls_Manager::COLOR,
1004	'condition' => [
1005	'category_border_border!' => '',
1006	],
1007	'selectors' => [
1008	'{{WRAPPER}} .upk-alex-grid .upk-item .upk-category a:hover' => 'border-color: {{VALUE}};',
1009	],
1010	]
1011	);
1012
1013	$this->end_controls_tab();
1014
1015	$this->end_controls_tabs();
1016
1017	$this->end_controls_section();
1018
1019	$this->start_controls_section(
1020	'section_style_readmore',
1021	[
1022	'label' => esc_html__('Read More', 'ultimate-post-kit'),
1023	'tab' => Controls_Manager::TAB_STYLE,
1024	'condition' => [
1025	'show_readmore' => 'yes',
1026	],
1027	]
1028	);
1029
1030	$this->start_controls_tabs('tabs_readmore_style');
1031
1032	$this->start_controls_tab(
1033	'tab_readmore_normal',
1034	[
1035	'label' => esc_html__('Normal', 'ultimate-post-kit'),
1036	]
1037	);
1038
1039	$this->add_control(
1040	'readmore_text_color',
1041	[
1042	'label' => esc_html__('Color', 'ultimate-post-kit'),
1043	'type' => Controls_Manager::COLOR,
1044	'selectors' => [
1045	'{{WRAPPER}} .upk-alex-grid .upk-readmore .upk-readmore-icon:before, {{WRAPPER}} .upk-alex-grid .upk-readmore .upk-readmore-icon span:before, {{WRAPPER}} .upk-alex-grid .upk-readmore .upk-readmore-icon span:after' => 'background: {{VALUE}};',
1046	],
1047	]
1048	);
1049
1050	$this->add_group_control(
1051	Group_Control_Background::get_type(),
1052	[
1053	'name' => 'readmore_background',
1054	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-readmore',
1055	]
1056	);
1057
1058	$this->add_group_control(
1059	Group_Control_Border::get_type(),
1060	[
1061	'name' => 'readmore_border',
1062	'placeholder' => '1px',
1063	'default' => '1px',
1064	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-readmore'
1065	]
1066	);
1067
1068	$this->add_responsive_control(
1069	'readmore_radius',
1070	[
1071	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1072	'type' => Controls_Manager::DIMENSIONS,
1073	'size_units' => ['px', '%'],
1074	'selectors' => [
1075	'{{WRAPPER}} .upk-alex-grid .upk-readmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1076	],
1077	]
1078	);
1079
1080	$this->add_responsive_control(
1081	'readmore_primary_padding',
1082	[
1083	'label' => esc_html__('Padding', 'ultimate-post-kit'),
1084	'type' => Controls_Manager::DIMENSIONS,
1085	'size_units' => ['px', 'em', '%'],
1086	'selectors' => [
1087	'{{WRAPPER}} .upk-alex-grid .upk-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1088	'{{WRAPPER}} .upk-alex-grid .upk-button-wrap' => 'margin-bottom: calc(-{{TOP}}px * 2);',
1089	],
1090	]
1091	);
1092
1093	$this->add_responsive_control(
1094	'readmore_secondary_padding',
1095	[
1096	'label' => esc_html__('Secondary Padding', 'ultimate-post-kit'),
1097	'type' => Controls_Manager::DIMENSIONS,
1098	'size_units' => ['px', 'em', '%'],
1099	'selectors' => [
1100	'{{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+3) .upk-readmore, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+4) .upk-readmore, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+5) .upk-readmore, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-readmore, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-readmore, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-readmore, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1101	'{{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+3) .upk-button-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+4) .upk-button-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-1 .upk-item:nth-child(5n+5) .upk-button-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-button-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-button-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-button-wrap, {{WRAPPER}} .upk-alex-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-button-wrap' => 'margin-bottom: calc(-{{TOP}}px * 2);',
1102	],
1103	'condition' => [
1104	'grid_style!' => '2'
1105	]
1106	]
1107	);
1108
1109	$this->add_group_control(
1110	Group_Control_Box_Shadow::get_type(),
1111	[
1112	'name' => 'readmore_shadow',
1113	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-readmore',
1114	]
1115	);
1116
1117	$this->end_controls_tab();
1118
1119	$this->start_controls_tab(
1120	'tab_readmore_hover',
1121	[
1122	'label' => esc_html__('Hover', 'ultimate-post-kit'),
1123	]
1124	);
1125
1126	$this->add_control(
1127	'readmore_hover_text_color',
1128	[
1129	'label' => esc_html__('Color', 'ultimate-post-kit'),
1130	'type' => Controls_Manager::COLOR,
1131	'selectors' => [
1132	'{{WRAPPER}} .upk-alex-grid .upk-readmore:hover .upk-readmore-icon:before, {{WRAPPER}} .upk-alex-grid .upk-readmore:hover .upk-readmore-icon span:before, {{WRAPPER}} .upk-alex-grid .upk-readmore:hover .upk-readmore-icon span:after' => 'background: {{VALUE}};',
1133	],
1134	]
1135	);
1136
1137	$this->add_group_control(
1138	Group_Control_Background::get_type(),
1139	[
1140	'name' => 'readmore_hover_background',
1141	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-readmore:hover',
1142	]
1143	);
1144
1145	$this->add_control(
1146	'readmore_hover_border_color',
1147	[
1148	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
1149	'type' => Controls_Manager::COLOR,
1150	'selectors' => [
1151	'{{WRAPPER}} .upk-alex-grid .upk-readmore:hover' => 'border-color: {{VALUE}};',
1152	],
1153	'condition' => [
1154	'readmore_border_border!' => ''
1155	]
1156	]
1157	);
1158
1159	$this->add_group_control(
1160	Group_Control_Box_Shadow::get_type(),
1161	[
1162	'name' => 'readmore_hover_shadow',
1163	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-readmore:hover',
1164	]
1165	);
1166
1167	$this->end_controls_tab();
1168
1169	$this->end_controls_tabs();
1170
1171	$this->end_controls_section();
1172
1173	$this->start_controls_section(
1174	'section_style_author',
1175	[
1176	'label' => esc_html__('Meta', 'ultimate-post-kit') . BDTUPK_UC,
1177	'tab' => Controls_Manager::TAB_STYLE,
1178	'conditions' => [
1179	'relation' => 'or',
1180	'terms' => [
1181	[
1182	'name' => 'show_author',
1183	'value' => 'yes'
1184	],
1185	[
1186	'name' => 'show_date',
1187	'value' => 'yes'
1188	],
1189	[
1190	'name' => 'show_reading_time',
1191	'value' => 'yes'
1192	]
1193	]
1194	],
1195	]
1196	);
1197
1198	$this->start_controls_tabs('tabs_author_date_style');
1199
1200	$this->start_controls_tab(
1201	'tab_avatar_normal',
1202	[
1203	'label' => esc_html__('Avatar', 'ultimate-post-kit'),
1204	'condition' => [
1205	'show_author' => 'yes',
1206	],
1207	]
1208	);
1209
1210	$this->add_responsive_control(
1211	'author_image_size',
1212	[
1213	'label' => esc_html__('Size', 'ultimate-post-kit'),
1214	'type' => Controls_Manager::SLIDER,
1215	'range' => [
1216	'px' => [
1217	'min' => 20,
1218	'max' => 100,
1219	],
1220	],
1221	'selectors' => [
1222	'{{WRAPPER}} .upk-alex-grid .upk-meta .upk-author-img img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1223	],
1224	'condition' => [
1225	'show_author' => 'yes',
1226	],
1227	]
1228	);
1229
1230	$this->add_responsive_control(
1231	'author_image_spacing',
1232	[
1233	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
1234	'type' => Controls_Manager::SLIDER,
1235	'range' => [
1236	'px' => [
1237	'min' => 0,
1238	'max' => 50,
1239	],
1240	],
1241	'selectors' => [
1242	'{{WRAPPER}} .upk-alex-grid .upk-meta .upk-author-img img' => 'margin-right: {{SIZE}}{{UNIT}};',
1243	],
1244	'condition' => [
1245	'show_author' => 'yes',
1246	],
1247	]
1248	);
1249
1250	$this->add_responsive_control(
1251	'author_image_radius',
1252	[
1253	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1254	'type' => Controls_Manager::DIMENSIONS,
1255	'size_units' => ['px', '%'],
1256	'selectors' => [
1257	'{{WRAPPER}} .upk-alex-grid .upk-meta .upk-author-img img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1258	],
1259	'condition' => [
1260	'show_author' => 'yes',
1261	],
1262	]
1263	);
1264
1265	$this->end_controls_tab();
1266	$this->start_controls_tab(
1267	'tab_author_name_normal',
1268	[
1269	'label' => esc_html__('Author Name', 'ultimate-post-kit'),
1270	'condition' => [
1271	'show_author' => 'yes',
1272	],
1273	]
1274	);
1275
1276	$this->add_control(
1277	'author_name_color',
1278	[
1279	'label' => esc_html__('Color', 'ultimate-post-kit'),
1280	'type' => Controls_Manager::COLOR,
1281	'selectors' => [
1282	'{{WRAPPER}} .upk-alex-grid .upk-meta .upk-author-name a' => 'color: {{VALUE}};',
1283	],
1284	'condition' => [
1285	'show_author' => 'yes',
1286	],
1287	]
1288	);
1289
1290	$this->add_control(
1291	'author_name_hover_color',
1292	[
1293	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
1294	'type' => Controls_Manager::COLOR,
1295	'selectors' => [
1296	'{{WRAPPER}} .upk-alex-grid .upk-meta .upk-author-name a:hover' => 'color: {{VALUE}};',
1297	],
1298	'condition' => [
1299	'show_author' => 'yes',
1300	],
1301	]
1302	);
1303
1304	$this->add_group_control(
1305	Group_Control_Typography::get_type(),
1306	[
1307	'name' => 'author_name_typography',
1308	'label' => esc_html__('Typography', 'ultimate-post-kit'),
1309	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-meta .upk-author-name a',
1310	'condition' => [
1311	'show_author' => 'yes',
1312	],
1313	]
1314	);
1315
1316	$this->end_controls_tab();
1317	$this->start_controls_tab(
1318	'tab_date_normal',
1319	[
1320	'label' => esc_html__('Date', 'ultimate-post-kit'),
1321	'conditions' => [
1322	'relation' => 'or',
1323	'terms' => [
1324	[
1325	'name' => 'show_date',
1326	'value' => 'yes'
1327	],
1328	[
1329	'name' => 'show_reading_time',
1330	'value' => 'yes'
1331	]
1332	]
1333	],
1334	]
1335	);
1336
1337	$this->add_control(
1338	'date_color',
1339	[
1340	'label' => esc_html__('Color', 'ultimate-post-kit'),
1341	'type' => Controls_Manager::COLOR,
1342	'selectors' => [
1343	'{{WRAPPER}} .upk-alex-grid .upk-meta .upk-date, {{WRAPPER}} .upk-alex-grid .upk-meta .upk-post-time, {{WRAPPER}} .upk-alex-grid .upk-meta .upk-reading-time' => 'color: {{VALUE}};',
1344	],
1345	'conditions' => [
1346	'relation' => 'or',
1347	'terms' => [
1348	[
1349	'name' => 'show_date',
1350	'value' => 'yes'
1351	],
1352	[
1353	'name' => 'show_reading_time',
1354	'value' => 'yes'
1355	]
1356	]
1357	],
1358	]
1359	);
1360
1361	$this->add_responsive_control(
1362	'meta_spacing',
1363	[
1364	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
1365	'type' => Controls_Manager::SLIDER,
1366	'range' => [
1367	'px' => [
1368	'min' => 0,
1369	'max' => 50,
1370	],
1371	],
1372	'selectors' => [
1373	'{{WRAPPER}} .upk-alex-grid .upk-meta .upk-date-reading-wrap > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
1374	],
1375	'condition' => [
1376	'show_reading_time' => 'yes',
1377	],
1378	]
1379	);
1380
1381	$this->add_group_control(
1382	Group_Control_Typography::get_type(),
1383	[
1384	'name' => 'date_typography',
1385	'label' => esc_html__('Typography', 'ultimate-post-kit'),
1386	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-meta .upk-date, {{WRAPPER}} .upk-alex-grid .upk-meta .upk-post-time, {{WRAPPER}} .upk-alex-grid .upk-meta .upk-reading-time',
1387	'conditions' => [
1388	'relation' => 'or',
1389	'terms' => [
1390	[
1391	'name' => 'show_date',
1392	'value' => 'yes'
1393	],
1394	[
1395	'name' => 'show_reading_time',
1396	'value' => 'yes'
1397	]
1398	]
1399	],
1400	]
1401	);
1402
1403	$this->end_controls_tab();
1404	$this->end_controls_tabs();
1405
1406	$this->end_controls_section();
1407
1408	$this->start_controls_section(
1409	'section_style_post_format',
1410	[
1411	'label' => esc_html__('Post Format', 'ultimate-post-kit'),
1412	'tab' => Controls_Manager::TAB_STYLE,
1413	'condition' => [
1414	'show_post_format' => 'yes'
1415	]
1416	]
1417	);
1418
1419	$this->add_control(
1420	'post_format_color',
1421	[
1422	'label' => esc_html__('Color', 'ultimate-post-kit'),
1423	'type' => Controls_Manager::COLOR,
1424	'selectors' => [
1425	'{{WRAPPER}} .upk-alex-grid .upk-post-format a' => 'color: {{VALUE}};',
1426	],
1427	]
1428	);
1429
1430	$this->add_control(
1431	'overlay_blur_effect_post_format',
1432	[
1433	'label' => esc_html__('Glassmorphism', 'ultimate-post-kit'),
1434	'type' => Controls_Manager::SWITCHER,
1435	// translators: %1s: Opening anchor tag with link to MDN backdrop-filter documentation, %2s: Closing anchor tag
1436	'description' => sprintf(__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1s look here %2s', 'ultimate-post-kit'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),
1437	'default' => 'yes',
1438	'separator' => 'before'
1439	]
1440	);
1441
1442	$this->add_control(
1443	'overlay_blur_level_post_format',
1444	[
1445	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
1446	'type' => Controls_Manager::SLIDER,
1447	'range' => [
1448	'px' => [
1449	'min' => 0,
1450	'step' => 1,
1451	'max' => 50,
1452	]
1453	],
1454	'default' => [
1455	'size' => 10
1456	],
1457	'selectors' => [
1458	'{{WRAPPER}} .upk-alex-grid .upk-post-format a' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
1459	],
1460	'condition' => [
1461	'overlay_blur_effect_post_format' => 'yes'
1462	]
1463	]
1464	);
1465
1466	$this->add_group_control(
1467	Group_Control_Background::get_type(),
1468	[
1469	'name' => 'post_format_background',
1470	'label' => esc_html__('Background', 'ultimate-post-kit'),
1471	'types' => ['classic', 'gradient'],
1472	'exclude' => ['image'],
1473	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-post-format a',
1474	'fields_options' => [
1475	'background' => [
1476	'default' => 'classic',
1477	],
1478	'color' => [
1479	'default' => 'rgba(43, 45, 66, 0.3)',
1480	],
1481	]
1482	]
1483	);
1484
1485	$this->add_group_control(
1486	Group_Control_Border::get_type(),
1487	[
1488	'name' => 'post_format_border',
1489	'selector' => '{{WRAPPER}} .upk-alex-grid .upk-post-format a',
1490	'separator' => 'before'
1491	]
1492	);
1493
1494	$this->add_responsive_control(
1495	'post_format_border_radius',
1496	[
1497	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1498	'type' => Controls_Manager::DIMENSIONS,
1499	'size_units' => ['px', '%'],
1500	'selectors' => [
1501	'{{WRAPPER}} .upk-alex-grid .upk-post-format a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1502	],
1503	]
1504	);
1505
1506	$this->add_responsive_control(
1507	'post_format_padding',
1508	[
1509	'label' => esc_html__('Padding', 'ultimate-post-kit'),
1510	'type' => Controls_Manager::DIMENSIONS,
1511	'size_units' => ['px', 'em', '%'],
1512	'selectors' => [
1513	'{{WRAPPER}} .upk-alex-grid .upk-post-format a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1514	],
1515	]
1516	);
1517
1518	$this->add_responsive_control(
1519	'post_format_margin',
1520	[
1521	'label' => esc_html__('Margin', 'ultimate-post-kit'),
1522	'type' => Controls_Manager::DIMENSIONS,
1523	'size_units' => ['px', 'em', '%'],
1524	'selectors' => [
1525	'{{WRAPPER}} .upk-alex-grid .upk-post-format' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1526	],
1527	]
1528	);
1529
1530	$this->add_responsive_control(
1531	'post_format_size',
1532	[
1533	'label' => esc_html__('Size', 'ultimate-post-kit'),
1534	'type' => Controls_Manager::SLIDER,
1535	'range' => [
1536	'px' => [
1537	'min' => 0,
1538	'max' => 50,
1539	],
1540	],
1541	'selectors' => [
1542	'{{WRAPPER}} .upk-alex-grid .upk-post-format a' => 'font-size: {{SIZE}}{{UNIT}};',
1543	],
1544	]
1545	);
1546
1547	$this->end_controls_section();
1548
1549	//Global Pagination Controls
1550	$this->register_pagination_controls();
1551
1552	//Global ajax style controls
1553	$this->register_ajax_loadmore_style_controls();
1554	}
1555
1556	/**
1557	* Get post query builder arguments
1558	*/
1559	public function query_posts( $posts_per_page ) {
1560	$settings = $this->get_settings();
1561	$posts_per_page = isset( $posts_per_page ) ? (int) $posts_per_page : 0;
1562	$args = $this->getGroupControlQueryArgs();
1563	$is_current_query = ( ! empty( $settings['posts_source'] ) && $settings['posts_source'] === 'current_query' );
1564
1565	if ( $is_current_query ) {
1566	unset( $args['offset'] );
1567	unset( $args['no_found_rows'] );
1568	$posts_per_page = 0;
1569	}
1570
1571	if ( $posts_per_page > 0 ) {
1572	$args['posts_per_page'] = $posts_per_page;
1573	} else {
1574	$args['posts_per_page'] = (int) get_option( 'posts_per_page', 10 );
1575	}
1576
1577	if ( $settings['show_pagination'] ) {
1578	$args['paged'] = max( 1, (int) get_query_var( 'paged' ), (int) get_query_var( 'page' ) );
1579	}
1580
1581	$this->_query = new \WP_Query( $args );
1582	}
1583
1584	public function render_readmore() {
1585	if (!$this->get_settings('show_readmore')) {
1586	return;
1587	}
1588
1589	?>
1590	<div class="upk-button-wrap">
1591	<a
1592	href="<?php echo esc_url(get_permalink()); ?>"
1593	class="upk-readmore"
1594	aria-label="<?php echo esc_attr__( 'Read More Button', 'ultimate-post-kit' ); ?>"
1595	>
1596	<span class="upk-readmore-icon"><span></span></span>
1597	</a>
1598	</div>
1599	<?php
1600	}
1601
1602	public function render_author_date() {
1603	$settings = $this->get_settings_for_display();
1604
1605	?>
1606	<?php if ($settings['show_author'] or $settings['show_date'] or $settings['show_time'] or $settings['show_reading_time']) : ?>
1607	<div class="upk-meta">
1608	<?php if ($settings['show_author']) : ?>
1609	<div class="upk-author-img">
1610	<?php echo get_avatar(get_the_author_meta('ID'), 48); ?>
1611	</div>
1612	<?php endif; ?>
1613	<div>
1614	<?php if ($settings['show_author']) : ?>
1615	<div class="upk-author-name">
1616	<a
1617	href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>"
1618	aria-label="<?php echo esc_attr( 'View all posts by ' . get_the_author() ); ?>"
1619	>
1620	<?php echo esc_html( get_the_author() ); ?>
1621	</a>
1622	</div>
1623	<?php endif; ?>
1624
1625	<div class="upk-flex upk-flex-middle upk-date-reading-wrap">
1626	<?php if ('yes' === $settings['show_date']) : ?>
1627	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1628	<?php $this->render_date(); ?>
1629	</div>
1630	<?php endif; ?>
1631
1632	<?php if (_is_upk_pro_activated()) :
1633	if ('yes' === $settings['show_reading_time']) : ?>
1634	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1635	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
1636	</div>
1637	<?php endif; ?>
1638	<?php endif; ?>
1639	</div>
1640
1641	</div>
1642	</div>
1643	<?php endif; ?>
1644
1645	<?php
1646	}
1647
1648	public function render_post_grid_item($post_id, $image_size) {
1649	$settings = $this->get_settings_for_display();
1650
1651	if ('yes' == $settings['global_link']) {
1652	$this->add_render_attribute('grid-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
1653	}
1654
1655	$this->add_render_attribute('grid-item', 'class', 'upk-item', true);
1656
1657	?>
1658	<div <?php $this->print_render_attribute_string('grid-item'); ?>>
1659	<div class="upk-image-wrap">
1660	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1661
1662	<?php $this->render_author_date(); ?>
1663
1664	<?php $this->render_post_format(); ?>
1665
1666	<div class="upk-content-wrap">
1667
1668	<div class="upk-content">
1669	<?php $this->render_category(); ?>
1670	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1671	</div>
1672
1673	<?php $this->render_readmore(); ?>
1674
1675	</div>
1676	</div>
1677	</div>
1678	<?php
1679	}
1680
1681	protected function render() {
1682	$settings = $this->get_settings_for_display();
1683
1684	if ($settings['grid_style'] == '2') {
1685	$this->query_posts($settings['item_limit_2']['size']);
1686	} else {
1687	$this->query_posts($settings['item_limit']['size']);
1688	}
1689
1690	$wp_query = $this->get_query();
1691
1692	if (!$wp_query->found_posts) {
1693	return;
1694	}
1695
1696	$this->add_render_attribute('grid-wrap', 'class', 'upk-alex-wrap upk-ajax-grid-wrap');
1697	$this->add_render_attribute('grid-wrap', 'class', 'upk-content-' . $settings['content_position']);
1698	$this->add_render_attribute('grid-wrap', 'class', 'upk-style-' . $settings['grid_style']);
1699
1700	$this->add_render_attribute(
1701	[
1702	'upk-alex-grid' => [
1703	'class' => 'upk-alex-grid upk-ajax-grid',
1704	'data-loadmore' => [
1705	wp_json_encode(array_filter([
1706	'loadmore_enable' => $settings['ajax_loadmore_enable'],
1707	'loadmore_btn' => $settings['ajax_loadmore_btn'],
1708	'infinite_scroll' => $settings['ajax_loadmore_infinite_scroll'],
1709	]))
1710
1711	]
1712	]
1713	]
1714	);
1715
1716	if ($settings['ajax_loadmore_enable'] == 'yes') {
1717	$ajax_settings = [
1718	'posts_source' => isset($settings['posts_source']) ? $settings['posts_source'] : 'post',
1719	'posts_per_page' => isset($posts_load) ? $posts_load : 6,
1720	'ajax_item_load' => isset($settings['ajax_loadmore_items']) ? $settings['ajax_loadmore_items'] : 3,
1721	'posts_selected_ids' => isset($settings['posts_selected_ids']) ? $settings['posts_selected_ids'] : '',
1722	'posts_include_by' => isset($settings['posts_include_by']) ? $settings['posts_include_by'] : '',
1723	'posts_include_author_ids' => isset($settings['posts_include_author_ids']) ? $settings['posts_include_author_ids'] : '',
1724	'posts_include_term_ids' => isset($settings['posts_include_term_ids']) ? $settings['posts_include_term_ids'] : '',
1725	'posts_exclude_by' => isset($settings['posts_exclude_by']) ? $settings['posts_exclude_by'] : '',
1726	'posts_exclude_ids' => isset($settings['posts_exclude_ids']) ? $settings['posts_exclude_ids'] : '',
1727	'posts_exclude_author_ids' => isset($settings['posts_exclude_author_ids']) ? $settings['posts_exclude_author_ids'] : '',
1728	'posts_exclude_term_ids' => isset($settings['posts_exclude_term_ids']) ? $settings['posts_exclude_term_ids'] : '',
1729	'posts_offset' => isset($settings['posts_offset']) ? $settings['posts_offset'] : '',
1730	'posts_select_date' => isset($settings['posts_select_date']) ? $settings['posts_select_date'] : '',
1731	'posts_date_before' => isset($settings['posts_date_before']) ? $settings['posts_date_before'] : '',
1732	'posts_date_after' => isset($settings['posts_date_after']) ? $settings['posts_date_after'] : '',
1733	'posts_orderby' => isset($settings['posts_orderby']) ? $settings['posts_orderby'] : '',
1734	'posts_order' => isset($settings['posts_order']) ? $settings['posts_order'] : '',
1735	'posts_ignore_sticky_posts' => isset($settings['posts_ignore_sticky_posts']) ? $settings['posts_ignore_sticky_posts'] : '',
1736	'posts_only_with_featured_image'=> isset($settings['posts_only_with_featured_image']) ? $settings['posts_only_with_featured_image'] : '',
1737	// Grid Settings
1738	'show_title' => isset($settings['show_title']) ? $settings['show_title'] : 'yes',
1739	'title_tags' => isset($settings['title_tags']) ? $settings['title_tags'] : 'h3',
1740	'show_author' => isset($settings['show_author']) ? $settings['show_author'] : 'yes',
1741	'show_date' => isset($settings['show_date']) ? $settings['show_date'] : 'yes',
1742	'show_time' => isset($settings['show_time']) ? $settings['show_time'] : 'no',
1743	'show_category' => isset($settings['show_category']) ? $settings['show_category'] : 'yes',
1744	'show_readmore' => isset($settings['show_readmore']) ? $settings['show_readmore'] : 'yes',
1745	'show_reading_time' => isset($settings['show_reading_time']) ? $settings['show_reading_time'] : 'no',
1746	'avg_reading_speed' => isset($settings['avg_reading_speed']) ? $settings['avg_reading_speed'] : 200,
1747	'hide_seconds' => isset($settings['hide_seconds']) ? $settings['hide_seconds'] : 'no',
1748	'hide_minutes' => isset($settings['hide_minutes']) ? $settings['hide_minutes'] : 'no',
1749	'upk_link_new_tab' => isset($settings['upk_link_new_tab']) ? $settings['upk_link_new_tab'] : 'no',
1750	'meta_separator' => isset($settings['meta_separator']) ? $settings['meta_separator'] : '\|',
1751	'human_diff_time' => isset($settings['human_diff_time']) ? $settings['human_diff_time'] : 'no',
1752	'human_diff_time_short' => isset($settings['human_diff_time_short']) ? $settings['human_diff_time_short'] : 'no',
1753	'show_post_format' => isset($settings['show_post_format']) ? $settings['show_post_format'] : 'no',
1754	'title_style' => isset($settings['title_style']) ? $settings['title_style'] : 'underline',
1755	'global_link' => isset($settings['global_link']) ? $settings['global_link'] : 'no',
1756	];
1757
1758	$this->add_render_attribute(
1759	[
1760	'upk-alex-grid' => [
1761	'data-settings' => [
1762	wp_json_encode($ajax_settings)
1763	]
1764	]
1765	]
1766	);
1767	}
1768
1769	if (isset($settings['upk_in_animation_show']) && ($settings['upk_in_animation_show'] == 'yes')) {
1770	$this->add_render_attribute('grid-wrap', 'class', 'upk-in-animation');
1771	if (isset($settings['upk_in_animation_delay']['size'])) {
1772	$this->add_render_attribute('grid-wrap', 'data-in-animation-delay', $settings['upk_in_animation_delay']['size']);
1773	}
1774	}
1775
1776	?>
1777
1778	<div <?php $this->print_render_attribute_string('upk-alex-grid'); ?>>
1779	<div <?php $this->print_render_attribute_string('grid-wrap'); ?>>
1780
1781	<?php while ($wp_query->have_posts()) :
1782	$wp_query->the_post();
1783
1784	$thumbnail_size = $settings['primary_thumbnail_size'];
1785
1786	?>
1787
1788	<?php $this->render_post_grid_item(get_the_ID(), $thumbnail_size); ?>
1789
1790	<?php endwhile; ?>
1791
1792	</div>
1793	</div>
1794
1795	<?php
1796	$this->render_ajax_loadmore();
1797
1798	if ($settings['show_pagination']) { ?>
1799	<div class="ep-pagination">
1800	<?php ultimate_post_kit_post_pagination($wp_query, $this->get_id()); ?>
1801	</div>
1802	<?php
1803	}
1804	wp_reset_postdata();
1805	}
1806	}
1807