← All changes | includes/utils/gallery-component.php +1185 -1030 1.0.15 → 1.3.17 View file →

		@@ -1,5 +1,6 @@
1	1	<?php
	2	+
2	3	namespace UiCoreElements\Utils;
3	4
4	5	use Elementor\Controls_Manager;
5	6	use Elementor\Utils;
		@@ -9,12 +10,15 @@
9	10	use Elementor\Group_Control_Box_Shadow;
10	11	use Elementor\Group_Control_Border;
11	12	use Elementor\Group_Control_Typography;
12	13	use Elementor\Group_Control_Background;
	14	+use Elementor\Plugin;
13	15	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
14	16	use UiCoreElements\Helper;
15	17
	18	+use UiCoreElements\Utils\Carousel_Trait;
16	19
	20	+
17	21	defined('ABSPATH') || exit();
18	22
19	23	/**
20	24	* Gallery Component
		@@ -22,1146 +26,1297 @@
22	26	* @since 1.0.14
23	27	*/
24	28
25	29
26		-trait Gallery_Trait {
	30	+trait Gallery_Trait
	31	+{
27	32
	33	+ use Carousel_Trait;
	34	+
28	35	// Controls Registration
29		- function TRAIT_register_gallery_repeater_controls($title)
30		- {
31		- $this->start_controls_section(
32		- 'content_section',
33		- [
34		- 'label' => __($title, 'uicore-elements'),
35		- 'tab' => Controls_Manager::TAB_CONTENT,
36		- ]
37		- );
	36	+ function TRAIT_register_gallery_repeater_controls($title)
	37	+ {
	38	+ $this->start_controls_section(
	39	+ 'content_section',
	40	+ [
	41	+ /* translators: %s: Control title */
	42	+ 'label' => esc_html(sprintf('%s', $title), 'uicore-elements'),
	43	+ 'tab' => Controls_Manager::TAB_CONTENT,
	44	+ ]
	45	+ );
38	46
39		- $repeater = new Repeater();
40		- $repeater->add_control(
41		- 'item_image',
	47	+ $repeater = new Repeater();
	48	+ $repeater->add_control(
	49	+ 'item_image',
	50	+ [
	51	+ 'label' => esc_html__('Image', 'uicore-elements'),
	52	+ 'type' => Controls_Manager::MEDIA,
	53	+ 'default' => [
	54	+ 'url' => Utils::get_placeholder_image_src(),
	55	+ ],
	56	+ ]
	57	+ );
	58	+ $repeater->add_control(
	59	+ 'item_url',
	60	+ [
	61	+ 'label' => esc_html__('Link', 'uicore-elements'),
	62	+ 'type' => Controls_Manager::URL,
	63	+ 'placeholder' => 'https://your-link.com',
	64	+ ]
	65	+ );
	66	+ $repeater->add_control(
	67	+ 'item_title',
	68	+ [
	69	+ 'label' => esc_html__('Title', 'uicore-elements'),
	70	+ 'type' => Controls_Manager::TEXT,
	71	+ 'default' => esc_html__('Title', 'uicore-elements'),
	72	+ 'label_block' => true,
	73	+ ]
	74	+ );
	75	+ $repeater->add_control(
	76	+ 'item_description',
	77	+ [
	78	+ 'label' => esc_html__('Description', 'uicore-elements'),
	79	+ 'type' => Controls_Manager::TEXTAREA,
	80	+ 'label_block' => true,
	81	+ ]
	82	+ );
	83	+ $repeater->add_control(
	84	+ 'item_badge',
	85	+ [
	86	+ 'label' => esc_html__('Badge', 'uicore-elements'),
	87	+ 'type' => Controls_Manager::TEXT,
	88	+ 'label_block' => true,
	89	+ ]
	90	+ );
	91	+ $repeater->add_control(
	92	+ 'item_tags',
	93	+ [
	94	+ 'label' => esc_html__('Tags', 'uicore-elements'),
	95	+ 'type' => Controls_Manager::TEXT,
	96	+ 'description' => esc_html__('Separate tags with commas', 'uicore-elements'),
	97	+ 'label_block' => true,
	98	+ ]
	99	+ );
	100	+
	101	+ $this->add_control(
	102	+ 'gallery_items',
	103	+ [
	104	+ 'label' => esc_html__('Items', 'uicore-elements'),
	105	+ 'type' => Controls_Manager::REPEATER,
	106	+ 'fields' => $repeater->get_controls(),
	107	+ 'default' => [
42	108	[
43		- 'label' => esc_html__('Image', 'uicore-elements'),
44		- 'type' => Controls_Manager::MEDIA,
45		- 'default' => [
46		- 'url' => Utils::get_placeholder_image_src(),
47		- ],
48		- ]
49		- );
50		- $repeater->add_control(
51		- 'item_url',
	109	+ 'item_title' => esc_html__('Item #1', 'uicore-elements'),
	110	+ ],
52	111	[
53		- 'label' => esc_html__('Link', 'uicore-elements'),
54		- 'type' => Controls_Manager::URL,
55		- 'placeholder' => 'https://your-link.com',
56		- ]
57		- );
58		- $repeater->add_control(
59		- 'item_title',
	112	+ 'item_title' => esc_html__('Item #2', 'uicore-elements'),
	113	+ ],
60	114	[
61		- 'label' => esc_html__('Title', 'uicore-elements'),
62		- 'type' => Controls_Manager::TEXT,
63		- 'default' => esc_html__('Title', 'uicore-elements'),
64		- 'label_block' => true,
65		- ]
66		- );
67		- $repeater->add_control(
68		- 'item_description',
	115	+ 'item_title' => esc_html__('Item #3', 'uicore-elements'),
	116	+ ],
69	117	[
70		- 'label' => esc_html__('Description', 'uicore-elements'),
71		- 'type' => Controls_Manager::TEXTAREA,
72		- 'label_block' => true,
73		- ]
74		- );
75		- $repeater->add_control(
76		- 'item_badge',
	118	+ 'item_title' => esc_html__('Item #4', 'uicore-elements'),
	119	+ ],
77	120	[
78		- 'label' => esc_html__('Badge', 'uicore-elements'),
79		- 'type' => Controls_Manager::TEXT,
80		- 'label_block' => true,
81		- ]
82		- );
83		- $repeater->add_control(
84		- 'item_tags',
	121	+ 'item_title' => esc_html__('Item #5', 'uicore-elements'),
	122	+ ],
85	123	[
86		- 'label' => esc_html__('Tags', 'uicore-elements'),
87		- 'type' => Controls_Manager::TEXT,
88		- 'description' => esc_html__('Separate tags with commas', 'uicore-elements'),
89		- 'label_block' => true,
90		- ]
91		- );
	124	+ 'item_title' => esc_html__('Item #6', 'uicore-elements'),
	125	+ ],
	126	+ ],
	127	+ 'title_field' => '{{{ item_title }}}',
	128	+ ]
	129	+ );
92	130
93		- $this->add_control(
94		- 'gallery_items',
95		- [
96		- 'label' => esc_html__('Items', 'uicore-elements'),
97		- 'type' => Controls_Manager::REPEATER,
98		- 'fields' => $repeater->get_controls(),
99		- 'default' => [
100		- [
101		- 'item_title' => esc_html__('Item #1', 'uicore-elements'),
102		- ],
103		- [
104		- 'item_title' => esc_html__('Item #2', 'uicore-elements'),
105		- ],
106		- [
107		- 'item_title' => esc_html__('Item #3', 'uicore-elements'),
108		- ],
109		- ],
110		- 'title_field' => '{{{ item_title }}}',
111		- ]
112		- );
	131	+ $this->end_controls_section();
	132	+ }
	133	+ function TRAIT_register_additional_controls($carousel = false)
	134	+ {
	135	+ $this->start_controls_section(
	136	+ 'additional_section',
	137	+ [
	138	+ 'label' => esc_html__('Additional', 'uicore-elements'),
	139	+ 'tab' => Controls_Manager::TAB_CONTENT,
	140	+ ]
	141	+ );
	142	+ $this->add_control(
	143	+ 'layout',
	144	+ [
	145	+ 'label' => esc_html__('Layout', 'uicore-elements'),
	146	+ 'type' => Controls_Manager::SELECT,
	147	+ 'default' => '',
	148	+ 'prefix_class' => '',
	149	+ 'render_type' => 'template',
	150	+ 'options' => [
	151	+ '' => esc_html__('Default', 'uicore-elements'),
	152	+ 'ui-e-overlay' => esc_html__('Overlay', 'uicore-elements'),
	153	+ ],
	154	+ ]
	155	+ );
113	156
114		- $this->end_controls_section();
115		- }
116		- function TRAIT_register_additional_controls($carousel = false)
117		- {
118		- $this->start_controls_section(
119		- 'additional_section',
	157	+ $this->add_control(
	158	+ 'item_overflow',
	159	+ [
	160	+ 'label' => esc_html__('Hide overflow', 'uicore-elements'),
	161	+ 'type' => Controls_Manager::SWITCHER,
	162	+ 'default' => 'no',
	163	+ 'prefix_class' => 'ui-e-overflow-',
	164	+ 'description' => __('Useful if you have an animation, on an image, for example, that surpasses the item area and you want to hide it.', 'uicore-elements'),
	165	+ 'condition' => [
	166	+ 'layout' => '',
	167	+ ]
	168	+ ]
	169	+ );
	170	+
	171	+ $this->add_control(
	172	+ 'hide_tags',
	173	+ [
	174	+ 'label' => __('Hide item tags', 'uicore-elements'),
	175	+ 'type' => Controls_Manager::SWITCHER,
	176	+ 'separator' => 'before',
	177	+ 'default' => 'no',
	178	+ ]
	179	+ );
	180	+
	181	+ $this->add_control(
	182	+ 'hide_title',
	183	+ [
	184	+ 'label' => __('Hide title', 'uicore-elements'),
	185	+ 'type' => Controls_Manager::SWITCHER,
	186	+ 'default' => 'no',
	187	+ ]
	188	+ );
	189	+
	190	+ $this->add_control(
	191	+ 'hide_description',
	192	+ [
	193	+ 'label' => __('Hide description', 'uicore-elements'),
	194	+ 'type' => Controls_Manager::SWITCHER,
	195	+ 'default' => 'no',
	196	+ ]
	197	+ );
	198	+
	199	+ $this->add_control(
	200	+ 'lightbox',
	201	+ [
	202	+ 'label' => esc_html__('Enable Lightbox', 'uicore-elements') . UICORE_ELEMENTS_NEW_OPTION, // TODO: remove 3 releases after 1.3.15
	203	+ 'type' => Controls_Manager::SWITCHER,
	204	+ 'default' => 'no',
	205	+ ]
	206	+ );
	207	+
	208	+ if (! $carousel) {
	209	+ $this->add_control(
	210	+ 'filters',
120	211	[
121		- 'label' => esc_html__('Additional', 'uicore-elements'),
122		- 'tab' => Controls_Manager::TAB_CONTENT,
	212	+ 'label' => __('Use filters', 'uicore-elements'),
	213	+ 'type' => Controls_Manager::SWITCHER,
	214	+ 'default' => 'no',
123	215	]
124	216	);
125		- $this->add_control(
126		- 'layout',
127		- [
128		- 'label' => esc_html__('Layout', 'uicore-elements'),
129		- 'type' => Controls_Manager::SELECT,
130		- 'default' => '',
131		- 'prefix_class' => '',
132		- 'render_type' => 'template',
133		- 'options' => [
134		- '' => esc_html__('Default', 'uicore-elements'),
135		- 'ui-e-overlay' => esc_html__('Overlay', 'uicore-elements'),
136		- ],
	217	+ $this->add_control(
	218	+ 'clear_text',
	219	+ [
	220	+ 'label' => __('Clear Text', 'uicore-elements'),
	221	+ 'type' => Controls_Manager::TEXT,
	222	+ 'default' => __('All', 'uicore-elements'),
	223	+ 'placeholder' => __('Clear filter text', 'uicore-elements'),
	224	+ 'condition' => [
	225	+ 'filters' => 'yes'
137	226	]
138		- );
	227	+ ]
	228	+ );
	229	+ }
139	230
140		- $this->add_control(
141		- 'item_overflow',
142		- [
143		- 'label' => esc_html__('Hide overflow', 'uicore-elements'),
144		- 'type' => Controls_Manager::SWITCHER,
145		- 'default' => 'no',
146		- 'prefix_class' => 'ui-e-overflow-',
147		- 'description' => __('Useful if you have an animation, on an image, for example, that surpasses the item area and you want to hide it.', 'uicore-elements'),
148		- 'condition' => [
149		- 'layout' => '',
150		- ]
151		- ]
152		- );
	231	+ $this->add_responsive_control(
	232	+ 'item_alignment',
	233	+ [
	234	+ 'label' => esc_html__('Alignment', 'uicore-elements') . UICORE_ELEMENTS_NEW_OPTION, // TODO: remove 3 releases after 1.3.15
	235	+ 'type' => Controls_Manager::CHOOSE,
	236	+ 'options' => [
	237	+ 'start' => [
	238	+ 'title' => esc_html__('Left', 'uicore-elements'),
	239	+ 'icon' => 'eicon-text-align-left',
	240	+ ],
	241	+ 'center' => [
	242	+ 'title' => esc_html__('Center', 'uicore-elements'),
	243	+ 'icon' => 'eicon-text-align-center',
	244	+ ],
	245	+ 'end' => [
	246	+ 'title' => esc_html__('Right', 'uicore-elements'),
	247	+ 'icon' => 'eicon-text-align-right',
	248	+ ],
	249	+ ],
	250	+ 'separator' => 'before',
	251	+ 'default' => is_rtl() ? 'end' : 'start',
	252	+ 'selectors' => [
	253	+ '{{WRAPPER}} .ui-e-content' => 'text-align: {{VALUE}};',
	254	+ '{{WRAPPER}} .ui-e-title-wrapper' => 'justify-content: {{VALUE}};',
	255	+ ],
	256	+ ]
	257	+ );
153	258
154		- $this->add_control(
155		- 'hide_tags',
156		- [
157		- 'label' => __('Hide item tags', 'uicore-elements'),
158		- 'type' => Controls_Manager::SWITCHER,
159		- 'separator' => 'before',
160		- 'default' => 'no',
161		- ]
162		- );
	259	+ $this->add_control(
	260	+ 'title_tag',
	261	+ [
	262	+ 'label' => esc_html__('Title Tag', 'uicore-elements'),
	263	+ 'type' => Controls_Manager::SELECT,
	264	+ 'default' => 'h4',
	265	+ 'options' => Helper::get_title_tags(),
	266	+ ]
	267	+ );
	268	+ $this->add_control(
	269	+ 'image_size',
	270	+ [
	271	+ 'label' => esc_html__('Image Size', 'uicore-elements'),
	272	+ 'type' => Controls_Manager::SELECT,
	273	+ 'default' => 'uicore-medium',
	274	+ 'options' => Helper::get_images_sizes(),
	275	+ ]
	276	+ );
	277	+ $this->add_control(
	278	+ 'content_position',
	279	+ [
	280	+ 'label' => esc_html__('Content Position', 'uicore-elements'),
	281	+ 'type' => Controls_Manager::SELECT,
	282	+ 'default' => 'top',
	283	+ 'prefix_class' => 'ui-e-content-',
	284	+ 'options' => [
	285	+ 'top' => esc_html__('Top', 'uicore-elements'),
	286	+ 'center' => esc_html__('Center', 'uicore-elements'),
	287	+ 'bottom' => esc_html__('Bottom', 'uicore-elements'),
	288	+ ],
	289	+ 'condition' => [
	290	+ 'layout' => 'ui-e-overlay',
	291	+ ],
	292	+ 'selectors' => [
	293	+ '{{WRAPPER}} .ui-e-content' => 'text-align:' . is_rtl() ? 'right' : 'left' . ';',
	294	+ '{{WRAPPER}} .ui-e-title-wrapper' => 'justify-content:' . is_rtl() ? 'right' : 'left' . ';',
	295	+ ],
	296	+ ]
	297	+ );
	298	+ $this->add_control(
	299	+ 'badge_position',
	300	+ [
	301	+ 'label' => esc_html__('Badge Position', 'uicore-elements'),
	302	+ 'type' => Controls_Manager::SELECT,
	303	+ 'default' => is_rtl() ? 'ui-e-badge-start-right' : 'ui-e-badge-start-left',
	304	+ 'prefix_class' => '',
	305	+ 'render_type' => 'template', // without it, loading a page with image and changing to title won't work
	306	+ 'options' => [
	307	+ '' => __('After title', 'uicore-elements'),
	308	+ 'ui-e-badge-start-left' => __('Image top left', 'uicore-elements'),
	309	+ 'ui-e-badge-start-right' => __('Image top right', 'uicore-elements'),
	310	+ 'ui-e-badge-end-left' => __('Image bottom left', 'uicore-elements'),
	311	+ 'ui-e-badge-end-right' => __('Image bottom right', 'uicore-elements'),
	312	+ ],
	313	+ ]
	314	+ );
163	315
164		- if( ! $carousel ){
165		- $this->add_control(
166		- 'filters',
167		- [
168		- 'label' => __('Use filters', 'uicore-elements'),
169		- 'type' => Controls_Manager::SWITCHER,
170		- 'default' => 'no',
171		- ]
172		- );
173		- $this->add_control(
174		- 'clear_text',
175		- [
176		- 'label' => __('Clear Text', 'uicore-elements'),
177		- 'type' => Controls_Manager::TEXT,
178		- 'default' => __('All', 'uicore-elements'),
179		- 'placeholder' => __('Clear filter text', 'uicore-elements'),
180		- 'condition' => [
181		- 'filters' => 'yes'
182		- ]
183		- ]
184		- );
185		- }
	316	+ $this->end_controls_section();
	317	+ }
186	318
187		- $this->add_control(
188		- 'title_tag',
189		- [
190		- 'label' => esc_html__('Title Tag', 'uicore-elements'),
191		- 'type' => Controls_Manager::SELECT,
192		- 'default' => 'h4',
193		- 'options' => Helper::get_title_tags(),
194		- 'separator' => 'before'
195		- ]
196		- );
197		- $this->add_control(
198		- 'image_size',
199		- [
200		- 'label' => esc_html__('Image Size', 'uicore-elements'),
201		- 'type' => Controls_Manager::SELECT,
202		- 'default' => 'uicore-medium',
203		- 'options' => Helper::get_images_sizes(),
204		- ]
205		- );
206		- $this->add_control(
207		- 'badge_position',
208		- [
209		- 'label' => esc_html__('Badge Position', 'uicore-elements'),
210		- 'type' => Controls_Manager::SELECT,
211		- 'default' => 'ui-e-badge-start-left',
212		- 'prefix_class' => '',
213		- 'render_type' => 'template', // without it, loading a page with image and changing to title won't work
214		- 'options' => [
215		- '' => __('After title', 'uicore-elements'),
216		- 'ui-e-badge-start-left' => __('Image top left', 'uicore-elements'),
217		- 'ui-e-badge-start-right' => __('Image top right', 'uicore-elements'),
218		- 'ui-e-badge-end-left' => __('Image bottom left', 'uicore-elements'),
219		- 'ui-e-badge-end-right' => __('Image bottom right', 'uicore-elements'),
220		- ],
221		- ]
222		- );
	319	+ function TRAIT_register_filters_style_controls()
	320	+ {
	321	+ $this->start_controls_section(
	322	+ 'style_filters_section',
	323	+ [
	324	+ 'label' => __('Filters', 'uicore-elements'),
	325	+ 'tab' => Controls_Manager::TAB_STYLE,
	326	+ 'condition' => [
	327	+ 'filters' => 'yes',
	328	+ ],
	329	+ ]
	330	+ );
223	331
224		- $this->end_controls_section();
225		- }
226		-
227		- function TRAIT_register_filters_style_controls()
228		- {
229		- $this->start_controls_section(
230		- 'style_filters_section',
231		- [
232		- 'label' => __('Filters', 'uicore-elements'),
233		- 'tab' => Controls_Manager::TAB_STYLE,
234		- 'condition' => [
235		- 'filters' => 'yes',
	332	+ $this->add_responsive_control(
	333	+ 'filters_align',
	334	+ [
	335	+ 'label' => esc_html__('Alignment', 'uicore-elements'),
	336	+ 'type' => Controls_Manager::CHOOSE,
	337	+ 'options' => [
	338	+ 'start' => [
	339	+ 'title' => esc_html__('Left', 'uicore-elements'),
	340	+ 'icon' => 'eicon-h-align-left',
236	341	],
	342	+ 'center' => [
	343	+ 'title' => esc_html__('Center', 'uicore-elements'),
	344	+ 'icon' => 'eicon-h-align-center',
	345	+ ],
	346	+ 'end' => [
	347	+ 'title' => esc_html__('Right', 'uicore-elements'),
	348	+ 'icon' => 'eicon-h-align-right',
	349	+ ],
	350	+ ],
	351	+ 'default' => 'center',
	352	+ 'selectors' => [
	353	+ '(desktop){{WRAPPER}} .ui-e-filters' => 'justify-content: {{VALUE}}',
	354	+ '(mobile){{WRAPPER}} .ui-e-filters' => 'align-items: {{VALUE}}' // mobile version sets flex-direction as column
237	355	]
238		- );
	356	+ ]
	357	+ );
	358	+ $this->add_control(
	359	+ 'filters_bottom_space',
	360	+ [
	361	+ 'label' => __('Spacing', 'uicore-elements'),
	362	+ 'type' => Controls_Manager::SLIDER,
	363	+ 'range' => [
	364	+ 'px' => [
	365	+ 'min' => 0,
	366	+ 'max' => 50,
	367	+ ],
	368	+ ],
	369	+ 'default' => [
	370	+ 'size' => 10,
	371	+ 'unit' => 'px'
	372	+ ],
	373	+ 'selectors' => [
	374	+ '{{WRAPPER}} .ui-e-filters' => 'margin-bottom: {{SIZE}}{{UNIT}};',
	375	+ ],
	376	+ ]
	377	+ );
239	378
240		- $this->add_responsive_control(
241		- 'filters_align',
242		- [
243		- 'label' => esc_html__( 'Alignment', 'uicore-elements' ),
244		- 'type' => Controls_Manager::CHOOSE,
245		- 'options' => [
246		- 'start' => [
247		- 'title' => esc_html__( 'Left', 'uicore-elements' ),
248		- 'icon' => 'eicon-h-align-left',
249		- ],
250		- 'center' => [
251		- 'title' => esc_html__( 'Center', 'uicore-elements' ),
252		- 'icon' => 'eicon-h-align-center',
253		- ],
254		- 'end' => [
255		- 'title' => esc_html__( 'Right', 'uicore-elements' ),
256		- 'icon' => 'eicon-h-align-right',
257		- ],
258		- ],
259		- 'default' => 'center',
260		- 'selectors' => [
261		- '(desktop){{WRAPPER}} .ui-e-filters' => 'justify-content: {{VALUE}}',
262		- '(mobile){{WRAPPER}} .ui-e-filters' => 'align-items: {{VALUE}}' // mobile version sets flex-direction as column
263		- ]
264		- ]
265		- );
266		- $this->add_control(
267		- 'filters_bottom_space',
268		- [
269		- 'label' => __('Spacing', 'uicore-elements'),
270		- 'type' => Controls_Manager::SLIDER,
271		- 'range' => [
272		- 'px' => [
273		- 'min' => 0,
274		- 'max' => 50,
275		- ],
276		- ],
277		- 'default' => [
278		- 'size' => 10,
279		- 'unit' => 'px'
280		- ],
281		- 'selectors' => [
282		- '{{WRAPPER}} .ui-e-filters' => 'margin-bottom: {{SIZE}}{{UNIT}};',
283		- ],
284		- ]
285		- );
	379	+ $this->start_controls_tabs(
	380	+ 'filters_tabs',
	381	+ [
	382	+ 'condition' => [
	383	+ 'filters' => 'yes',
	384	+ ],
	385	+ ]
	386	+ );
286	387
287		- $this->start_controls_tabs(
288		- 'filters_tabs',
289		- [
290		- 'condition' => [
291		- 'filters' => 'yes',
292		- ],
293		- ]
294		- );
	388	+ $this->start_controls_tab(
	389	+ 'filters_normal_tab',
	390	+ [
	391	+ 'label' => esc_html__('Normal', 'uicore-elements'),
	392	+ ]
	393	+ );
295	394
296		- $this->start_controls_tab(
297		- 'filters_normal_tab',
298		- [
299		- 'label' => esc_html__( 'Normal', 'uicore-elements' ),
300		- ]
301		- );
	395	+ $this->add_group_control(
	396	+ Group_Control_Typography::get_type(),
	397	+ [
	398	+ 'name' => 'filters_typography',
	399	+ 'selector' => '{{WRAPPER}} .ui-e-filters button',
	400	+ ]
	401	+ );
	402	+ $this->add_control(
	403	+ 'filters_color',
	404	+ [
	405	+ 'label' => __('Color', 'uicore-elements'),
	406	+ 'type' => Controls_Manager::COLOR,
	407	+ 'selectors' => [
	408	+ '{{WRAPPER}} .ui-e-filters button' => 'color: {{VALUE}};',
	409	+ ],
	410	+ ]
	411	+ );
	412	+ $this->add_group_control(
	413	+ Group_Control_Background::get_type(),
	414	+ [
	415	+ 'name' => 'filters_background',
	416	+ 'selector' => '{{WRAPPER}} .ui-e-filters button',
	417	+ ]
	418	+ );
	419	+ $this->add_group_control(
	420	+ Group_Control_Border::get_type(),
	421	+ [
	422	+ 'name' => 'filters_border',
	423	+ 'label' => esc_html__('Border', 'uicore-elements'),
	424	+ 'selector' => '{{WRAPPER}} .ui-e-filters button',
	425	+ ]
	426	+ );
	427	+ $this->add_group_control(
	428	+ Group_Control_Box_Shadow::get_type(),
	429	+ [
	430	+ 'name' => 'filters_box_shadow',
	431	+ 'selector' => '{{WRAPPER}} .ui-e-filters button',
	432	+ ]
	433	+ );
302	434
303		- $this->add_group_control(
304		- Group_Control_Typography::get_type(),
305		- [
306		- 'name' => 'filters_typography',
307		- 'selector' => '{{WRAPPER}} .ui-e-filters button',
308		- ]
309		- );
310		- $this->add_control(
311		- 'filters_color',
312		- [
313		- 'label' => __('Color', 'uicore-elements'),
314		- 'type' => Controls_Manager::COLOR,
315		- 'selectors' => [
316		- '{{WRAPPER}} .ui-e-filters button' => 'color: {{VALUE}};',
317		- ],
318		- ]
319		- );
320		- $this->add_group_control(
321		- Group_Control_Background::get_type(),
322		- [
323		- 'name' => 'filters_background',
324		- 'selector' => '{{WRAPPER}} .ui-e-filters button',
325		- ]
326		- );
327		- $this->add_group_control(
328		- Group_Control_Border::get_type(),
329		- [
330		- 'name' => 'filters_border',
331		- 'label' => esc_html__( 'Border', 'uicore-elements' ),
332		- 'selector' => '{{WRAPPER}} .ui-e-filters button',
333		- ]
334		- );
335		- $this->add_group_control(
336		- Group_Control_Box_Shadow::get_type(),
337		- [
338		- 'name' => 'filters_box_shadow',
339		- 'selector' => '{{WRAPPER}} .ui-e-filters button',
340		- ]
341		- );
	435	+ $this->end_controls_tab();
342	436
343		- $this->end_controls_tab();
	437	+ $this->start_controls_tab(
	438	+ 'filters_hover_tab',
	439	+ [
	440	+ 'label' => esc_html__('Hover', 'uicore-elements'),
	441	+ ]
	442	+ );
344	443
345		- $this->start_controls_tab(
346		- 'filters_hover_tab',
347		- [
348		- 'label' => esc_html__( 'Hover', 'uicore-elements' ),
349		- ]
350		- );
	444	+ $this->add_control(
	445	+ 'filters_hover_color',
	446	+ [
	447	+ 'label' => __('Color', 'uicore-elements'),
	448	+ 'type' => Controls_Manager::COLOR,
	449	+ 'selectors' => [
	450	+ '{{WRAPPER}} .ui-e-filters button:hover' => 'color: {{VALUE}};',
	451	+ ],
	452	+ ]
	453	+ );
	454	+ $this->add_group_control(
	455	+ Group_Control_Background::get_type(),
	456	+ [
	457	+ 'name' => 'filters_hover_background',
	458	+ 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
	459	+ ]
	460	+ );
	461	+ $this->add_group_control(
	462	+ Group_Control_Border::get_type(),
	463	+ [
	464	+ 'name' => 'filters_hover_border',
	465	+ 'label' => esc_html__('Border', 'uicore-elements'),
	466	+ 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
	467	+ ]
	468	+ );
	469	+ $this->add_group_control(
	470	+ Group_Control_Box_Shadow::get_type(),
	471	+ [
	472	+ 'name' => 'filters_hover_box_shadow',
	473	+ 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
	474	+ ]
	475	+ );
351	476
352		- $this->add_control(
353		- 'filters_hover_color',
354		- [
355		- 'label' => __('Color', 'uicore-elements'),
356		- 'type' => Controls_Manager::COLOR,
357		- 'selectors' => [
358		- '{{WRAPPER}} .ui-e-filters button:hover' => 'color: {{VALUE}};',
359		- ],
360		- ]
361		- );
362		- $this->add_group_control(
363		- Group_Control_Background::get_type(),
364		- [
365		- 'name' => 'filters_hover_background',
366		- 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
367		- ]
368		- );
369		- $this->add_group_control(
370		- Group_Control_Border::get_type(),
371		- [
372		- 'name' => 'filters_hover_border',
373		- 'label' => esc_html__( 'Border', 'uicore-elements' ),
374		- 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
375		- ]
376		- );
377		- $this->add_group_control(
378		- Group_Control_Box_Shadow::get_type(),
379		- [
380		- 'name' => 'filters_hover_box_shadow',
381		- 'selector' => '{{WRAPPER}} .ui-e-filters button:hover',
382		- ]
383		- );
	477	+ $this->end_controls_tab();
384	478
385		- $this->end_controls_tab();
	479	+ $this->start_controls_tab(
	480	+ 'filters_active_tab',
	481	+ [
	482	+ 'label' => esc_html__('Active', 'uicore-elements'),
	483	+ ]
	484	+ );
386	485
387		- $this->start_controls_tab(
388		- 'filters_active_tab',
389		- [
390		- 'label' => esc_html__( 'Active', 'uicore-elements' ),
391		- ]
392		- );
	486	+ $this->add_control(
	487	+ 'filters_active_color',
	488	+ [
	489	+ 'label' => __('Color', 'uicore-elements'),
	490	+ 'type' => Controls_Manager::COLOR,
	491	+ 'selectors' => [
	492	+ '{{WRAPPER}} .ui-e-filters button.ui-e-active' => 'color: {{VALUE}};',
	493	+ ],
	494	+ ]
	495	+ );
	496	+ $this->add_group_control(
	497	+ Group_Control_Background::get_type(),
	498	+ [
	499	+ 'name' => 'filters_active_background',
	500	+ 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
	501	+ ]
	502	+ );
	503	+ $this->add_group_control(
	504	+ Group_Control_Border::get_type(),
	505	+ [
	506	+ 'name' => 'filters_active_border',
	507	+ 'label' => esc_html__('Border', 'uicore-elements'),
	508	+ 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
	509	+ ]
	510	+ );
	511	+ $this->add_group_control(
	512	+ Group_Control_Box_Shadow::get_type(),
	513	+ [
	514	+ 'name' => 'filters_active_box_shadow',
	515	+ 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
	516	+ ]
	517	+ );
393	518
394		- $this->add_control(
395		- 'filters_active_color',
396		- [
397		- 'label' => __('Color', 'uicore-elements'),
398		- 'type' => Controls_Manager::COLOR,
399		- 'selectors' => [
400		- '{{WRAPPER}} .ui-e-filters button.ui-e-active' => 'color: {{VALUE}};',
401		- ],
402		- ]
403		- );
404		- $this->add_group_control(
405		- Group_Control_Background::get_type(),
406		- [
407		- 'name' => 'filters_active_background',
408		- 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
409		- ]
410		- );
411		- $this->add_group_control(
412		- Group_Control_Border::get_type(),
413		- [
414		- 'name' => 'filters_active_border',
415		- 'label' => esc_html__( 'Border', 'uicore-elements' ),
416		- 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
417		- ]
418		- );
419		- $this->add_group_control(
420		- Group_Control_Box_Shadow::get_type(),
421		- [
422		- 'name' => 'filters_active_box_shadow',
423		- 'selector' => '{{WRAPPER}} .ui-e-filters button.ui-e-active',
424		- ]
425		- );
	519	+ $this->end_controls_tab();
426	520
427		- $this->end_controls_tab();
	521	+ $this->end_controls_tabs();
428	522
429		- $this->end_controls_tabs();
	523	+ $this->add_control(
	524	+ 'filters_separator',
	525	+ [
	526	+ 'type' => Controls_Manager::DIVIDER,
	527	+ ]
	528	+ );
430	529
431		- $this->add_control(
432		- 'filters_separator',
433		- [
434		- 'type' => Controls_Manager::DIVIDER,
435		- ]
436		- );
	530	+ $this->add_control(
	531	+ 'filters_border_radius',
	532	+ [
	533	+ 'label' => esc_html__('Border Radius', 'uicore-elements'),
	534	+ 'type' => Controls_Manager::DIMENSIONS,
	535	+ 'size_units' => ['px', '%'],
	536	+ 'selectors' => [
	537	+ '{{WRAPPER}} .ui-e-filters button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	538	+ ],
	539	+ ]
	540	+ );
	541	+ $this->add_control(
	542	+ 'filters_padding',
	543	+ [
	544	+ 'label' => esc_html__('Padding', 'uicore-elements'),
	545	+ 'type' => Controls_Manager::DIMENSIONS,
	546	+ 'size_units' => ['px', 'em', '%'],
	547	+ 'selectors' => [
	548	+ '{{WRAPPER}} .ui-e-filters button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	549	+ ],
	550	+ ]
	551	+ );
437	552
438		- $this->add_control(
439		- 'filters_border_radius',
440		- [
441		- 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
442		- 'type' => Controls_Manager::DIMENSIONS,
443		- 'size_units' => [ 'px', '%' ],
444		- 'selectors' => [
445		- '{{WRAPPER}} .ui-e-filters button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	553	+ $this->end_controls_section();
	554	+ }
	555	+ function TRAIT_register_image_style_controls($is_carousel = false)
	556	+ {
	557	+ // Condition used by both image height and the image section
	558	+ $condition = [
	559	+ 'relation' => 'or',
	560	+ 'terms' => [
	561	+ [
	562	+ 'name' => 'layout',
	563	+ 'operator' => '==',
	564	+ 'value' => '',
	565	+ ],
	566	+ [
	567	+ 'relation' => 'and',
	568	+ 'terms' => [
	569	+ [
	570	+ 'name' => 'layout',
	571	+ 'operator' => '==',
	572	+ 'value' => 'ui-e-overlay',
446	573	],
447		- ]
448		- );
449		- $this->add_control(
450		- 'filters_padding',
451		- [
452		- 'label' => esc_html__( 'Padding', 'uicore-elements' ),
453		- 'type' => Controls_Manager::DIMENSIONS,
454		- 'size_units' => [ 'px', 'em', '%' ],
455		- 'selectors' => [
456		- '{{WRAPPER}} .ui-e-filters button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
457		- ],
458		- ]
459		- );
	574	+ [
	575	+ 'name' => 'masonry',
	576	+ 'operator' => '!==',
	577	+ 'value' => 'yes',
	578	+ ]
	579	+ ],
	580	+ ],
	581	+ ],
	582	+ ];
460	583
461		- $this->end_controls_section();
462		- }
463		- function TRAIT_register_image_style_controls($is_carousel = false)
464		- {
	584	+ $this->start_controls_section(
	585	+ 'style_image_section',
	586	+ [
	587	+ 'label' => __('Image', 'uicore-elements'),
	588	+ 'tab' => Controls_Manager::TAB_STYLE,
	589	+ 'conditions' => $condition
	590	+ ]
	591	+ );
465	592
466		- // Carousel and grid use different match height controls and logic
467		- $height_slug = $is_carousel ? 'match_height' : 'masonry';
468		- $height_operator = $is_carousel ? '==' : '!==';
	593	+ $this->add_responsive_control(
	594	+ 'image_height',
	595	+ [
	596	+ 'label' => esc_html__('Image Height', 'uicore-elements'),
	597	+ 'type' => Controls_Manager::SLIDER,
	598	+ 'size_units' => ['px', 'em', 'vh'],
	599	+ 'range' => [
	600	+ 'px' => [
	601	+ 'min' => 50,
	602	+ 'max' => 500,
	603	+ 'step' => 5,
	604	+ ],
	605	+ 'em' => [
	606	+ 'min' => 5,
	607	+ 'max' => 30,
	608	+ 'step' => 1,
	609	+ ],
	610	+ 'vh' => [
	611	+ 'min' => 5,
	612	+ 'max' => 50,
	613	+ ],
	614	+ ],
	615	+ 'default' => [
	616	+ 'unit' => 'px',
	617	+ 'size' => 400,
	618	+ ],
	619	+ 'selectors' => [
	620	+ '{{WRAPPER}}' => '--ui-e-img-height: {{SIZE}}{{UNIT}};',
	621	+ ],
	622	+ 'conditions' => $condition
	623	+ ]
	624	+ );
469	625
470		- $this->start_controls_section(
471		- 'style_image_section',
472		- [
473		- 'label' => __('Image', 'uicore-elements'),
474		- 'tab' => Controls_Manager::TAB_STYLE,
	626	+ $this->add_control(
	627	+ 'image_bottom_space',
	628	+ [
	629	+ 'label' => __('Spacing', 'uicore-elements'),
	630	+ 'type' => Controls_Manager::SLIDER,
	631	+ 'range' => [
	632	+ 'px' => [
	633	+ 'min' => 0,
	634	+ 'max' => 50,
	635	+ ],
	636	+ ],
	637	+ 'default' => [
	638	+ 'size' => 10,
	639	+ 'unit' => 'px'
	640	+ ],
	641	+ 'condition' => [
	642	+ 'layout' => ''
	643	+ ],
	644	+ 'selectors' => [
	645	+ '{{WRAPPER}}' => '--ui-e-image-spacing: {{SIZE}}{{UNIT}};',
	646	+ ],
	647	+ ]
	648	+ );
	649	+ $this->add_control(
	650	+ 'image_radius',
	651	+ [
	652	+ 'label' => esc_html__('Border Radius', 'uicore-elements'),
	653	+ 'type' => Controls_Manager::DIMENSIONS,
	654	+ 'size_units' => ['px', '%'],
	655	+ 'condition' => [
	656	+ 'layout' => ''
	657	+ ],
	658	+ 'selectors' => [
	659	+ '{{WRAPPER}} .ui-e-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	660	+ ],
	661	+ ]
	662	+ );
	663	+ $this->add_group_control(
	664	+ Group_Control_Box_Shadow::get_type(),
	665	+ [
	666	+ 'name' => 'image_box_shadow',
	667	+ 'selector' => '{{WRAPPER}} .ui-e-item img',
	668	+ 'condition' => [
	669	+ 'layout' => ''
475	670	]
476		- );
	671	+ ]
	672	+ );
477	673
478		- $this->add_responsive_control(
479		- 'image_height',
480		- [
481		- 'label' => esc_html__('Image Height', 'uicore-elements'),
482		- 'type' => Controls_Manager::SLIDER,
483		- 'size_units' => ['px', 'em', 'vh'],
484		- 'range' => [
485		- 'px' => [
486		- 'min' => 50,
487		- 'max' => 500,
488		- 'step' => 5,
489		- ],
490		- 'em' => [
491		- 'min' => 5,
492		- 'max' => 30,
493		- 'step' => 1,
494		- ],
495		- 'vh' => [
496		- 'min' => 5,
497		- 'max' => 50,
498		- ],
499		- ],
500		- 'default' => [
501		- 'unit' => 'px',
502		- 'size' => 400,
503		- ],
504		- 'selectors' => [
505		- '{{WRAPPER}} .ui-e-media-wrp' => 'height: {{SIZE}}{{UNIT}};',
506		- ],
507		- 'conditions' => [
508		- 'relation' => 'or',
509		- 'terms' => [
510		- [
511		- 'name' => 'layout',
512		- 'operator' => '==',
513		- 'value' => '',
514		- ],
515		- [
516		- 'relation' => 'and',
517		- 'terms' => [
518		- [
519		- 'name' => 'layout',
520		- 'operator' => '==',
521		- 'value' => 'ui-e-overlay',
522		- ],
523		- [
524		- 'name' => $height_slug,
525		- 'operator' => $height_operator,
526		- 'value' => 'yes',
527		- ]
528		- ],
529		- ],
530		- ],
531		- ],
532		- ]
533		- );
534		- $this->add_control(
535		- 'image_position',
536		- [
537		- 'label' => esc_html__('Image Position', 'uicore-elements'),
538		- 'type' => Controls_Manager::SELECT,
539		- 'default' => 'center',
540		- 'options' => [
541		- 'top' => __('Top', 'uicore-elements'),
542		- 'center' => __('Center', 'uicore-elements'),
543		- 'bottom' => __('Bottom', 'uicore-elements'),
544		- ],
545		- 'selectors' => [
546		- '{{WRAPPER}} .ui-e-media-wrp' => 'background-position: {{VALUE}};',
547		- ],
548		- 'condition' => [
549		- 'layout' => 'ui-e-overlay',
550		- ],
551		- ]
552		- );
553		- $this->add_control(
554		- 'image_bottom_space',
555		- [
556		- 'label' => __('Spacing', 'uicore-elements'),
557		- 'type' => Controls_Manager::SLIDER,
558		- 'range' => [
559		- 'px' => [
560		- 'min' => 0,
561		- 'max' => 50,
562		- ],
563		- ],
564		- 'default' => [
565		- 'size' => 10,
566		- 'unit' => 'px'
567		- ],
568		- 'condition' => [
569		- 'layout' => ''
570		- ],
571		- 'selectors' => [
572		- '{{WRAPPER}}' => '--ui-e-image-spacing: {{SIZE}}{{UNIT}};',
573		- ],
574		- ]
575		- );
576		- $this->add_control(
577		- 'image_radius',
578		- [
579		- 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
580		- 'type' => Controls_Manager::DIMENSIONS,
581		- 'size_units' => [ 'px', '%' ],
582		- 'condition' => [
583		- 'layout' => ''
584		- ],
585		- 'selectors' => [
586		- '{{WRAPPER}} .ui-e-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
587		- ],
588		- ]
589		- );
590		- $this->add_group_control(
591		- Group_Control_Box_Shadow::get_type(),
592		- [
593		- 'name' => 'image_box_shadow',
594		- 'selector' => '{{WRAPPER}} .ui-e-item img',
595		- 'condition' => [
596		- 'layout' => ''
597		- ]
598		- ]
599		- );
	674	+ $this->end_controls_section();
	675	+ }
	676	+ function TRAIT_register_title_style_controls()
	677	+ {
	678	+ $this->start_controls_section(
	679	+ 'style_title_section',
	680	+ [
	681	+ 'label' => __('Title', 'uicore-elements'),
	682	+ 'tab' => Controls_Manager::TAB_STYLE,
	683	+ 'condition' => [
	684	+ 'hide_title!' => 'yes',
	685	+ ]
	686	+ ]
	687	+ );
600	688
601		- $this->end_controls_section();
602		- }
603		- function TRAIT_register_title_style_controls()
604		- {
605		- $this->start_controls_section(
606		- 'style_title_section',
607		- [
608		- 'label' => __('Title', 'uicore-elements'),
609		- 'tab' => Controls_Manager::TAB_STYLE,
	689	+ $this->add_group_control(
	690	+ Group_Control_Typography::get_type(),
	691	+ [
	692	+ 'name' => 'title_typography',
	693	+ 'selector' => '{{WRAPPER}} .ui-e-title',
	694	+ ]
	695	+ );
	696	+ $this->add_control(
	697	+ 'title_color',
	698	+ [
	699	+ 'label' => __('Color', 'uicore-elements'),
	700	+ 'type' => Controls_Manager::COLOR,
	701	+ 'selectors' => [
	702	+ '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
	703	+ ],
	704	+ ]
	705	+ );
	706	+ $this->add_control(
	707	+ 'title_hover_color',
	708	+ [
	709	+ 'label' => __('Hover Color', 'uicore-elements'),
	710	+ 'type' => Controls_Manager::COLOR,
	711	+ 'selectors' => [
	712	+ '{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'color: {{VALUE}};',
	713	+ ],
	714	+ ]
	715	+ );
	716	+ $this->add_control(
	717	+ 'title_bottom_space',
	718	+ [
	719	+ 'label' => __('Spacing', 'uicore-elements'),
	720	+ 'type' => Controls_Manager::SLIDER,
	721	+ 'range' => [
	722	+ 'px' => [
	723	+ 'min' => 0,
	724	+ 'max' => 50,
	725	+ ],
	726	+ ],
	727	+ 'default' => [
	728	+ 'size' => 10,
	729	+ 'unit' => 'px'
	730	+ ],
	731	+ 'selectors' => [
	732	+ '{{WRAPPER}}' => '--ui-e-title-spacing: {{SIZE}}{{UNIT}};',
	733	+ ],
	734	+ ]
	735	+ );
	736	+
	737	+ $this->end_controls_section();
	738	+ }
	739	+ function TRAIT_register_description_style_controls()
	740	+ {
	741	+ $this->start_controls_section(
	742	+ 'style_description_section',
	743	+ [
	744	+ 'label' => __('Description', 'uicore-elements'),
	745	+ 'tab' => Controls_Manager::TAB_STYLE,
	746	+ 'condition' => [
	747	+ 'hide_description!' => 'yes',
610	748	]
611		- );
	749	+ ]
	750	+ );
612	751
613		- $this->add_group_control(
614		- Group_Control_Typography::get_type(),
615		- [
616		- 'name' => 'title_typography',
617		- 'selector' => '{{WRAPPER}} .ui-e-title',
618		- ]
619		- );
620		- $this->add_control(
621		- 'title_color',
622		- [
623		- 'label' => __('Color', 'uicore-elements'),
624		- 'type' => Controls_Manager::COLOR,
625		- 'selectors' => [
626		- '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
627		- ],
628		- ]
629		- );
630		- $this->add_control(
631		- 'title_hover_color',
632		- [
633		- 'label' => __('Hover Color', 'uicore-elements'),
634		- 'type' => Controls_Manager::COLOR,
635		- 'selectors' => [
636		- '{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'color: {{VALUE}};',
637		- ],
638		- ]
639		- );
640		- $this->add_control(
641		- 'title_bottom_space',
642		- [
643		- 'label' => __('Spacing', 'uicore-elements'),
644		- 'type' => Controls_Manager::SLIDER,
645		- 'range' => [
646		- 'px' => [
647		- 'min' => 0,
648		- 'max' => 50,
649		- ],
650		- ],
651		- 'default' => [
652		- 'size' => 10,
653		- 'unit' => 'px'
654		- ],
655		- 'selectors' => [
656		- '{{WRAPPER}}' => '--ui-e-title-spacing: {{SIZE}}{{UNIT}};',
657		- ],
658		- ]
659		- );
	752	+ $this->add_group_control(
	753	+ Group_Control_Typography::get_type(),
	754	+ [
	755	+ 'name' => 'description_typography',
	756	+ 'selector' => '{{WRAPPER}} .ui-e-description',
	757	+ ]
	758	+ );
	759	+ $this->add_control(
	760	+ 'description_color',
	761	+ [
	762	+ 'label' => __('Color', 'uicore-elements'),
	763	+ 'type' => Controls_Manager::COLOR,
	764	+ 'selectors' => [
	765	+ '{{WRAPPER}} .ui-e-description' => 'color: {{VALUE}};',
	766	+ ],
	767	+ ]
	768	+ );
	769	+ $this->add_control(
	770	+ 'description_bottom_space',
	771	+ [
	772	+ 'label' => __('Spacing', 'uicore-elements'),
	773	+ 'type' => Controls_Manager::SLIDER,
	774	+ 'range' => [
	775	+ 'px' => [
	776	+ 'min' => 0,
	777	+ 'max' => 50,
	778	+ ],
	779	+ ],
	780	+ 'default' => [
	781	+ 'size' => 10,
	782	+ 'unit' => 'px'
	783	+ ],
	784	+ 'condition' => [
	785	+ 'hide_tags!' => 'yes',
	786	+ ],
	787	+ 'selectors' => [
	788	+ '{{WRAPPER}} .ui-e-description' => 'padding-bottom: {{SIZE}}{{UNIT}};',
	789	+ ],
	790	+ ]
	791	+ );
660	792
661		- $this->end_controls_section();
662		- }
663		- function TRAIT_register_description_style_controls()
664		- {
665		- $this->start_controls_section(
666		- 'style_description_section',
667		- [
668		- 'label' => __('Description', 'uicore-elements'),
669		- 'tab' => Controls_Manager::TAB_STYLE,
	793	+ $this->end_controls_section();
	794	+ }
	795	+ function TRAIT_register_tags_style_controls()
	796	+ {
	797	+ $this->start_controls_section(
	798	+ 'style_tags_section',
	799	+ [
	800	+ 'label' => __('Tags', 'uicore-elements'),
	801	+ 'tab' => Controls_Manager::TAB_STYLE,
	802	+ 'condition' => [
	803	+ 'hide_tags!' => 'yes',
670	804	]
671		- );
	805	+ ]
	806	+ );
672	807
673		- $this->add_group_control(
674		- Group_Control_Typography::get_type(),
675		- [
676		- 'name' => 'description_typography',
677		- 'selector' => '{{WRAPPER}} .ui-e-description',
678		- ]
679		- );
680		- $this->add_control(
681		- 'description_color',
682		- [
683		- 'label' => __('Color', 'uicore-elements'),
684		- 'type' => Controls_Manager::COLOR,
685		- 'selectors' => [
686		- '{{WRAPPER}} .ui-e-description' => 'color: {{VALUE}};',
687		- ],
688		- ]
689		- );
690		- $this->add_control(
691		- 'description_bottom_space',
692		- [
693		- 'label' => __('Spacing', 'uicore-elements'),
694		- 'type' => Controls_Manager::SLIDER,
695		- 'range' => [
696		- 'px' => [
697		- 'min' => 0,
698		- 'max' => 50,
699		- ],
700		- ],
701		- 'default' => [
702		- 'size' => 10,
703		- 'unit' => 'px'
704		- ],
705		- 'condition' => [
706		- 'hide_tags!' => 'yes',
707		- ],
708		- 'selectors' => [
709		- '{{WRAPPER}} .ui-e-description' => 'padding-bottom: {{SIZE}}{{UNIT}};',
710		- ],
711		- ]
712		- );
	808	+ $this->add_group_control(
	809	+ Group_Control_Typography::get_type(),
	810	+ [
	811	+ 'name' => 'tags_typography',
	812	+ 'selector' => '{{WRAPPER}} .ui-e-tags',
	813	+ ]
	814	+ );
	815	+ $this->add_control(
	816	+ 'tags_color',
	817	+ [
	818	+ 'label' => __('Color', 'uicore-elements'),
	819	+ 'type' => Controls_Manager::COLOR,
	820	+ 'selectors' => [
	821	+ '{{WRAPPER}} .ui-e-tags' => 'color: {{VALUE}};',
	822	+ ],
	823	+ ]
	824	+ );
713	825
714		- $this->end_controls_section();
	826	+ $this->end_controls_section();
	827	+ }
	828	+ function TRAIT_register_badge_style_controls()
	829	+ {
	830	+ $this->start_controls_section(
	831	+ 'style_badge_section',
	832	+ [
	833	+ 'label' => __('Badge', 'uicore-elements'),
	834	+ 'tab' => Controls_Manager::TAB_STYLE,
	835	+ ]
	836	+ );
	837	+
	838	+ $this->add_group_control(
	839	+ Group_Control_Typography::get_type(),
	840	+ [
	841	+ 'name' => 'badge_typography',
	842	+ 'selector' => '{{WRAPPER}} .ui-e-badge',
	843	+ ]
	844	+ );
	845	+ $this->add_control(
	846	+ 'badge_color',
	847	+ [
	848	+ 'label' => __('Color', 'uicore-elements'),
	849	+ 'type' => Controls_Manager::COLOR,
	850	+ 'selectors' => [
	851	+ '{{WRAPPER}} .ui-e-badge' => 'color: {{VALUE}};',
	852	+ ],
	853	+ ]
	854	+ );
	855	+ $this->add_control(
	856	+ 'badge_background_color',
	857	+ [
	858	+ 'label' => __('Background Color', 'uicore-elements'),
	859	+ 'type' => Controls_Manager::COLOR,
	860	+ 'default' => 'var(--e-global-color-uicore_primary)',
	861	+
	862	+ 'selectors' => [
	863	+ '{{WRAPPER}} .ui-e-badge' => 'background-color: {{VALUE}};',
	864	+ ],
	865	+ ]
	866	+ );
	867	+ $this->add_group_control(
	868	+ Group_Control_Border::get_type(),
	869	+ [
	870	+ 'name' => 'badge_border',
	871	+ 'label' => esc_html__('Border', 'uicore-elements'),
	872	+ 'selector' => '{{WRAPPER}} .ui-e-badge',
	873	+ ]
	874	+ );
	875	+ $this->add_control(
	876	+ 'badge_border_radius',
	877	+ [
	878	+ 'label' => esc_html__('Border Radius', 'uicore-elements'),
	879	+ 'type' => Controls_Manager::DIMENSIONS,
	880	+ 'size_units' => ['px', '%'],
	881	+ 'default' => [
	882	+ 'top' => 4,
	883	+ 'right' => 4,
	884	+ 'bottom' => 4,
	885	+ 'left' => 4,
	886	+ ],
	887	+ 'selectors' => [
	888	+ '{{WRAPPER}} .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	889	+ ],
	890	+ ]
	891	+ );
	892	+ $this->add_control(
	893	+ 'badge_padding',
	894	+ [
	895	+ 'label' => esc_html__('Padding', 'uicore-elements'),
	896	+ 'type' => Controls_Manager::DIMENSIONS,
	897	+ 'size_units' => ['px', 'em', '%'],
	898	+ 'size_units' => ['px', '%'],
	899	+ 'default' => [
	900	+ 'top' => 3,
	901	+ 'right' => 10,
	902	+ 'bottom' => 3,
	903	+ 'left' => 10,
	904	+ 'unit' => 'px',
	905	+ 'isLinked' => false,
	906	+ ],
	907	+ 'selectors' => [
	908	+ '{{WRAPPER}} .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	909	+ ],
	910	+ ]
	911	+ );
	912	+ $this->add_group_control(
	913	+ Group_Control_Box_Shadow::get_type(),
	914	+ [
	915	+ 'name' => 'badge_box_shadow',
	916	+ 'selector' => '{{WRAPPER}} .ui-e-badge',
	917	+ ]
	918	+ );
	919	+
	920	+ $this->end_controls_section();
	921	+ }
	922	+ function TRAIT_register_gallery_animations()
	923	+ {
	924	+ $this->start_controls_section(
	925	+ 'items_animation',
	926	+ [
	927	+ 'label' => esc_html__('Animation', 'uicore-elements'),
	928	+ 'tab' => Controls_Manager::TAB_STYLE,
	929	+ ]
	930	+ );
	931	+ $this->TRAIT_register_entrance_animations_controls(); // animate each item
	932	+ $this->TRAIT_register_hover_animation_control(
	933	+ 'Item Hover Animation',
	934	+ [],
	935	+ ['underline']
	936	+ );
	937	+ $this->TRAIT_register_hover_animation_control(
	938	+ 'Image Animation',
	939	+ ['layout' => ''],
	940	+ ['underline']
	941	+ );
	942	+ // TODO: update all controls below after 'show' is globally implemented
	943	+ $this->TRAIT_register_hover_animation_control(
	944	+ 'Title Animation',
	945	+ ['hide_title!' => 'yes'],
	946	+ ['zoom'],
	947	+ null,
	948	+ true,
	949	+ 'ui-e-animated-title-'
	950	+ );
	951	+ $this->TRAIT_register_hover_animation_control(
	952	+ 'Description Animation',
	953	+ ['hide_description!' => 'yes'],
	954	+ ['zoom', 'underline'],
	955	+ null,
	956	+ true,
	957	+ 'ui-e-animated-description-'
	958	+ );
	959	+ $this->TRAIT_register_hover_animation_control(
	960	+ 'Badge Animation',
	961	+ [],
	962	+ ['underline'],
	963	+ null,
	964	+ true
	965	+ );
	966	+ $this->TRAIT_register_hover_animation_control(
	967	+ 'Tags Animation',
	968	+ ['hide_tags!' => 'yes'],
	969	+ ['zoom'],
	970	+ null,
	971	+ true
	972	+ );
	973	+
	974	+ $this->end_controls_section();
	975	+ }
	976	+
	977	+ // Elements rendering
	978	+ protected function TRAIT_render_gallery($settings, $is_carousel = false)
	979	+ {
	980	+ // Get entrance and item hover animation classes
	981	+ $entrance = $this->is_option('animate_items', 'ui-e-grid-animate') ? 'elementor-invisible' : '';
	982	+ $hover = isset($settings['item_hover_animation']) ? $settings['item_hover_animation'] : null;
	983	+ $animations = sprintf('%s %s', $entrance, $hover);
	984	+
	985	+ // Get all elements animation control options (triggered by .ui-e-animations-wrp:hover)
	986	+ $animation_options = [
	987	+ $settings['title_animation'],
	988	+ $settings['description_animation'],
	989	+ $settings['image_animation'],
	990	+ $settings['badge_animation'],
	991	+ $settings['tags_animation'],
	992	+ ];
	993	+
	994	+ // get item animation only if is not slider,
	995	+ if (!str_contains($this->get_name(), 'slider')) {
	996	+ $animation_options[] = $settings['item_hover_animation'];
715	997	}
716		- function TRAIT_register_tags_style_controls()
717		- {
718		- $this->start_controls_section(
719		- 'style_tags_section',
720		- [
721		- 'label' => __('Tags', 'uicore-elements'),
722		- 'tab' => Controls_Manager::TAB_STYLE,
723		- 'condition' => [
724		- 'hide_tags!' => 'yes',
725		- ]
726		- ]
727		- );
728	998
729		- $this->add_group_control(
730		- Group_Control_Typography::get_type(),
731		- [
732		- 'name' => 'tags_typography',
733		- 'selector' => '{{WRAPPER}} .ui-e-tags',
734		- ]
735		- );
736		- $this->add_control(
737		- 'tags_color',
738		- [
739		- 'label' => __('Color', 'uicore-elements'),
740		- 'type' => Controls_Manager::COLOR,
741		- 'selectors' => [
742		- '{{WRAPPER}} .ui-e-tags' => 'color: {{VALUE}};',
743		- ],
744		- ]
745		- );
	999	+ // check if any of the animation are set
	1000	+ $has_animation = array_filter($animation_options, function ($value) {
	1001	+ return $value !== '';
	1002	+ });
746	1003
747		- $this->end_controls_section();
	1004	+ // and also check if entrance is set
	1005	+ $has_animation = $entrance !== '' ? true : $has_animation;
	1006	+
	1007	+ //
	1008	+ $item_classes = $is_carousel
	1009	+ ? 'ui-e-wrp swiper-slide'
	1010	+ : 'ui-e-wrp ui-e-filtered';
	1011	+ $this->add_render_attribute('item_wrapper', 'class', $item_classes);
	1012	+
	1013	+ // Render items
	1014	+ foreach ($settings['gallery_items'] as $index => $item) {
	1015	+ $this->render_item($index, $item, $settings, $has_animation, $animations);
748	1016	}
749		- function TRAIT_register_badge_style_controls()
750		- {
751		- $this->start_controls_section(
752		- 'style_badge_section',
753		- [
754		- 'label' => __('Badge', 'uicore-elements'),
755		- 'tab' => Controls_Manager::TAB_STYLE,
756		- ]
757		- );
758	1017
759		- $this->add_group_control(
760		- Group_Control_Typography::get_type(),
761		- [
762		- 'name' => 'badge_typography',
763		- 'selector' => '{{WRAPPER}} .ui-e-badge',
764		- ]
765		- );
766		- $this->add_control(
767		- 'badge_color',
768		- [
769		- 'label' => __('Color', 'uicore-elements'),
770		- 'type' => Controls_Manager::COLOR,
771		- 'selectors' => [
772		- '{{WRAPPER}} .ui-e-badge' => 'color: {{VALUE}};',
773		- ],
774		- ]
775		- );
776		- $this->add_control(
777		- 'badge_background_color',
778		- [
779		- 'label' => __('Background Color', 'uicore-elements'),
780		- 'type' => Controls_Manager::COLOR,
781		- 'global' => [
782		- 'default' => Global_Colors::COLOR_PRIMARY,
783		- ],
784		- 'selectors' => [
785		- '{{WRAPPER}} .ui-e-badge' => 'background-color: {{VALUE}};',
786		- ],
787		- ]
788		- );
789		- $this->add_group_control(
790		- Group_Control_Border::get_type(),
791		- [
792		- 'name' => 'badge_border',
793		- 'label' => esc_html__( 'Border', 'uicore-elements' ),
794		- 'selector' => '{{WRAPPER}} .ui-e-badge',
795		- ]
796		- );
797		- $this->add_control(
798		- 'badge_border_radius',
799		- [
800		- 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
801		- 'type' => Controls_Manager::DIMENSIONS,
802		- 'size_units' => [ 'px', '%' ],
803		- 'default' => [
804		- 'top' => 4,
805		- 'right' => 4,
806		- 'bottom' => 4,
807		- 'left' => 4,
808		- ],
809		- 'selectors' => [
810		- '{{WRAPPER}} .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
811		- ],
812		- ]
813		- );
814		- $this->add_control(
815		- 'badge_padding',
816		- [
817		- 'label' => esc_html__( 'Padding', 'uicore-elements' ),
818		- 'type' => Controls_Manager::DIMENSIONS,
819		- 'size_units' => [ 'px', 'em', '%' ],
820		- 'size_units' => [ 'px', '%' ],
821		- 'default' => [
822		- 'top' => 3,
823		- 'right' => 10,
824		- 'bottom' => 3,
825		- 'left' => 10,
826		- 'unit' => 'px',
827		- 'isLinked' => false,
828		- ],
829		- 'selectors' => [
830		- '{{WRAPPER}} .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
831		- ],
832		- ]
833		- );
834		- $this->add_group_control(
835		- Group_Control_Box_Shadow::get_type(),
836		- [
837		- 'name' => 'badge_box_shadow',
838		- 'selector' => '{{WRAPPER}} .ui-e-badge',
839		- ]
840		- );
	1018	+ if ($is_carousel) {
	1019	+ $total_slides = count($settings['gallery_items']);
	1020	+ }
	1021	+ }
841	1022
842		- $this->end_controls_section();
	1023	+ protected function render_item($index, $item, $settings, $has_animation, $animations)
	1024	+ {
	1025	+ // Params
	1026	+ $key = 'item_' . $index;
	1027	+ $tag = 'div';
	1028	+ $lightbox = $this->is_option('lightbox', 'yes');
	1029	+ $is_overlay = $this->is_option('layout', 'ui-e-overlay');
	1030	+ $has_url = ! empty($item['item_url']['url']);
	1031	+ $lightbox_group_id = $this->get_id() . '-gallery';
	1032	+
	1033	+ $this->add_render_attribute($key, 'class', 'ui-e-item');
	1034	+
	1035	+ // The entire item becomes the lightbox trigger
	1036	+ if ($lightbox && $is_overlay && ! $has_url) {
	1037	+ $tag = 'a';
	1038	+
	1039	+ $this->add_gallery_lightbox_attributes(
	1040	+ $key,
	1041	+ $item['item_image'],
	1042	+ $lightbox_group_id
	1043	+ );
	1044	+ } elseif ($has_url && ! $lightbox) {
	1045	+ // The entire item uses the custom URL
	1046	+ $tag = 'a';
	1047	+ $this->add_link_attributes($key, $item['item_url']);
843	1048	}
844		- function TRAIT_register_gallery_animations()
845		- {
846		- $this->start_controls_section(
847		- 'items_animation',
848		- [
849		- 'label' => esc_html__('Animation', 'uicore-elements'),
850		- 'tab' => Controls_Manager::TAB_STYLE,
851		- ]
852		- );
853		- $this->TRAIT_register_entrance_animations_controls(); // animate each item
854		- $this->TRAIT_register_hover_animation_control(
855		- 'Item Hover Animation',
856		- [],
857		- ['underline']
858		- );
859		- $this->TRAIT_register_hover_animation_control(
860		- 'Image Animation',
861		- ['layout' => ''],
862		- ['underline']
863		- );
864		- // TODO: update all controls below after 'show' is globally implemented
865		- $this->TRAIT_register_hover_animation_control(
866		- 'Title Animation',
867		- [],
868		- ['zoom']
869		- );
870		- $this->TRAIT_register_hover_animation_control(
871		- 'Description Animation',
872		- [],
873		- ['zoom', 'underline'],
874		- null,
875		- true
876		- );
877		- $this->TRAIT_register_hover_animation_control(
878		- 'Badge Animation',
879		- [],
880		- ['underline'],
881		- null,
882		- true
883		- );
884		- $this->TRAIT_register_hover_animation_control(
885		- 'Tags Animation',
886		- ['hide_tags!' => 'yes'],
887		- ['zoom'],
888		- null,
889		- true
890		- );
891	1049
892		- $this->end_controls_section();
893		- }
	1050	+ // The image gets its own lightbox link unless the entire item is already acting as the lightbox trigger.
	1051	+ $image_lightbox = $lightbox && ! ($is_overlay && ! $has_url);
	1052	+?>
894	1053
895		- // Elements rendering
896		- protected function TRAIT_render_gallery($settings, $is_carousel = false)
897		- {
898		- // Get entrance and item hover animation classes
899		- $entrance = (isset($settings['animate_items']) && $settings['animate_items'] == 'ui-e-grid-animate') ? 'elementor-invisible' : '';
900		- $hover = isset($settings['item_hover_animation']) ? $settings['item_hover_animation'] : null;
901		- $animations = sprintf('%s %s', $entrance, $hover);
	1054	+ <div
	1055	+ <?php $this->print_render_attribute_string('item_wrapper'); ?>
	1056	+ data-ui-e-tags="<?php echo esc_attr(sanitize_title($item['item_tags'])); ?>">
	1057	+ <?php if ($has_animation) : ?>
	1058	+ <div class="ui-e-animations-wrp <?php echo esc_attr($animations); ?>">
	1059	+ <?php endif; ?>
902	1060
903		- // Get all elements animation control options (triggered by .ui-e-animations-wrp:hover)
904		- $animation_options = [
905		- $settings['title_animation'],
906		- $settings['description_animation'],
907		- $settings['image_animation'],
908		- $settings['badge_animation'],
909		- $settings['tags_animation'],
910		- ];
	1061	+ <<?php echo Helper::esc_tag($tag); ?>
	1062	+ <?php $this->print_render_attribute_string($key); ?>>
	1063	+ <?php
	1064	+ $this->render_image(
	1065	+ $index,
	1066	+ $item,
	1067	+ $settings,
	1068	+ $image_lightbox
	1069	+ );
911	1070
912		- // get item animation only if is not slider,
913		- if (!str_contains($this->get_name(), 'slider')) {
914		- $animation_options[] = $settings['item_hover_animation'];
915		- }
	1071	+ $this->render_contents(
	1072	+ $index,
	1073	+ $item,
	1074	+ $settings,
	1075	+ $lightbox
	1076	+ );
	1077	+ ?>
	1078	+ </<?php echo Helper::esc_tag($tag); ?>>
916	1079
917		- // check if any of the animation are set
918		- $has_animation = array_filter($animation_options, function($value) {
919		- return $value !== '';
920		- });
	1080	+ <?php if ($has_animation) : ?>
	1081	+ </div>
	1082	+ <?php endif; ?>
	1083	+ </div>
921	1084
922		- // and also check if entrance is set
923		- $has_animation = $entrance !== '' ? true : $has_animation;
	1085	+ <?php
	1086	+ }
924	1087
925		- //
926		- $item_classes = $is_carousel ? 'ui-e-wrp swiper-slide' : 'ui-e-wrp';
927		- $this->add_render_attribute('item_wrapper', 'class', $item_classes );
	1088	+ protected function render_contents($index, $instance, $settings, $lightbox = false)
	1089	+ {
928	1090
929		- // Render items
930		- foreach ( $settings['gallery_items'] as $index => $item ) {
	1091	+ // Content container should only be rendered if at least one of the content elements is available
	1092	+ if (
	1093	+ (empty($instance['item_title']) || $this->is_option('hide_title', 'yes')) &&
	1094	+ (empty($instance['item_description']) || $this->is_option('hide_description', 'yes')) &&
	1095	+ (empty($instance['item_tags']) || $this->is_option('hide_tags', 'yes'))
	1096	+ ) {
	1097	+ return;
	1098	+ }
931	1099
932		- // Params
933		- $key = 'item_'.$index;
934		- $tag = 'div ';
	1100	+ $tag = 'div';
	1101	+ $key = 'content_' . $index;
935	1102
936		- $this->add_render_attribute($key, 'class', 'ui-e-item' );
	1103	+ $this->add_render_attribute($key, 'class', 'ui-e-content');
937	1104
938		- // Build URL
939		- if ( !empty($item['item_url']['url']) ) {
940		- $tag = 'a ';
941		- $this->add_link_attributes($key, $item['item_url'] );
942		- }
	1105	+ if ($lightbox && ! empty($instance['item_url']['url'])) {
	1106	+ $tag = 'a';
	1107	+ $this->add_link_attributes($key, $instance['item_url']);
	1108	+ }
943	1109
944		- ?>
945		- <div <?php $this->print_render_attribute_string('item_wrapper'); ?> data-ui-e-tags="<?php echo sanitize_title( $item['item_tags'] ); ?>">
	1110	+ ?>
946	1111
947		- <?php if($has_animation) : ?>
948		- <div class='ui-e-animations-wrp <?php echo esc_attr($animations);?>'>
949		- <?php endif; ?>
	1112	+ <<?php echo Helper::esc_tag($tag); ?>
	1113	+ <?php $this->print_render_attribute_string($key); ?>>
	1114	+ <?php $this->render_title($instance, $settings); ?>
950	1115
951		- <<?php echo esc_html($tag);?> <?php $this->print_render_attribute_string($key); ?>>
952		- <?php $this->render_item($index, $item, $settings); ?>
953		- </<?php echo esc_html($tag);?>>
	1116	+ <?php
	1117	+ $this->render_description(
	1118	+ $instance,
	1119	+ $settings['description_animation']
	1120	+ );
	1121	+ ?>
954	1122
955		- <?php if($has_animation) : ?>
956		- </div>
957		- <?php endif; ?>
	1123	+ <?php $this->render_tags($instance, $settings); ?>
	1124	+ </<?php echo Helper::esc_tag($tag); ?>>
958	1125
959		- </div>
960		- <?php
961		- }
	1126	+ <?php
	1127	+ }
	1128	+ protected function render_image($index, $instance, $settings, $lightbox = false)
	1129	+ {
	1130	+
	1131	+ if (empty($instance['item_image']['url'])) {
	1132	+ return;
962	1133	}
963		- protected function render_item($index, $instance, $settings)
964		- {
965	1134
966		- switch( $settings['layout'] ){
967		- case 'ui-e-overlay':
968		- ?>
969		- <?php $this->render_image($index, $instance, $settings); ?>
	1135	+ // Only default layout has media wrapper
	1136	+ if ($this->is_option('layout', '')) {
	1137	+ ?> <div class="ui-e-media-wrp <?php echo esc_attr($settings['image_animation']); ?>">
	1138	+ <?php
	1139	+ }
970	1140
971		- <div class="ui-e-content">
972		- <div class="ui-e-title-wrapper">
973		- <?php $this->render_title($instance, $settings); ?>
974		- <?php
975		- if( empty($settings['badge_position']) ) {
976		- $this->render_badge($instance, $settings['badge_animation']);
977		- }
978		- ?>
979		- </div>
	1141	+ $this->add_render_attribute(
	1142	+ 'image',
	1143	+ [
	1144	+ 'src' => $instance['item_image']['url'],
	1145	+ 'alt' => Control_Media::get_image_alt($instance['item_image']),
	1146	+ 'title' => Control_Media::get_image_title($instance['item_image']),
	1147	+ 'class' => 'ui-e-img',
	1148	+ ]
	1149	+ );
980	1150
981		- <?php $this->render_description($instance, $settings['description_animation']); ?>
982		- <?php $this->render_tags($instance, $settings); ?>
983		- </div>
	1151	+ if (! empty($settings['badge_position'])) {
	1152	+ $this->render_badge($instance, $settings['badge_animation']);
	1153	+ }
984	1154
985		- </div> <?php // close `ui-e-media-wrp` div opened by render_image()
986		- break;
	1155	+ $image_html = Group_Control_Image_Size::get_attachment_image_html($instance, 'item_image');
	1156	+ $lightbox_group_id = $this->get_id() . '-gallery';
987	1157
988		- default:
989		- ?>
990		- <?php $this->render_image($index, $instance, $settings); ?>
	1158	+ if ($lightbox) {
	1159	+ $image_key = 'image_link_' . $index;
991	1160
992		- <div class="ui-e-content">
993		- <div class="ui-e-title-wrapper">
994		- <?php $this->render_title($instance, $settings); ?>
995		- <?php
996		- if( empty($settings['badge_position']) ) {
997		- $this->render_badge($instance, $settings['badge_animation']);
998		- }
999		- ?>
1000		- </div>
	1161	+ $this->add_gallery_lightbox_attributes(
	1162	+ $image_key,
	1163	+ $instance['item_image'],
	1164	+ $lightbox_group_id
	1165	+ );
1001	1166
1002		- <?php $this->render_description($instance, $settings['description_animation']); ?>
1003		- <?php $this->render_tags($instance, $settings); ?>
1004		- </div>
1005		- <?php
1006		- break;
1007		- }
	1167	+ echo '<a ';
	1168	+ $this->print_render_attribute_string($image_key);
	1169	+ echo '>';
1008	1170	}
1009		- protected function render_image($index, $instance, $settings){
1010	1171
1011		- if( empty($instance['item_image']['url']) ){
1012		- return;
1013		- }
	1172	+ echo wp_kses_post($image_html);
1014	1173
1015		- // `get_attachment_image_` functions get the image size on the key passed as second argument with '_size' suffix
1016		- $instance['item_image_size'] = $settings['image_size'];
1017		- $key = 'image_' . $index;
	1174	+ if ($lightbox) {
	1175	+ echo '</a>';
	1176	+ }
1018	1177
1019		- // Overlay layout
1020		- if( $settings['layout'] === 'ui-e-overlay' ){
	1178	+ if ($this->is_option('layout', '')) {
	1179	+ ?> </div>
	1180	+ <?php
	1181	+ }
	1182	+ }
1021	1183
1022		- // get the image url with the proper size
1023		- $image = Group_Control_Image_Size::get_attachment_image_src( $instance['item_image']['id'], 'item_image', $instance );
	1184	+ protected function add_gallery_lightbox_attributes($key, $image, $group_id)
	1185	+ {
	1186	+ if (empty($image['url'])) {
	1187	+ return;
	1188	+ }
1024	1189
1025		- $this->add_render_attribute(
1026		- $key,
1027		- [
1028		- 'style' => 'background-image: url(' . $image . '); background-size: cover;',
1029		- 'class' => [
1030		- 'ui-e-media-wrp',
1031		- esc_attr($settings['image_animation'])
1032		- ],
1033		- ]
1034		- );
	1190	+ $this->add_render_attribute($key, 'href', $image['url']);
1035	1191
1036		- ?>
1037		- <div <?php $this->print_render_attribute_string($key); ?>>
1038		- <?php
1039		- if( ! empty($settings['badge_position']) ) {
1040		- $this->render_badge($instance, $settings['badge_animation']);
1041		- }
1042		- // We don't close the </div> div here because on overlay all the content goes
1043		- // inside this wrapper. The div should be closed by the parent function.
	1192	+ if (! empty($image['id'])) {
	1193	+ $this->add_lightbox_data_attributes(
	1194	+ $key,
	1195	+ $image['id'],
	1196	+ 'yes',
	1197	+ $group_id,
	1198	+ true
	1199	+ );
1044	1200
1045		- // Default layout
1046		- } else {
	1201	+ return;
	1202	+ }
1047	1203
1048		- $this->add_render_attribute(
1049		- 'image',
1050		- [
1051		- 'src' => $instance['item_image']['url'],
1052		- 'alt' => Control_Media::get_image_alt( $instance['item_image'] ),
1053		- 'title' => Control_Media::get_image_title( $instance['item_image'] ),
1054		- 'class' => 'ui-e-img',
1055		- ]
1056		- );
	1204	+ $this->add_render_attribute(
	1205	+ $key,
	1206	+ [
	1207	+ 'data-elementor-open-lightbox' => 'yes',
	1208	+ 'data-elementor-lightbox-slideshow' => $group_id,
	1209	+ ],
	1210	+ null,
	1211	+ true
	1212	+ );
	1213	+ }
1057	1214
1058		- ?>
1059		- <div class="ui-e-media-wrp <?php echo esc_attr($settings['image_animation']);?>">
1060		- <?php
1061		- if( ! empty($settings['badge_position']) ) {
1062		- $this->render_badge($instance, $settings['badge_animation']);
1063		- }
1064		- ?>
1065		- <?php echo Group_Control_Image_Size::get_attachment_image_html( $instance, 'item_image', ); ?>
1066		- </div>
1067		- <?php
1068		- }
	1215	+ protected function render_title($instance, $settings)
	1216	+ {
	1217	+ if (empty($instance['item_title']) || $this->is_option('hide_title', 'yes')) {
	1218	+ return;
1069	1219	}
1070		- protected function render_title($instance, $settings)
1071		- {
1072		- if( empty($instance['item_title']) ){
1073		- return;
	1220	+
	1221	+ ?>
	1222	+ <div class="ui-e-title-wrapper">
	1223	+ <<?php echo Helper::esc_tag($settings['title_tag']); ?> class="ui-e-title <?php echo esc_attr($settings['title_animation']) ?>">
	1224	+ <span> <?php echo Helper::esc_string($instance['item_title']); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	1225	+ ?> </span>
	1226	+ </<?php echo Helper::esc_tag($settings['title_tag']); ?>>
	1227	+
	1228	+ <?php
	1229	+ if (empty($settings['badge_position'])) {
	1230	+ $this->render_badge($instance, $settings['badge_animation']);
1074	1231	}
1075		-
1076	1232	?>
1077		- <<?php echo esc_html($settings['title_tag']);?> class="ui-e-title <?php echo esc_attr($settings['title_animation'])?>">
1078		- <span> <?php echo Helper::esc_string( $instance['item_title'] ); ?> </span>
1079		- </<?php echo esc_html($settings['title_tag']);?>>
1080		- <?php
	1233	+ </div>
	1234	+ <?php
	1235	+ }
	1236	+ protected function render_description($instance, $animation)
	1237	+ {
	1238	+ if (empty($instance['item_description']) || $this->is_option('hide_description', 'yes')) {
	1239	+ return;
1081	1240	}
1082		- protected function render_description($instance, $animation = '')
1083		- {
1084		- if( empty( $instance['item_description'] ) ){
1085		- return;
1086		- }
1087	1241
	1242	+ ?>
	1243	+ <p class="ui-e-description <?php echo esc_attr($animation); ?>">
	1244	+ <?php echo Helper::esc_string($instance['item_description']); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1088	1245	?>
1089		- <p class="ui-e-description <?php echo esc_attr($animation);?>">
1090		- <?php echo Helper::esc_string( $instance['item_description'] ) ;?>
1091		- </p>
1092		- <?php
	1246	+ </p>
	1247	+ <?php
	1248	+ }
	1249	+ protected function render_badge($instance, $animation)
	1250	+ {
	1251	+ if (empty($instance['item_badge'])) {
	1252	+ return;
1093	1253	}
1094		- protected function render_badge($instance, $animation)
1095		- {
1096		- if( empty( $instance['item_badge']) ){
1097		- return;
1098		- }
1099	1254
1100		- ?>
1101		- <span class="ui-e-badge <?php echo esc_attr($animation) ;?>">
1102		- <?php echo esc_html( $instance['item_badge'] ); ?>
1103		- </span>
1104		- <?php
	1255	+ ?>
	1256	+ <span class="ui-e-badge <?php echo esc_attr($animation); ?>">
	1257	+ <?php echo esc_html($instance['item_badge']); ?>
	1258	+ </span>
	1259	+ <?php
	1260	+ }
	1261	+ protected function render_tags($instance, $settings)
	1262	+ {
	1263	+ if (empty($instance['item_tags']) || $this->is_option('hide_tags', 'yes')) {
	1264	+ return;
1105	1265	}
1106		- protected function render_tags($instance, $settings)
1107		- {
1108		- if( empty( $instance['item_tags'] ) || $settings['hide_tags'] === 'yes' ){
1109		- return;
1110		- }
1111	1266
1112		- $tags = explode(',', $instance['item_tags']);
	1267	+ $tags = explode(',', $instance['item_tags']);
1113	1268
1114		- ?>
1115		- <div class="ui-e-tags <?php echo esc_attr($settings['tags_animation']);?>">
1116		- <?php foreach($tags as $tag) : ?>
1117		- <span class="ui-e-tag">
1118		- <?php
1119		- echo esc_html($tag);
1120		- echo end($tags) !== $tag ? ', ': ''; // print separator if is not last item
1121		- ?>
1122		- </span>
1123		- <?php endforeach; ?>
1124		- </div>
1125		- <?php
	1269	+ ?>
	1270	+ <div class="ui-e-tags <?php echo esc_attr($settings['tags_animation']); ?>">
	1271	+ <?php foreach ($tags as $tag) : ?>
	1272	+ <span class="ui-e-tag">
	1273	+ <?php
	1274	+ echo esc_html($tag);
	1275	+ echo end($tags) !== $tag ? ', ' : ''; // print separator if is not last item
	1276	+ ?>
	1277	+ </span>
	1278	+ <?php endforeach; ?>
	1279	+ </div>
	1280	+ <?php
	1281	+ }
	1282	+ protected function TRAIT_render_gallery_filters($settings)
	1283	+ {
	1284	+ if ($this->is_option('filters', 'yes', '!==')) {
	1285	+ return;
1126	1286	}
1127		- protected function TRAIT_render_gallery_filters($settings)
1128		- {
1129		- if( $settings['filters'] !== 'yes' ){
1130		- return;
1131		- }
1132	1287
1133		- $filters = [];
	1288	+ $filters = [];
1134	1289
1135		- foreach( $settings['gallery_items'] as $item ) {
	1290	+ foreach ($settings['gallery_items'] as $item) {
1136	1291
1137		- // tags are comma separated strings
1138		- $tags = explode(',', $item['item_tags']);
1139		- $tags = array_map('trim', $tags);
	1292	+ // tags are comma separated strings
	1293	+ $tags = explode(',', $item['item_tags']);
	1294	+ $tags = array_map('trim', $tags);
1140	1295
1141		- foreach ( $tags as $tag ) {
1142		- // skip duplicates or empty tags
1143		- if( in_array($tag, $filters) || empty($tag) ){
1144		- continue;
1145		- }
	1296	+ foreach ($tags as $tag) {
	1297	+ // skip duplicates or empty tags
	1298	+ if (in_array($tag, $filters) || empty($tag)) {
	1299	+ continue;
	1300	+ }
1146	1301
1147		- $filters[] = $tag;
1148		- }
	1302	+ $filters[] = $tag;
1149	1303	}
	1304	+ }
1150	1305
1151		- ?>
1152		- <div class="ui-e-filters">
	1306	+ ?>
	1307	+ <div class="ui-e-filters">
1153	1308
1154		- <button class="ui-e-filter-item" data-filter="all">
1155		- <?php echo esc_html( $settings['clear_text'] ); ?>
1156		- </button>
	1309	+ <button class="ui-e-filter-item" data-filter="all">
	1310	+ <?php echo esc_html($settings['clear_text']); ?>
	1311	+ </button>
1157	1312
1158		- <?php foreach($filters as $filter) : ?>
1159		- <button class="ui-e-filter-item" data-filter="<?php echo sanitize_title($filter); ?>">
1160		- <?php echo esc_html($filter); ?>
1161		- </button>
1162		- <?php endforeach; ?>
	1313	+ <?php foreach ($filters as $filter) : ?>
	1314	+ <button class="ui-e-filter-item" data-filter="<?php echo esc_attr(sanitize_title($filter)); ?>">
	1315	+ <?php echo esc_html($filter); ?>
	1316	+ </button>
	1317	+ <?php endforeach; ?>
1163	1318
1164		- </div>
1165		- <?php
1166		- }
1167		-}
	1319	+ </div>
	1320	+<?php
	1321	+ }
	1322	+}