← All changes | includes/controls/groups/background.php +84 -123 4.0.9 → 3.9.0 View file →

		@@ -91,21 +91,21 @@
91	91	*/
92	92	private static function get_default_background_types() {
93	93	return [
94	94	'classic' => [
95		- 'title' => esc_html__( 'Classic', 'elementor' ),
	95	+ 'title' => esc_html_x( 'Classic', 'Background Control', 'elementor' ),
96	96	'icon' => 'eicon-paint-brush',
97	97	],
98	98	'gradient' => [
99		- 'title' => esc_html__( 'Gradient', 'elementor' ),
	99	+ 'title' => esc_html_x( 'Gradient', 'Background Control', 'elementor' ),
100	100	'icon' => 'eicon-barcode',
101	101	],
102	102	'video' => [
103		- 'title' => esc_html__( 'Video', 'elementor' ),
	103	+ 'title' => esc_html_x( 'Video', 'Background Control', 'elementor' ),
104	104	'icon' => 'eicon-video-camera',
105	105	],
106	106	'slideshow' => [
107		- 'title' => esc_html__( 'Slideshow', 'elementor' ),
	107	+ 'title' => esc_html_x( 'Slideshow', 'Background Control', 'elementor' ),
108	108	'icon' => 'eicon-slideshow',
109	109	],
110	110	];
111	111	}
		@@ -120,59 +120,21 @@
120	120	*
121	121	* @return array Control fields.
122	122	*/
123	123	public function init_fields() {
124		- $active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
125		-
126		- $location_device_args = [];
127		- $location_device_defaults = [
128		- 'default' => [
129		- 'unit' => '%',
130		- ],
131		- ];
132		-
133		- $angel_device_args = [];
134		- $angel_device_defaults = [
135		- 'default' => [
136		- 'unit' => 'deg',
137		- ],
138		- ];
139		-
140		- $position_device_args = [];
141		- $position_device_defaults = [
142		- 'default' => 'center center',
143		- ];
144		-
145		- foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
146		- $location_device_args[ $breakpoint_name ] = $location_device_defaults;
147		- $angel_device_args[ $breakpoint_name ] = $angel_device_defaults;
148		- $position_device_args[ $breakpoint_name ] = $position_device_defaults;
149		- }
150		-
151	124	$fields = [];
152	125
153	126	$fields['background'] = [
154		- 'label' => esc_html__( 'Background Type', 'elementor' ),
	127	+ 'label' => esc_html_x( 'Background Type', 'Background Control', 'elementor' ),
155	128	'type' => Controls_Manager::CHOOSE,
156	129	'render_type' => 'ui',
157	130	];
158	131
159		- $fields['gradient_notice'] = [
160		- 'type' => Controls_Manager::ALERT,
161		- 'alert_type' => 'warning',
162		- 'content' => esc_html__( 'Set locations and angle for each breakpoint to ensure the gradient adapts to different screen sizes.', 'elementor' ),
163		- 'render_type' => 'ui',
164		- 'condition' => [
165		- 'background' => [ 'gradient' ],
166		- ],
167		- ];
168		-
169	132	$fields['color'] = [
170		- 'label' => esc_html__( 'Color', 'elementor' ),
	133	+ 'label' => esc_html_x( 'Color', 'Background Control', 'elementor' ),
171	134	'type' => Controls_Manager::COLOR,
172	135	'default' => '',
173		- 'control_type' => 'content',
174		- 'title' => esc_html__( 'Background Color', 'elementor' ),
	136	+ 'title' => esc_html_x( 'Background Color', 'Background Control', 'elementor' ),
175	137	'selectors' => [
176	138	'{{SELECTOR}}' => 'background-color: {{VALUE}};',
177	139	],
178	140	'condition' => [
		@@ -182,15 +144,13 @@
182	144
183	145	$fields['color_stop'] = [
184	146	'label' => esc_html_x( 'Location', 'Background Control', 'elementor' ),
185	147	'type' => Controls_Manager::SLIDER,
186		- 'size_units' => [ '%', 'custom' ],
	148	+ 'size_units' => [ '%' ],
187	149	'default' => [
188	150	'unit' => '%',
189	151	'size' => 0,
190	152	],
191		- 'device_args' => $location_device_args,
192		- 'responsive' => true,
193	153	'render_type' => 'ui',
194	154	'condition' => [
195	155	'background' => [ 'gradient' ],
196	156	],
		@@ -197,13 +157,12 @@
197	157	'of_type' => 'gradient',
198	158	];
199	159
200	160	$fields['color_b'] = [
201		- 'label' => esc_html__( 'Second Color', 'elementor' ),
	161	+ 'label' => esc_html_x( 'Second Color', 'Background Control', 'elementor' ),
202	162	'type' => Controls_Manager::COLOR,
203	163	'default' => '#f2295b',
204	164	'render_type' => 'ui',
205		- 'control_type' => 'content',
206	165	'condition' => [
207	166	'background' => [ 'gradient' ],
208	167	],
209	168	'of_type' => 'gradient',
		@@ -211,15 +170,13 @@
211	170
212	171	$fields['color_b_stop'] = [
213	172	'label' => esc_html_x( 'Location', 'Background Control', 'elementor' ),
214	173	'type' => Controls_Manager::SLIDER,
215		- 'size_units' => [ '%', 'custom' ],
	174	+ 'size_units' => [ '%' ],
216	175	'default' => [
217	176	'unit' => '%',
218	177	'size' => 100,
219	178	],
220		- 'device_args' => $location_device_args,
221		- 'responsive' => true,
222	179	'render_type' => 'ui',
223	180	'condition' => [
224	181	'background' => [ 'gradient' ],
225	182	],
		@@ -229,10 +186,10 @@
229	186	$fields['gradient_type'] = [
230	187	'label' => esc_html_x( 'Type', 'Background Control', 'elementor' ),
231	188	'type' => Controls_Manager::SELECT,
232	189	'options' => [
233		- 'linear' => esc_html__( 'Linear', 'elementor' ),
234		- 'radial' => esc_html__( 'Radial', 'elementor' ),
	190	+ 'linear' => esc_html_x( 'Linear', 'Background Control', 'elementor' ),
	191	+ 'radial' => esc_html_x( 'Radial', 'Background Control', 'elementor' ),
235	192	],
236	193	'default' => 'linear',
237	194	'render_type' => 'ui',
238	195	'condition' => [
		@@ -241,17 +198,15 @@
241	198	'of_type' => 'gradient',
242	199	];
243	200
244	201	$fields['gradient_angle'] = [
245		- 'label' => esc_html__( 'Angle', 'elementor' ),
	202	+ 'label' => esc_html_x( 'Angle', 'Background Control', 'elementor' ),
246	203	'type' => Controls_Manager::SLIDER,
247		- 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
	204	+ 'size_units' => [ 'deg', 'grad', 'rad', 'turn' ],
248	205	'default' => [
249	206	'unit' => 'deg',
250	207	'size' => 180,
251	208	],
252		- 'device_args' => $angel_device_args,
253		- 'responsive' => true,
254	209	'selectors' => [
255	210	'{{SELECTOR}}' => 'background-color: transparent; background-image: linear-gradient({{SIZE}}{{UNIT}}, {{color.VALUE}} {{color_stop.SIZE}}{{color_stop.UNIT}}, {{color_b.VALUE}} {{color_b_stop.SIZE}}{{color_b_stop.UNIT}})',
256	211	],
257	212	'condition' => [
		@@ -261,24 +216,22 @@
261	216	'of_type' => 'gradient',
262	217	];
263	218
264	219	$fields['gradient_position'] = [
265		- 'label' => esc_html__( 'Position', 'elementor' ),
	220	+ 'label' => esc_html_x( 'Position', 'Background Control', 'elementor' ),
266	221	'type' => Controls_Manager::SELECT,
267	222	'options' => [
268		- 'center center' => esc_html__( 'Center Center', 'elementor' ),
269		- 'center left' => esc_html__( 'Center Left', 'elementor' ),
270		- 'center right' => esc_html__( 'Center Right', 'elementor' ),
271		- 'top center' => esc_html__( 'Top Center', 'elementor' ),
272		- 'top left' => esc_html__( 'Top Left', 'elementor' ),
273		- 'top right' => esc_html__( 'Top Right', 'elementor' ),
274		- 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
275		- 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
276		- 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
	223	+ 'center center' => esc_html_x( 'Center Center', 'Background Control', 'elementor' ),
	224	+ 'center left' => esc_html_x( 'Center Left', 'Background Control', 'elementor' ),
	225	+ 'center right' => esc_html_x( 'Center Right', 'Background Control', 'elementor' ),
	226	+ 'top center' => esc_html_x( 'Top Center', 'Background Control', 'elementor' ),
	227	+ 'top left' => esc_html_x( 'Top Left', 'Background Control', 'elementor' ),
	228	+ 'top right' => esc_html_x( 'Top Right', 'Background Control', 'elementor' ),
	229	+ 'bottom center' => esc_html_x( 'Bottom Center', 'Background Control', 'elementor' ),
	230	+ 'bottom left' => esc_html_x( 'Bottom Left', 'Background Control', 'elementor' ),
	231	+ 'bottom right' => esc_html_x( 'Bottom Right', 'Background Control', 'elementor' ),
277	232	],
278	233	'default' => 'center center',
279		- 'device_args' => $position_device_args,
280		- 'responsive' => true,
281	234	'selectors' => [
282	235	'{{SELECTOR}}' => 'background-color: transparent; background-image: radial-gradient(at {{VALUE}}, {{color.VALUE}} {{color_stop.SIZE}}{{color_stop.UNIT}}, {{color_b.VALUE}} {{color_b_stop.SIZE}}{{color_b_stop.UNIT}})',
283	236	],
284	237	'condition' => [
		@@ -288,22 +241,18 @@
288	241	'of_type' => 'gradient',
289	242	];
290	243
291	244	$fields['image'] = [
292		- 'label' => esc_html__( 'Image', 'elementor' ),
	245	+ 'label' => esc_html_x( 'Image', 'Background Control', 'elementor' ),
293	246	'type' => Controls_Manager::MEDIA,
294		- 'ai' => [
295		- 'category' => 'background',
296		- ],
297	247	'dynamic' => [
298	248	'active' => true,
299	249	],
300	250	'responsive' => true,
301		- 'title' => esc_html__( 'Background Image', 'elementor' ),
	251	+ 'title' => esc_html_x( 'Background Image', 'Background Control', 'elementor' ),
302	252	'selectors' => [
303	253	'{{SELECTOR}}' => 'background-image: url("{{URL}}");',
304	254	],
305		- 'has_sizes' => true,
306	255	'render_type' => 'template',
307	256	'condition' => [
308	257	'background' => [ 'classic' ],
309	258	],
		@@ -309,25 +258,24 @@
309	258	],
310	259	];
311	260
312	261	$fields['position'] = [
313		- 'label' => esc_html__( 'Position', 'elementor' ),
	262	+ 'label' => esc_html_x( 'Position', 'Background Control', 'elementor' ),
314	263	'type' => Controls_Manager::SELECT,
315	264	'default' => '',
316		- 'separator' => 'before',
317	265	'responsive' => true,
318	266	'options' => [
319		- '' => esc_html__( 'Default', 'elementor' ),
320		- 'center center' => esc_html__( 'Center Center', 'elementor' ),
321		- 'center left' => esc_html__( 'Center Left', 'elementor' ),
322		- 'center right' => esc_html__( 'Center Right', 'elementor' ),
323		- 'top center' => esc_html__( 'Top Center', 'elementor' ),
324		- 'top left' => esc_html__( 'Top Left', 'elementor' ),
325		- 'top right' => esc_html__( 'Top Right', 'elementor' ),
326		- 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
327		- 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
328		- 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
329		- 'initial' => esc_html__( 'Custom', 'elementor' ),
	267	+ '' => esc_html_x( 'Default', 'Background Control', 'elementor' ),
	268	+ 'center center' => esc_html_x( 'Center Center', 'Background Control', 'elementor' ),
	269	+ 'center left' => esc_html_x( 'Center Left', 'Background Control', 'elementor' ),
	270	+ 'center right' => esc_html_x( 'Center Right', 'Background Control', 'elementor' ),
	271	+ 'top center' => esc_html_x( 'Top Center', 'Background Control', 'elementor' ),
	272	+ 'top left' => esc_html_x( 'Top Left', 'Background Control', 'elementor' ),
	273	+ 'top right' => esc_html_x( 'Top Right', 'Background Control', 'elementor' ),
	274	+ 'bottom center' => esc_html_x( 'Bottom Center', 'Background Control', 'elementor' ),
	275	+ 'bottom left' => esc_html_x( 'Bottom Left', 'Background Control', 'elementor' ),
	276	+ 'bottom right' => esc_html_x( 'Bottom Right', 'Background Control', 'elementor' ),
	277	+ 'initial' => esc_html_x( 'Custom', 'Background Control', 'elementor' ),
330	278
331	279	],
332	280	'selectors' => [
333	281	'{{SELECTOR}}' => 'background-position: {{VALUE}};',
		@@ -338,19 +286,22 @@
338	286	],
339	287	];
340	288
341	289	$fields['xpos'] = [
342		- 'label' => esc_html__( 'X Position', 'elementor' ),
	290	+ 'label' => esc_html_x( 'X Position', 'Background Control', 'elementor' ),
343	291	'type' => Controls_Manager::SLIDER,
344	292	'responsive' => true,
345		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	293	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
346	294	'default' => [
	295	+ 'unit' => 'px',
347	296	'size' => 0,
348	297	],
349	298	'tablet_default' => [
	299	+ 'unit' => 'px',
350	300	'size' => 0,
351	301	],
352	302	'mobile_default' => [
	303	+ 'unit' => 'px',
353	304	'size' => 0,
354	305	],
355	306	'range' => [
356	307	'px' => [
		@@ -381,19 +332,22 @@
381	332	'required' => true,
382	333	];
383	334
384	335	$fields['ypos'] = [
385		- 'label' => esc_html__( 'Y Position', 'elementor' ),
	336	+ 'label' => esc_html_x( 'Y Position', 'Background Control', 'elementor' ),
386	337	'type' => Controls_Manager::SLIDER,
387	338	'responsive' => true,
388		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
	339	+ 'size_units' => [ 'px', 'em', '%', 'vh' ],
389	340	'default' => [
	341	+ 'unit' => 'px',
390	342	'size' => 0,
391	343	],
392	344	'tablet_default' => [
	345	+ 'unit' => 'px',
393	346	'size' => 0,
394	347	],
395	348	'mobile_default' => [
	349	+ 'unit' => 'px',
396	350	'size' => 0,
397	351	],
398	352	'range' => [
399	353	'px' => [
		@@ -428,9 +382,9 @@
428	382	'label' => esc_html_x( 'Attachment', 'Background Control', 'elementor' ),
429	383	'type' => Controls_Manager::SELECT,
430	384	'default' => '',
431	385	'options' => [
432		- '' => esc_html__( 'Default', 'elementor' ),
	386	+ '' => esc_html_x( 'Default', 'Background Control', 'elementor' ),
433	387	'scroll' => esc_html_x( 'Scroll', 'Background Control', 'elementor' ),
434	388	'fixed' => esc_html_x( 'Fixed', 'Background Control', 'elementor' ),
435	389	],
436	390	'selectors' => [
		@@ -445,8 +399,9 @@
445	399	$fields['attachment_alert'] = [
446	400	'type' => Controls_Manager::RAW_HTML,
447	401	'content_classes' => 'elementor-control-field-description',
448	402	'raw' => esc_html__( 'Note: Attachment Fixed works only on desktop.', 'elementor' ),
	403	+ 'separator' => 'none',
449	404	'condition' => [
450	405	'background' => [ 'classic' ],
451	406	'image[url]!' => '',
452	407	'attachment' => 'fixed',
		@@ -458,13 +413,13 @@
458	413	'type' => Controls_Manager::SELECT,
459	414	'default' => '',
460	415	'responsive' => true,
461	416	'options' => [
462		- '' => esc_html__( 'Default', 'elementor' ),
463		- 'no-repeat' => esc_html__( 'No-repeat', 'elementor' ),
464		- 'repeat' => esc_html__( 'Repeat', 'elementor' ),
465		- 'repeat-x' => esc_html__( 'Repeat-x', 'elementor' ),
466		- 'repeat-y' => esc_html__( 'Repeat-y', 'elementor' ),
	417	+ '' => esc_html_x( 'Default', 'Background Control', 'elementor' ),
	418	+ 'no-repeat' => esc_html_x( 'No-repeat', 'Background Control', 'elementor' ),
	419	+ 'repeat' => esc_html_x( 'Repeat', 'Background Control', 'elementor' ),
	420	+ 'repeat-x' => esc_html_x( 'Repeat-x', 'Background Control', 'elementor' ),
	421	+ 'repeat-y' => esc_html_x( 'Repeat-y', 'Background Control', 'elementor' ),
467	422	],
468	423	'selectors' => [
469	424	'{{SELECTOR}}' => 'background-repeat: {{VALUE}};',
470	425	],
		@@ -474,18 +429,18 @@
474	429	],
475	430	];
476	431
477	432	$fields['size'] = [
478		- 'label' => esc_html__( 'Display Size', 'elementor' ),
	433	+ 'label' => esc_html_x( 'Size', 'Background Control', 'elementor' ),
479	434	'type' => Controls_Manager::SELECT,
480	435	'responsive' => true,
481	436	'default' => '',
482	437	'options' => [
483		- '' => esc_html__( 'Default', 'elementor' ),
484		- 'auto' => esc_html__( 'Auto', 'elementor' ),
485		- 'cover' => esc_html__( 'Cover', 'elementor' ),
486		- 'contain' => esc_html__( 'Contain', 'elementor' ),
487		- 'initial' => esc_html__( 'Custom', 'elementor' ),
	438	+ '' => esc_html_x( 'Default', 'Background Control', 'elementor' ),
	439	+ 'auto' => esc_html_x( 'Auto', 'Background Control', 'elementor' ),
	440	+ 'cover' => esc_html_x( 'Cover', 'Background Control', 'elementor' ),
	441	+ 'contain' => esc_html_x( 'Contain', 'Background Control', 'elementor' ),
	442	+ 'initial' => esc_html_x( 'Custom', 'Background Control', 'elementor' ),
488	443	],
489	444	'selectors' => [
490	445	'{{SELECTOR}}' => 'background-size: {{VALUE}};',
491	446	],
		@@ -495,16 +450,25 @@
495	450	],
496	451	];
497	452
498	453	$fields['bg_width'] = [
499		- 'label' => esc_html__( 'Width', 'elementor' ),
	454	+ 'label' => esc_html_x( 'Width', 'Background Control', 'elementor' ),
500	455	'type' => Controls_Manager::SLIDER,
501	456	'responsive' => true,
502		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	457	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
503	458	'range' => [
504	459	'px' => [
	460	+ 'min' => 0,
505	461	'max' => 1000,
506	462	],
	463	+ '%' => [
	464	+ 'min' => 0,
	465	+ 'max' => 100,
	466	+ ],
	467	+ 'vw' => [
	468	+ 'min' => 0,
	469	+ 'max' => 100,
	470	+ ],
507	471	],
508	472	'default' => [
509	473	'size' => 100,
510	474	'unit' => '%',
		@@ -521,9 +485,9 @@
521	485	],
522	486	];
523	487
524	488	$fields['video_link'] = [
525		- 'label' => esc_html__( 'Video Link', 'elementor' ),
	489	+ 'label' => esc_html_x( 'Video Link', 'Background Control', 'elementor' ),
526	490	'type' => Controls_Manager::TEXT,
527	491	'placeholder' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
528	492	'description' => esc_html__( 'YouTube/Vimeo link, or link to video file (mp4 is recommended).', 'elementor' ),
529	493	'label_block' => true,
		@@ -534,11 +498,8 @@
534	498	TagsModule::POST_META_CATEGORY,
535	499	TagsModule::URL_CATEGORY,
536	500	],
537	501	],
538		- 'ai' => [
539		- 'active' => false,
540		- ],
541	502	'condition' => [
542	503	'background' => [ 'video' ],
543	504	],
544	505	'of_type' => 'video',
		@@ -603,9 +564,9 @@
603	564	'frontend_available' => true,
604	565	];
605	566
606	567	$fields['video_fallback'] = [
607		- 'label' => esc_html__( 'Background Fallback', 'elementor' ),
	568	+ 'label' => esc_html_x( 'Background Fallback', 'Background Control', 'elementor' ),
608	569	'description' => esc_html__( 'This cover image will replace the background video in case that the video could not be loaded.', 'elementor' ),
609	570	'type' => Controls_Manager::MEDIA,
610	571	'dynamic' => [
611	572	'active' => true,
		@@ -619,9 +580,9 @@
619	580	'of_type' => 'video',
620	581	];
621	582
622	583	$fields['slideshow_gallery'] = [
623		- 'label' => esc_html__( 'Images', 'elementor' ),
	584	+ 'label' => esc_html_x( 'Images', 'Background Control', 'elementor' ),
624	585	'type' => Controls_Manager::GALLERY,
625	586	'condition' => [
626	587	'background' => [ 'slideshow' ],
627	588	],
		@@ -704,17 +665,17 @@
704	665	'default' => '',
705	666	'responsive' => true,
706	667	'options' => [
707	668	'' => esc_html__( 'Default', 'elementor' ),
708		- 'center center' => esc_html__( 'Center Center', 'elementor' ),
709		- 'center left' => esc_html__( 'Center Left', 'elementor' ),
710		- 'center right' => esc_html__( 'Center Right', 'elementor' ),
711		- 'top center' => esc_html__( 'Top Center', 'elementor' ),
712		- 'top left' => esc_html__( 'Top Left', 'elementor' ),
713		- 'top right' => esc_html__( 'Top Right', 'elementor' ),
714		- 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
715		- 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
716		- 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
	669	+ 'center center' => esc_html_x( 'Center Center', 'Background Control', 'elementor' ),
	670	+ 'center left' => esc_html_x( 'Center Left', 'Background Control', 'elementor' ),
	671	+ 'center right' => esc_html_x( 'Center Right', 'Background Control', 'elementor' ),
	672	+ 'top center' => esc_html_x( 'Top Center', 'Background Control', 'elementor' ),
	673	+ 'top left' => esc_html_x( 'Top Left', 'Background Control', 'elementor' ),
	674	+ 'top right' => esc_html_x( 'Top Right', 'Background Control', 'elementor' ),
	675	+ 'bottom center' => esc_html_x( 'Bottom Center', 'Background Control', 'elementor' ),
	676	+ 'bottom left' => esc_html_x( 'Bottom Left', 'Background Control', 'elementor' ),
	677	+ 'bottom right' => esc_html_x( 'Bottom Right', 'Background Control', 'elementor' ),
717	678	],
718	679	'selectors' => [
719	680	'{{WRAPPER}} .elementor-background-slideshow__slide__image' => 'background-position: {{VALUE}};',
720	681	],