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

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