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

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