PluginProbe
Elementor Website Builder – more than just a page builder / 3.2.0
Elementor Website Builder – more than just a page builder v3.2.0
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
← All changes | includes/widgets/image-box.php +195 -434 4.2.0-dev23.2.0 View file →
@@ -41,9 +41,9 @@
41 41 *
42 42 * @return string Widget title.
43 43 */
44 44 public function get_title() {
45 - return esc_html__( 'Image Box', 'elementor' );
45 + return __( 'Image Box', 'elementor' );
46 46 }
47 47
48 48 /**
49 49 * Get widget icon.
@@ -72,31 +72,9 @@
72 72 public function get_keywords() {
73 73 return [ 'image', 'photo', 'visual', 'box' ];
74 74 }
75 75
76 - protected function is_dynamic_content(): bool {
77 - return false;
78 - }
79 -
80 76 /**
81 - * Get style dependencies.
82 - *
83 - * Retrieve the list of style dependencies the widget requires.
84 - *
85 - * @since 3.24.0
86 - * @access public
87 - *
88 - * @return array Widget style dependencies.
89 - */
90 - public function get_style_depends(): array {
91 - return [ 'widget-image-box' ];
92 - }
93 -
94 - public function has_widget_inner_wrapper(): bool {
95 - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
96 - }
97 -
98 - /**
99 77 * Register image box widget controls.
100 78 *
101 79 * Adds different input fields to allow the user to change and customize the widget settings.
102 80 *
@@ -106,9 +84,9 @@
106 84 protected function register_controls() {
107 85 $this->start_controls_section(
108 86 'section_image',
109 87 [
110 - 'label' => esc_html__( 'Image Box', 'elementor' ),
88 + 'label' => __( 'Image Box', 'elementor' ),
111 89 ]
112 90 );
113 91
114 92 $this->add_control(
@@ -113,9 +91,9 @@
113 91
114 92 $this->add_control(
115 93 'image',
116 94 [
117 - 'label' => esc_html__( 'Choose Image', 'elementor' ),
95 + 'label' => __( 'Choose Image', 'elementor' ),
118 96 'type' => Controls_Manager::MEDIA,
119 97 'dynamic' => [
120 98 'active' => true,
121 99 ],
@@ -129,11 +107,9 @@
129 107 Group_Control_Image_Size::get_type(),
130 108 [
131 109 'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
132 110 'default' => 'full',
133 - 'condition' => [
134 - 'image[url]!' => '',
135 - ],
111 + 'separator' => 'none',
136 112 ]
137 113 );
138 114
139 115 $this->add_control(
@@ -138,15 +114,15 @@
138 114
139 115 $this->add_control(
140 116 'title_text',
141 117 [
142 - 'label' => esc_html__( 'Title', 'elementor' ),
118 + 'label' => __( 'Title & Description', 'elementor' ),
143 119 'type' => Controls_Manager::TEXT,
144 120 'dynamic' => [
145 121 'active' => true,
146 122 ],
147 - 'default' => esc_html__( 'This is the heading', 'elementor' ),
148 - 'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
123 + 'default' => __( 'This is the heading', 'elementor' ),
124 + 'placeholder' => __( 'Enter your title', 'elementor' ),
149 125 'label_block' => true,
150 126 ]
151 127 );
152 128
@@ -152,16 +128,18 @@
152 128
153 129 $this->add_control(
154 130 'description_text',
155 131 [
156 - 'label' => esc_html__( 'Description', 'elementor' ),
132 + 'label' => __( 'Content', 'elementor' ),
157 133 'type' => Controls_Manager::TEXTAREA,
158 134 'dynamic' => [
159 135 'active' => true,
160 136 ],
161 - 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
162 - 'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
137 + 'default' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
138 + 'placeholder' => __( 'Enter your description', 'elementor' ),
139 + 'separator' => 'none',
163 140 'rows' => 10,
141 + 'show_label' => false,
164 142 ]
165 143 );
166 144
167 145 $this->add_control(
@@ -166,149 +144,93 @@
166 144
167 145 $this->add_control(
168 146 'link',
169 147 [
170 - 'label' => esc_html__( 'Link', 'elementor' ),
148 + 'label' => __( 'Link', 'elementor' ),
171 149 'type' => Controls_Manager::URL,
172 150 'dynamic' => [
173 151 'active' => true,
174 152 ],
153 + 'placeholder' => __( 'https://your-link.com', 'elementor' ),
175 154 'separator' => 'before',
176 155 ]
177 156 );
178 157
179 158 $this->add_control(
180 - 'title_size',
181 - [
182 - 'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
183 - 'type' => Controls_Manager::SELECT,
184 - 'options' => [
185 - 'h1' => 'H1',
186 - 'h2' => 'H2',
187 - 'h3' => 'H3',
188 - 'h4' => 'H4',
189 - 'h5' => 'H5',
190 - 'h6' => 'H6',
191 - 'div' => 'div',
192 - 'span' => 'span',
193 - 'p' => 'p',
194 - ],
195 - 'default' => 'h3',
196 - ]
197 - );
198 -
199 - $this->end_controls_section();
200 -
201 - $this->start_controls_section(
202 - 'section_style_box',
203 - [
204 - 'label' => esc_html__( 'Box', 'elementor' ),
205 - 'tab' => Controls_Manager::TAB_STYLE,
206 - ]
207 - );
208 -
209 - $this->add_responsive_control(
210 159 'position',
211 160 [
212 - 'label' => esc_html__( 'Image Position', 'elementor' ),
161 + 'label' => __( 'Image Position', 'elementor' ),
213 162 'type' => Controls_Manager::CHOOSE,
214 163 'default' => 'top',
215 164 'options' => [
216 165 'left' => [
217 - 'title' => esc_html__( 'Left', 'elementor' ),
166 + 'title' => __( 'Left', 'elementor' ),
218 167 'icon' => 'eicon-h-align-left',
219 168 ],
220 169 'top' => [
221 - 'title' => esc_html__( 'Top', 'elementor' ),
170 + 'title' => __( 'Top', 'elementor' ),
222 171 'icon' => 'eicon-v-align-top',
223 172 ],
224 173 'right' => [
225 - 'title' => esc_html__( 'Right', 'elementor' ),
174 + 'title' => __( 'Right', 'elementor' ),
226 175 'icon' => 'eicon-h-align-right',
227 176 ],
228 177 ],
229 178 'prefix_class' => 'elementor-position-',
230 179 'toggle' => false,
231 - 'condition' => [
232 - 'image[url]!' => '',
233 - ],
234 180 ]
235 181 );
236 182
237 - $this->add_responsive_control(
238 - 'content_vertical_alignment',
183 + $this->add_control(
184 + 'title_size',
239 185 [
240 - 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
241 - 'type' => Controls_Manager::CHOOSE,
186 + 'label' => __( 'Title HTML Tag', 'elementor' ),
187 + 'type' => Controls_Manager::SELECT,
242 188 'options' => [
243 - 'top' => [
244 - 'title' => esc_html__( 'Top', 'elementor' ),
245 - 'icon' => 'eicon-v-align-top',
246 - ],
247 - 'middle' => [
248 - 'title' => esc_html__( 'Middle', 'elementor' ),
249 - 'icon' => 'eicon-v-align-middle',
250 - ],
251 - 'bottom' => [
252 - 'title' => esc_html__( 'Bottom', 'elementor' ),
253 - 'icon' => 'eicon-v-align-bottom',
254 - ],
189 + 'h1' => 'H1',
190 + 'h2' => 'H2',
191 + 'h3' => 'H3',
192 + 'h4' => 'H4',
193 + 'h5' => 'H5',
194 + 'h6' => 'H6',
195 + 'div' => 'div',
196 + 'span' => 'span',
197 + 'p' => 'p',
255 198 ],
256 - 'default' => 'top',
257 - 'toggle' => false,
258 - 'prefix_class' => 'elementor-vertical-align-',
259 - 'condition' => [
260 - 'position!' => 'top',
261 - ],
199 + 'default' => 'h3',
262 200 ]
263 201 );
264 202
265 - $this->add_responsive_control(
266 - 'text_align',
203 + $this->add_control(
204 + 'view',
267 205 [
268 - 'label' => esc_html__( 'Alignment', 'elementor' ),
269 - 'type' => Controls_Manager::CHOOSE,
270 - 'options' => [
271 - 'start' => [
272 - 'title' => esc_html__( 'Start', 'elementor' ),
273 - 'icon' => 'eicon-text-align-left',
274 - ],
275 - 'center' => [
276 - 'title' => esc_html__( 'Center', 'elementor' ),
277 - 'icon' => 'eicon-text-align-center',
278 - ],
279 - 'end' => [
280 - 'title' => esc_html__( 'End', 'elementor' ),
281 - 'icon' => 'eicon-text-align-right',
282 - ],
283 - 'justify' => [
284 - 'title' => esc_html__( 'Justified', 'elementor' ),
285 - 'icon' => 'eicon-text-align-justify',
286 - ],
287 - ],
288 - 'classes' => 'elementor-control-start-end',
289 - 'selectors_dictionary' => [
290 - 'left' => is_rtl() ? 'end' : 'start',
291 - 'right' => is_rtl() ? 'start' : 'end',
292 - ],
293 - 'selectors' => [
294 - '{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};',
295 - ],
296 - 'separator' => 'after',
206 + 'label' => __( 'View', 'elementor' ),
207 + 'type' => Controls_Manager::HIDDEN,
208 + 'default' => 'traditional',
297 209 ]
298 210 );
299 211
212 + $this->end_controls_section();
213 +
214 + $this->start_controls_section(
215 + 'section_style_image',
216 + [
217 + 'label' => __( 'Image', 'elementor' ),
218 + 'tab' => Controls_Manager::TAB_STYLE,
219 + ]
220 + );
221 +
300 222 $this->add_responsive_control(
301 223 'image_space',
302 224 [
303 - 'label' => esc_html__( 'Image Spacing', 'elementor' ),
225 + 'label' => __( 'Spacing', 'elementor' ),
304 226 'type' => Controls_Manager::SLIDER,
305 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
306 227 'default' => [
307 228 'size' => 15,
308 229 ],
309 230 'range' => [
310 231 'px' => [
232 + 'min' => 0,
311 233 'max' => 100,
312 234 ],
313 235 ],
314 236 'selectors' => [
@@ -316,56 +238,15 @@
316 238 '{{WRAPPER}}.elementor-position-left .elementor-image-box-img' => 'margin-right: {{SIZE}}{{UNIT}};',
317 239 '{{WRAPPER}}.elementor-position-top .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
318 240 '(mobile){{WRAPPER}} .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
319 241 ],
320 - 'condition' => [
321 - 'image[url]!' => '',
322 - ],
323 242 ]
324 243 );
325 244
326 245 $this->add_responsive_control(
327 - 'title_bottom_space',
328 - [
329 - 'label' => esc_html__( 'Content Spacing', 'elementor' ),
330 - 'type' => Controls_Manager::SLIDER,
331 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
332 - 'range' => [
333 - 'px' => [
334 - 'max' => 100,
335 - ],
336 - 'em' => [
337 - 'min' => 0,
338 - 'max' => 10,
339 - ],
340 - 'rem' => [
341 - 'min' => 0,
342 - 'max' => 10,
343 - ],
344 - ],
345 - 'selectors' => [
346 - '{{WRAPPER}} .elementor-image-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
347 - ],
348 - ]
349 - );
350 -
351 - $this->end_controls_section();
352 -
353 - $this->start_controls_section(
354 - 'section_style_image',
355 - [
356 - 'label' => esc_html__( 'Image', 'elementor' ),
357 - 'tab' => Controls_Manager::TAB_STYLE,
358 - 'condition' => [
359 - 'image[url]!' => '',
360 - ],
361 - ]
362 - );
363 -
364 - $this->add_responsive_control(
365 246 'image_size',
366 247 [
367 - 'label' => esc_html__( 'Width', 'elementor' ),
248 + 'label' => __( 'Width', 'elementor' ) . ' (%)',
368 249 'type' => Controls_Manager::SLIDER,
369 250 'default' => [
370 251 'size' => 30,
371 252 'unit' => '%',
@@ -375,9 +256,9 @@
375 256 ],
376 257 'mobile_default' => [
377 258 'unit' => '%',
378 259 ],
379 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
260 + 'size_units' => [ '%' ],
380 261 'range' => [
381 262 '%' => [
382 263 'min' => 5,
383 264 'max' => 100,
@@ -389,110 +270,32 @@
389 270 ]
390 271 );
391 272
392 273 $this->add_responsive_control(
393 - 'image_height',
394 - [
395 - 'label' => esc_html__( 'Height', 'elementor' ),
396 - 'type' => Controls_Manager::SLIDER,
397 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
398 - 'selectors' => [
399 - '{{WRAPPER}} .elementor-image-box-img img' => 'height: {{SIZE}}{{UNIT}};',
400 - ],
401 - ]
402 - );
403 -
404 - $this->add_responsive_control(
405 - 'image_object_fit',
406 - [
407 - 'label' => esc_html__( 'Object Fit', 'elementor' ),
408 - 'type' => Controls_Manager::SELECT,
409 - 'options' => [
410 - '' => esc_html__( 'Default', 'elementor' ),
411 - 'fill' => esc_html__( 'Fill', 'elementor' ),
412 - 'cover' => esc_html__( 'Cover', 'elementor' ),
413 - 'contain' => esc_html__( 'Contain', 'elementor' ),
414 - 'scale-down' => esc_html__( 'Scale Down', 'elementor' ),
415 - ],
416 - 'condition' => [
417 - 'image_height[size]!' => '',
418 - ],
419 - 'selectors' => [
420 - '{{WRAPPER}} .elementor-image-box-img img' => 'object-fit: {{VALUE}};',
421 - ],
422 - ]
423 - );
424 -
425 - $this->add_responsive_control(
426 - 'image_object_position',
427 - [
428 - 'label' => esc_html__( 'Object Position', 'elementor' ),
429 - 'type' => Controls_Manager::SELECT,
430 - 'options' => [
431 - 'center center' => esc_html__( 'Center Center', 'elementor' ),
432 - 'center left' => esc_html__( 'Center Left', 'elementor' ),
433 - 'center right' => esc_html__( 'Center Right', 'elementor' ),
434 - 'top center' => esc_html__( 'Top Center', 'elementor' ),
435 - 'top left' => esc_html__( 'Top Left', 'elementor' ),
436 - 'top right' => esc_html__( 'Top Right', 'elementor' ),
437 - 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
438 - 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
439 - 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
440 - ],
441 - 'default' => 'center center',
442 - 'selectors' => [
443 - '{{WRAPPER}} .elementor-image-box-img img' => 'object-position: {{VALUE}};',
444 - ],
445 - 'condition' => [
446 - 'image_height[size]!' => '',
447 - 'image_object_fit' => [ 'cover', 'contain', 'scale-down' ],
448 - ],
449 - ]
450 - );
451 -
452 - $this->add_group_control(
453 - Group_Control_Border::get_type(),
454 - [
455 - 'name' => 'image_border',
456 - 'selector' => '{{WRAPPER}} .elementor-image-box-img img',
457 - 'separator' => 'before',
458 - ]
459 - );
460 -
461 - $this->add_responsive_control(
462 274 'image_border_radius',
463 275 [
464 - 'label' => esc_html__( 'Border Radius', 'elementor' ),
276 + 'label' => __( 'Border Radius', 'elementor' ),
465 277 'type' => Controls_Manager::SLIDER,
466 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
278 + 'size_units' => [ 'px', '%' ],
467 279 'selectors' => [
468 - '{{WRAPPER}} .elementor-image-box-img img' => 'border-radius: {{SIZE}}{{UNIT}};',
280 + '{{WRAPPER}} .elementor-image-box-wrapper img' => 'border-radius: {{SIZE}}{{UNIT}};',
469 281 ],
470 282 ]
471 283 );
472 284
473 - $this->add_group_control(
474 - Group_Control_Box_Shadow::get_type(),
475 - [
476 - 'name' => 'image_box_shadow',
477 - 'selector' => '{{WRAPPER}} .elementor-image-box-img img',
478 - ]
479 - );
480 -
481 285 $this->add_control(
482 - 'separator_panel_style',
286 + 'hover_animation',
483 287 [
484 - 'type' => Controls_Manager::DIVIDER,
485 - 'style' => 'thick',
288 + 'label' => __( 'Hover Animation', 'elementor' ),
289 + 'type' => Controls_Manager::HOVER_ANIMATION,
486 290 ]
487 291 );
488 292
489 293 $this->start_controls_tabs( 'image_effects' );
490 294
491 - $this->start_controls_tab(
492 - 'normal',
295 + $this->start_controls_tab( 'normal',
493 296 [
494 - 'label' => esc_html__( 'Normal', 'elementor' ),
297 + 'label' => __( 'Normal', 'elementor' ),
495 298 ]
496 299 );
497 300
498 301 $this->add_group_control(
@@ -505,9 +308,9 @@
505 308
506 309 $this->add_control(
507 310 'image_opacity',
508 311 [
509 - 'label' => esc_html__( 'Opacity', 'elementor' ),
312 + 'label' => __( 'Opacity', 'elementor' ),
510 313 'type' => Controls_Manager::SLIDER,
511 314 'range' => [
512 315 'px' => [
513 316 'max' => 1,
@@ -520,14 +323,33 @@
520 323 ],
521 324 ]
522 325 );
523 326
327 + $this->add_control(
328 + 'background_hover_transition',
329 + [
330 + 'label' => __( 'Transition Duration', 'elementor' ),
331 + 'type' => Controls_Manager::SLIDER,
332 + 'default' => [
333 + 'size' => 0.3,
334 + ],
335 + 'range' => [
336 + 'px' => [
337 + 'max' => 3,
338 + 'step' => 0.1,
339 + ],
340 + ],
341 + 'selectors' => [
342 + '{{WRAPPER}} .elementor-image-box-img img' => 'transition-duration: {{SIZE}}s',
343 + ],
344 + ]
345 + );
346 +
524 347 $this->end_controls_tab();
525 348
526 - $this->start_controls_tab(
527 - 'hover',
349 + $this->start_controls_tab( 'hover',
528 350 [
529 - 'label' => esc_html__( 'Hover', 'elementor' ),
351 + 'label' => __( 'Hover', 'elementor' ),
530 352 ]
531 353 );
532 354
533 355 $this->add_group_control(
@@ -540,9 +362,9 @@
540 362
541 363 $this->add_control(
542 364 'image_opacity_hover',
543 365 [
544 - 'label' => esc_html__( 'Opacity', 'elementor' ),
366 + 'label' => __( 'Opacity', 'elementor' ),
545 367 'type' => Controls_Manager::SLIDER,
546 368 'range' => [
547 369 'px' => [
548 370 'max' => 1,
@@ -555,37 +377,8 @@
555 377 ],
556 378 ]
557 379 );
558 380
559 - $this->add_control(
560 - 'background_hover_transition',
561 - [
562 - 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
563 - 'type' => Controls_Manager::SLIDER,
564 - 'default' => [
565 - 'size' => 0.3,
566 - ],
567 - 'range' => [
568 - 'px' => [
569 - 'min' => 0,
570 - 'max' => 3,
571 - 'step' => 0.1,
572 - ],
573 - ],
574 - 'selectors' => [
575 - '{{WRAPPER}} .elementor-image-box-img img' => 'transition-duration: {{SIZE}}s',
576 - ],
577 - ]
578 - );
579 -
580 - $this->add_control(
581 - 'hover_animation',
582 - [
583 - 'label' => esc_html__( 'Hover Animation', 'elementor' ),
584 - 'type' => Controls_Manager::HOVER_ANIMATION,
585 - ]
586 - );
587 -
588 381 $this->end_controls_tab();
589 382
590 383 $this->end_controls_tabs();
591 384
@@ -593,62 +386,87 @@
593 386
594 387 $this->start_controls_section(
595 388 'section_style_content',
596 389 [
597 - 'label' => esc_html__( 'Content', 'elementor' ),
390 + 'label' => __( 'Content', 'elementor' ),
598 391 'tab' => Controls_Manager::TAB_STYLE,
599 392 ]
600 393 );
601 394
602 - $this->add_control(
603 - 'heading_title',
395 + $this->add_responsive_control(
396 + 'text_align',
604 397 [
605 - 'label' => esc_html__( 'Title', 'elementor' ),
606 - 'type' => Controls_Manager::HEADING,
607 - 'separator' => 'before',
398 + 'label' => __( 'Alignment', 'elementor' ),
399 + 'type' => Controls_Manager::CHOOSE,
400 + 'options' => [
401 + 'left' => [
402 + 'title' => __( 'Left', 'elementor' ),
403 + 'icon' => 'eicon-text-align-left',
404 + ],
405 + 'center' => [
406 + 'title' => __( 'Center', 'elementor' ),
407 + 'icon' => 'eicon-text-align-center',
408 + ],
409 + 'right' => [
410 + 'title' => __( 'Right', 'elementor' ),
411 + 'icon' => 'eicon-text-align-right',
412 + ],
413 + 'justify' => [
414 + 'title' => __( 'Justified', 'elementor' ),
415 + 'icon' => 'eicon-text-align-justify',
416 + ],
417 + ],
418 + 'selectors' => [
419 + '{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};',
420 + ],
608 421 ]
609 422 );
610 423
611 - $this->add_group_control(
612 - Group_Control_Typography::get_type(),
424 + $this->add_control(
425 + 'content_vertical_alignment',
613 426 [
614 - 'name' => 'title_typography',
615 - 'selector' => '{{WRAPPER}} .elementor-image-box-title',
616 - 'global' => [
617 - 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
427 + 'label' => __( 'Vertical Alignment', 'elementor' ),
428 + 'type' => Controls_Manager::SELECT,
429 + 'options' => [
430 + 'top' => __( 'Top', 'elementor' ),
431 + 'middle' => __( 'Middle', 'elementor' ),
432 + 'bottom' => __( 'Bottom', 'elementor' ),
618 433 ],
434 + 'default' => 'top',
435 + 'prefix_class' => 'elementor-vertical-align-',
619 436 ]
620 437 );
621 438
622 - $this->add_group_control(
623 - Group_Control_Text_Stroke::get_type(),
439 + $this->add_control(
440 + 'heading_title',
624 441 [
625 - 'name' => 'title_stroke',
626 - 'selector' => '{{WRAPPER}} .elementor-image-box-title',
442 + 'label' => __( 'Title', 'elementor' ),
443 + 'type' => Controls_Manager::HEADING,
444 + 'separator' => 'before',
627 445 ]
628 446 );
629 447
630 - $this->add_group_control(
631 - Group_Control_Text_Shadow::get_type(),
448 + $this->add_responsive_control(
449 + 'title_bottom_space',
632 450 [
633 - 'name' => 'title_shadow',
634 - 'selector' => '{{WRAPPER}} .elementor-image-box-title',
451 + 'label' => __( 'Spacing', 'elementor' ),
452 + 'type' => Controls_Manager::SLIDER,
453 + 'range' => [
454 + 'px' => [
455 + 'min' => 0,
456 + 'max' => 100,
457 + ],
458 + ],
459 + 'selectors' => [
460 + '{{WRAPPER}} .elementor-image-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
461 + ],
635 462 ]
636 463 );
637 464
638 - $this->start_controls_tabs( 'image_box_title_colors' );
639 -
640 - $this->start_controls_tab(
641 - 'image_box_title_colors_normal',
642 - [
643 - 'label' => esc_html__( 'Normal', 'elementor' ),
644 - ]
645 - );
646 -
647 465 $this->add_control(
648 466 'title_color',
649 467 [
650 - 'label' => esc_html__( 'Color', 'elementor' ),
468 + 'label' => __( 'Color', 'elementor' ),
651 469 'type' => Controls_Manager::COLOR,
652 470 'default' => '',
653 471 'selectors' => [
654 472 '{{WRAPPER}} .elementor-image-box-title' => 'color: {{VALUE}};',
@@ -658,58 +476,48 @@
658 476 ],
659 477 ]
660 478 );
661 479
662 - $this->end_controls_tab();
663 -
664 - $this->start_controls_tab(
665 - 'image_box_title_colors_hover',
480 + $this->add_group_control(
481 + Group_Control_Typography::get_type(),
666 482 [
667 - 'label' => esc_html__( 'Hover', 'elementor' ),
483 + 'name' => 'title_typography',
484 + 'selector' => '{{WRAPPER}} .elementor-image-box-title',
485 + 'global' => [
486 + 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
487 + ],
668 488 ]
669 489 );
670 490
671 - $this->add_control(
672 - 'hover_title_color',
491 + $this->add_group_control(
492 + Group_Control_Text_Shadow::get_type(),
673 493 [
674 - 'label' => esc_html__( 'Color', 'elementor' ),
675 - 'type' => Controls_Manager::COLOR,
676 - 'default' => '',
677 - 'selectors' => [
678 - '{{WRAPPER}}:has(:hover) .elementor-image-box-title,
679 - {{WRAPPER}}:has(:focus) .elementor-image-box-title' => 'color: {{VALUE}};',
680 - ],
681 - 'global' => [
682 - 'default' => Global_Colors::COLOR_PRIMARY,
683 - ],
494 + 'name' => 'title_shadow',
495 + 'selector' => '{{WRAPPER}} .elementor-image-box-title',
684 496 ]
685 497 );
686 498
687 499 $this->add_control(
688 - 'hover_title_color_transition_duration',
500 + 'heading_description',
689 501 [
690 - 'label' => esc_html__( 'Transition Duration', 'elementor' ),
691 - 'type' => Controls_Manager::SLIDER,
692 - 'size_units' => [ 's', 'ms', 'custom' ],
693 - 'default' => [
694 - 'unit' => 's',
695 - ],
696 - 'selectors' => [
697 - '{{WRAPPER}} .elementor-image-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};',
698 - ],
502 + 'label' => __( 'Description', 'elementor' ),
503 + 'type' => Controls_Manager::HEADING,
504 + 'separator' => 'before',
699 505 ]
700 506 );
701 507
702 - $this->end_controls_tab();
703 -
704 - $this->end_controls_tabs();
705 -
706 508 $this->add_control(
707 - 'heading_description',
509 + 'description_color',
708 510 [
709 - 'label' => esc_html__( 'Description', 'elementor' ),
710 - 'type' => Controls_Manager::HEADING,
711 - 'separator' => 'before',
511 + 'label' => __( 'Color', 'elementor' ),
512 + 'type' => Controls_Manager::COLOR,
513 + 'default' => '',
514 + 'selectors' => [
515 + '{{WRAPPER}} .elementor-image-box-description' => 'color: {{VALUE}};',
516 + ],
517 + 'global' => [
518 + 'default' => Global_Colors::COLOR_TEXT,
519 + ],
712 520 ]
713 521 );
714 522
715 523 $this->add_group_control(
@@ -730,23 +538,8 @@
730 538 'selector' => '{{WRAPPER}} .elementor-image-box-description',
731 539 ]
732 540 );
733 541
734 - $this->add_control(
735 - 'description_color',
736 - [
737 - 'label' => esc_html__( 'Color', 'elementor' ),
738 - 'type' => Controls_Manager::COLOR,
739 - 'default' => '',
740 - 'selectors' => [
741 - '{{WRAPPER}} .elementor-image-box-description' => 'color: {{VALUE}};',
742 - ],
743 - 'global' => [
744 - 'default' => Global_Colors::COLOR_TEXT,
745 - ],
746 - ]
747 - );
748 -
749 542 $this->end_controls_section();
750 543 }
751 544
752 545 /**
@@ -759,18 +552,10 @@
759 552 */
760 553 protected function render() {
761 554 $settings = $this->get_settings_for_display();
762 555
763 - $description_text = wp_kses_post( $settings['description_text'] );
764 - $title_text = wp_kses_post( $settings['title_text'] );
556 + $has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
765 557
766 - $has_image = ! empty( $settings['image']['url'] );
767 - $has_content = ! Utils::is_empty( $title_text ) || ! Utils::is_empty( $description_text );
768 -
769 - if ( ! $has_image && ! $has_content ) {
770 - return;
771 - }
772 -
773 558 $html = '<div class="elementor-image-box-wrapper">';
774 559
775 560 if ( ! empty( $settings['link']['url'] ) ) {
776 561 $this->add_link_attributes( 'link', $settings['link'] );
@@ -775,14 +560,21 @@
775 560 if ( ! empty( $settings['link']['url'] ) ) {
776 561 $this->add_link_attributes( 'link', $settings['link'] );
777 562 }
778 563
779 - if ( $has_image ) {
564 + if ( ! empty( $settings['image']['url'] ) ) {
565 + $this->add_render_attribute( 'image', 'src', $settings['image']['url'] );
566 + $this->add_render_attribute( 'image', 'alt', Control_Media::get_image_alt( $settings['image'] ) );
567 + $this->add_render_attribute( 'image', 'title', Control_Media::get_image_title( $settings['image'] ) );
780 568
781 - $image_html = wp_kses_post( Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' ) );
569 + if ( $settings['hover_animation'] ) {
570 + $this->add_render_attribute( 'image', 'class', 'elementor-animation-' . $settings['hover_animation'] );
571 + }
782 572
573 + $image_html = Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' );
574 +
783 575 if ( ! empty( $settings['link']['url'] ) ) {
784 - $image_html = '<a ' . $this->get_render_attribute_string( 'link' ) . ' tabindex="-1">' . $image_html . '</a>';
576 + $image_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $image_html . '</a>';
785 577 }
786 578
787 579 $html .= '<figure class="elementor-image-box-img">' . $image_html . '</figure>';
788 580 }
@@ -789,27 +581,28 @@
789 581
790 582 if ( $has_content ) {
791 583 $html .= '<div class="elementor-image-box-content">';
792 584
793 - if ( ! Utils::is_empty( $title_text ) ) {
794 - $title_html = $title_text;
585 + if ( ! Utils::is_empty( $settings['title_text'] ) ) {
795 586 $this->add_render_attribute( 'title_text', 'class', 'elementor-image-box-title' );
796 587
797 588 $this->add_inline_editing_attributes( 'title_text', 'none' );
798 589
590 + $title_html = $settings['title_text'];
591 +
799 592 if ( ! empty( $settings['link']['url'] ) ) {
800 - $title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_text . '</a>';
593 + $title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_html . '</a>';
801 594 }
802 595
803 596 $html .= sprintf( '<%1$s %2$s>%3$s</%1$s>', Utils::validate_html_tag( $settings['title_size'] ), $this->get_render_attribute_string( 'title_text' ), $title_html );
804 597 }
805 598
806 - if ( ! Utils::is_empty( $description_text ) ) {
599 + if ( ! Utils::is_empty( $settings['description_text'] ) ) {
807 600 $this->add_render_attribute( 'description_text', 'class', 'elementor-image-box-description' );
808 601
809 602 $this->add_inline_editing_attributes( 'description_text' );
810 603
811 - $html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $description_text );
604 + $html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $settings['description_text'] );
812 605 }
813 606
814 607 $html .= '</div>';
815 608 }
@@ -815,9 +608,9 @@
815 608 }
816 609
817 610 $html .= '</div>';
818 611
819 - Utils::print_unescaped_internal_string( $html );
612 + echo $html;
820 613 }
821 614
822 615 /**
823 616 * Render image box widget output in the editor.
@@ -829,21 +622,11 @@
829 622 */
830 623 protected function content_template() {
831 624 ?>
832 625 <#
833 - const titleText = elementor.helpers.sanitize( settings.title_text, { ALLOW_DATA_ATTR: false } )
834 - const descriptionText = elementor.helpers.sanitize( settings.description_text, { ALLOW_DATA_ATTR: false } )
835 -
836 - var hasImage = !! settings.image.url;
837 - var hasContent = !! ( titleText || descriptionText );
838 -
839 - if ( ! hasImage && ! hasContent ) {
840 - return;
841 - }
842 -
843 626 var html = '<div class="elementor-image-box-wrapper">';
844 627
845 - if ( hasImage ) {
628 + if ( settings.image.url ) {
846 629 var image = {
847 630 id: settings.image.id,
848 631 url: settings.image.url,
849 632 size: settings.thumbnail_size,
@@ -852,25 +635,28 @@
852 635 };
853 636
854 637 var image_url = elementor.imagesManager.getImageUrl( image );
855 638
856 - var imageHtml = '<img src="' + _.escape( image_url ) + '" class="elementor-animation-' + _.escape( settings.hover_animation ) + '" />';
639 + var imageHtml = '<img src="' + image_url + '" class="elementor-animation-' + settings.hover_animation + '" />';
857 640
858 - if ( settings.link?.url ) {
859 - imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '" tabindex="-1">' + imageHtml + '</a>';
641 + if ( settings.link.url ) {
642 + imageHtml = '<a href="' + settings.link.url + '">' + imageHtml + '</a>';
860 643 }
861 644
862 645 html += '<figure class="elementor-image-box-img">' + imageHtml + '</figure>';
863 646 }
864 647
648 + var hasContent = !! ( settings.title_text || settings.description_text );
649 +
865 650 if ( hasContent ) {
866 651 html += '<div class="elementor-image-box-content">';
867 652
868 - if ( titleText ) {
869 - var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
653 + if ( settings.title_text ) {
654 + var title_html = settings.title_text,
655 + titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
870 656
871 - if ( settings.link?.url ) {
872 - title_html = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '">' + titleText + '</a>';
657 + if ( settings.link.url ) {
658 + title_html = '<a href="' + settings.link.url + '">' + title_html + '</a>';
873 659 }
874 660
875 661 view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );
876 662
@@ -875,17 +661,17 @@
875 661 view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );
876 662
877 663 view.addInlineEditingAttributes( 'title_text', 'none' );
878 664
879 - html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + titleText + '</' + titleSizeTag + '>';
665 + html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + title_html + '</' + titleSizeTag + '>';
880 666 }
881 667
882 - if ( descriptionText ) {
668 + if ( settings.description_text ) {
883 669 view.addRenderAttribute( 'description_text', 'class', 'elementor-image-box-description' );
884 670
885 671 view.addInlineEditingAttributes( 'description_text' );
886 672
887 - html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + descriptionText + '</p>';
673 + html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + settings.description_text + '</p>';
888 674 }
889 675
890 676 html += '</div>';
891 677 }
@@ -894,31 +680,6 @@
894 680
895 681 print( html );
896 682 #>
897 683 <?php
898 - }
899 -
900 - public function render_markdown(): string {
901 - $settings = $this->get_settings_for_display();
902 - $title = Utils::html_to_plain_text( $settings['title_text'] ?? '' );
903 - $description = Utils::html_to_plain_text( $settings['description_text'] ?? '' );
904 - $image_url = $settings['image']['url'] ?? '';
905 - if ( empty( $title ) && empty( $description ) && empty( $image_url ) ) {
906 - return '';
907 - }
908 - $parts = [];
909 - if ( ! empty( $image_url ) ) {
910 - $parts[] = '![' . $title . '](' . esc_url( $image_url ) . ')';
911 - }
912 - if ( ! empty( $title ) ) {
913 - if ( ! empty( $settings['link']['url'] ) ) {
914 - $parts[] = '### [' . $title . '](' . esc_url( $settings['link']['url'] ) . ')';
915 - } else {
916 - $parts[] = '### ' . $title;
917 - }
918 - }
919 - if ( ! empty( $description ) ) {
920 - $parts[] = $description;
921 - }
922 - return implode( "\n\n", $parts );
923 684 }
924 685 }