← All changes | includes/controls/groups/background.php +84 -121 4.2.0-dev2 → 3.11.2 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,18 +241,15 @@
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	255	'has_sizes' => true,
		@@ -309,25 +259,25 @@
309	259	],
310	260	];
311	261
312	262	$fields['position'] = [
313		- 'label' => esc_html__( 'Position', 'elementor' ),
	263	+ 'label' => esc_html_x( 'Position', 'Background Control', 'elementor' ),
314	264	'type' => Controls_Manager::SELECT,
315	265	'default' => '',
316	266	'separator' => 'before',
317	267	'responsive' => true,
318	268	'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' ),
	269	+ '' => esc_html_x( 'Default', 'Background Control', 'elementor' ),
	270	+ 'center center' => esc_html_x( 'Center Center', 'Background Control', 'elementor' ),
	271	+ 'center left' => esc_html_x( 'Center Left', 'Background Control', 'elementor' ),
	272	+ 'center right' => esc_html_x( 'Center Right', 'Background Control', 'elementor' ),
	273	+ 'top center' => esc_html_x( 'Top Center', 'Background Control', 'elementor' ),
	274	+ 'top left' => esc_html_x( 'Top Left', 'Background Control', 'elementor' ),
	275	+ 'top right' => esc_html_x( 'Top Right', 'Background Control', 'elementor' ),
	276	+ 'bottom center' => esc_html_x( 'Bottom Center', 'Background Control', 'elementor' ),
	277	+ 'bottom left' => esc_html_x( 'Bottom Left', 'Background Control', 'elementor' ),
	278	+ 'bottom right' => esc_html_x( 'Bottom Right', 'Background Control', 'elementor' ),
	279	+ 'initial' => esc_html_x( 'Custom', 'Background Control', 'elementor' ),
330	280
331	281	],
332	282	'selectors' => [
333	283	'{{SELECTOR}}' => 'background-position: {{VALUE}};',
		@@ -338,19 +288,22 @@
338	288	],
339	289	];
340	290
341	291	$fields['xpos'] = [
342		- 'label' => esc_html__( 'X Position', 'elementor' ),
	292	+ 'label' => esc_html_x( 'X Position', 'Background Control', 'elementor' ),
343	293	'type' => Controls_Manager::SLIDER,
344	294	'responsive' => true,
345		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	295	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
346	296	'default' => [
	297	+ 'unit' => 'px',
347	298	'size' => 0,
348	299	],
349	300	'tablet_default' => [
	301	+ 'unit' => 'px',
350	302	'size' => 0,
351	303	],
352	304	'mobile_default' => [
	305	+ 'unit' => 'px',
353	306	'size' => 0,
354	307	],
355	308	'range' => [
356	309	'px' => [
		@@ -381,19 +334,22 @@
381	334	'required' => true,
382	335	];
383	336
384	337	$fields['ypos'] = [
385		- 'label' => esc_html__( 'Y Position', 'elementor' ),
	338	+ 'label' => esc_html_x( 'Y Position', 'Background Control', 'elementor' ),
386	339	'type' => Controls_Manager::SLIDER,
387	340	'responsive' => true,
388		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
	341	+ 'size_units' => [ 'px', 'em', '%', 'vh' ],
389	342	'default' => [
	343	+ 'unit' => 'px',
390	344	'size' => 0,
391	345	],
392	346	'tablet_default' => [
	347	+ 'unit' => 'px',
393	348	'size' => 0,
394	349	],
395	350	'mobile_default' => [
	351	+ 'unit' => 'px',
396	352	'size' => 0,
397	353	],
398	354	'range' => [
399	355	'px' => [
		@@ -428,9 +384,9 @@
428	384	'label' => esc_html_x( 'Attachment', 'Background Control', 'elementor' ),
429	385	'type' => Controls_Manager::SELECT,
430	386	'default' => '',
431	387	'options' => [
432		- '' => esc_html__( 'Default', 'elementor' ),
	388	+ '' => esc_html_x( 'Default', 'Background Control', 'elementor' ),
433	389	'scroll' => esc_html_x( 'Scroll', 'Background Control', 'elementor' ),
434	390	'fixed' => esc_html_x( 'Fixed', 'Background Control', 'elementor' ),
435	391	],
436	392	'selectors' => [
		@@ -445,8 +401,9 @@
445	401	$fields['attachment_alert'] = [
446	402	'type' => Controls_Manager::RAW_HTML,
447	403	'content_classes' => 'elementor-control-field-description',
448	404	'raw' => esc_html__( 'Note: Attachment Fixed works only on desktop.', 'elementor' ),
	405	+ 'separator' => 'none',
449	406	'condition' => [
450	407	'background' => [ 'classic' ],
451	408	'image[url]!' => '',
452	409	'attachment' => 'fixed',
		@@ -458,13 +415,13 @@
458	415	'type' => Controls_Manager::SELECT,
459	416	'default' => '',
460	417	'responsive' => true,
461	418	'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' ),
	419	+ '' => esc_html_x( 'Default', 'Background Control', 'elementor' ),
	420	+ 'no-repeat' => esc_html_x( 'No-repeat', 'Background Control', 'elementor' ),
	421	+ 'repeat' => esc_html_x( 'Repeat', 'Background Control', 'elementor' ),
	422	+ 'repeat-x' => esc_html_x( 'Repeat-x', 'Background Control', 'elementor' ),
	423	+ 'repeat-y' => esc_html_x( 'Repeat-y', 'Background Control', 'elementor' ),
467	424	],
468	425	'selectors' => [
469	426	'{{SELECTOR}}' => 'background-repeat: {{VALUE}};',
470	427	],
		@@ -474,18 +431,18 @@
474	431	],
475	432	];
476	433
477	434	$fields['size'] = [
478		- 'label' => esc_html__( 'Display Size', 'elementor' ),
	435	+ 'label' => esc_html_x( 'Display Size', 'Background Control', 'elementor' ),
479	436	'type' => Controls_Manager::SELECT,
480	437	'responsive' => true,
481	438	'default' => '',
482	439	'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' ),
	440	+ '' => esc_html_x( 'Default', 'Background Control', 'elementor' ),
	441	+ 'auto' => esc_html_x( 'Auto', 'Background Control', 'elementor' ),
	442	+ 'cover' => esc_html_x( 'Cover', 'Background Control', 'elementor' ),
	443	+ 'contain' => esc_html_x( 'Contain', 'Background Control', 'elementor' ),
	444	+ 'initial' => esc_html_x( 'Custom', 'Background Control', 'elementor' ),
488	445	],
489	446	'selectors' => [
490	447	'{{SELECTOR}}' => 'background-size: {{VALUE}};',
491	448	],
		@@ -495,16 +452,25 @@
495	452	],
496	453	];
497	454
498	455	$fields['bg_width'] = [
499		- 'label' => esc_html__( 'Width', 'elementor' ),
	456	+ 'label' => esc_html_x( 'Width', 'Background Control', 'elementor' ),
500	457	'type' => Controls_Manager::SLIDER,
501	458	'responsive' => true,
502		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	459	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
503	460	'range' => [
504	461	'px' => [
	462	+ 'min' => 0,
505	463	'max' => 1000,
506	464	],
	465	+ '%' => [
	466	+ 'min' => 0,
	467	+ 'max' => 100,
	468	+ ],
	469	+ 'vw' => [
	470	+ 'min' => 0,
	471	+ 'max' => 100,
	472	+ ],
507	473	],
508	474	'default' => [
509	475	'size' => 100,
510	476	'unit' => '%',
		@@ -521,9 +487,9 @@
521	487	],
522	488	];
523	489
524	490	$fields['video_link'] = [
525		- 'label' => esc_html__( 'Video Link', 'elementor' ),
	491	+ 'label' => esc_html_x( 'Video Link', 'Background Control', 'elementor' ),
526	492	'type' => Controls_Manager::TEXT,
527	493	'placeholder' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
528	494	'description' => esc_html__( 'YouTube/Vimeo link, or link to video file (mp4 is recommended).', 'elementor' ),
529	495	'label_block' => true,
		@@ -534,11 +500,8 @@
534	500	TagsModule::POST_META_CATEGORY,
535	501	TagsModule::URL_CATEGORY,
536	502	],
537	503	],
538		- 'ai' => [
539		- 'active' => false,
540		- ],
541	504	'condition' => [
542	505	'background' => [ 'video' ],
543	506	],
544	507	'of_type' => 'video',
		@@ -603,9 +566,9 @@
603	566	'frontend_available' => true,
604	567	];
605	568
606	569	$fields['video_fallback'] = [
607		- 'label' => esc_html__( 'Background Fallback', 'elementor' ),
	570	+ 'label' => esc_html_x( 'Background Fallback', 'Background Control', 'elementor' ),
608	571	'description' => esc_html__( 'This cover image will replace the background video in case that the video could not be loaded.', 'elementor' ),
609	572	'type' => Controls_Manager::MEDIA,
610	573	'dynamic' => [
611	574	'active' => true,
		@@ -619,9 +582,9 @@
619	582	'of_type' => 'video',
620	583	];
621	584
622	585	$fields['slideshow_gallery'] = [
623		- 'label' => esc_html__( 'Images', 'elementor' ),
	586	+ 'label' => esc_html_x( 'Images', 'Background Control', 'elementor' ),
624	587	'type' => Controls_Manager::GALLERY,
625	588	'condition' => [
626	589	'background' => [ 'slideshow' ],
627	590	],
		@@ -704,17 +667,17 @@
704	667	'default' => '',
705	668	'responsive' => true,
706	669	'options' => [
707	670	'' => 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' ),
	671	+ 'center center' => esc_html_x( 'Center Center', 'Background Control', 'elementor' ),
	672	+ 'center left' => esc_html_x( 'Center Left', 'Background Control', 'elementor' ),
	673	+ 'center right' => esc_html_x( 'Center Right', 'Background Control', 'elementor' ),
	674	+ 'top center' => esc_html_x( 'Top Center', 'Background Control', 'elementor' ),
	675	+ 'top left' => esc_html_x( 'Top Left', 'Background Control', 'elementor' ),
	676	+ 'top right' => esc_html_x( 'Top Right', 'Background Control', 'elementor' ),
	677	+ 'bottom center' => esc_html_x( 'Bottom Center', 'Background Control', 'elementor' ),
	678	+ 'bottom left' => esc_html_x( 'Bottom Left', 'Background Control', 'elementor' ),
	679	+ 'bottom right' => esc_html_x( 'Bottom Right', 'Background Control', 'elementor' ),
717	680	],
718	681	'selectors' => [
719	682	'{{WRAPPER}} .elementor-background-slideshow__slide__image' => 'background-position: {{VALUE}};',
720	683	],