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.0, at modules/alex-grid/widgets/alex-grid.php

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