PluginProbe
Elementor Website Builder – more than just a page builder / 3.6.7
Elementor Website Builder – more than just a page builder v3.6.7
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/icon-box.php +198 -426 4.2.0-dev23.6.7 View file →
@@ -72,31 +72,9 @@
72 72 public function get_keywords() {
73 73 return [ 'icon box', 'icon' ];
74 74 }
75 75
76 - protected function is_dynamic_content(): bool {
77 - return false;
78 - }
79 -
80 - public function has_widget_inner_wrapper(): bool {
81 - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
82 - }
83 -
84 76 /**
85 - * Get style dependencies.
86 - *
87 - * Retrieve the list of style dependencies the widget requires.
88 - *
89 - * @since 3.24.0
90 - * @access public
91 - *
92 - * @return array Widget style dependencies.
93 - */
94 - public function get_style_depends(): array {
95 - return [ 'widget-icon-box' ];
96 - }
97 -
98 - /**
99 77 * Register icon box widget controls.
100 78 *
101 79 * Adds different input fields to allow the user to change and customize the widget settings.
102 80 *
@@ -135,11 +113,8 @@
135 113 'framed' => esc_html__( 'Framed', 'elementor' ),
136 114 ],
137 115 'default' => 'default',
138 116 'prefix_class' => 'elementor-view-',
139 - 'condition' => [
140 - 'selected_icon[value]!' => '',
141 - ],
142 117 ]
143 118 );
144 119
145 120 $this->add_control(
@@ -147,11 +122,10 @@
147 122 [
148 123 'label' => esc_html__( 'Shape', 'elementor' ),
149 124 'type' => Controls_Manager::SELECT,
150 125 'options' => [
126 + 'circle' => esc_html__( 'Circle', 'elementor' ),
151 127 'square' => esc_html__( 'Square', 'elementor' ),
152 - 'rounded' => esc_html__( 'Rounded', 'elementor' ),
153 - 'circle' => esc_html__( 'Circle', 'elementor' ),
154 128 ],
155 129 'default' => 'circle',
156 130 'condition' => [
157 131 'view!' => 'default',
@@ -163,9 +137,9 @@
163 137
164 138 $this->add_control(
165 139 'title_text',
166 140 [
167 - 'label' => esc_html__( 'Title', 'elementor' ),
141 + 'label' => esc_html__( 'Title & Description', 'elementor' ),
168 142 'type' => Controls_Manager::TEXT,
169 143 'dynamic' => [
170 144 'active' => true,
171 145 ],
@@ -177,9 +151,9 @@
177 151
178 152 $this->add_control(
179 153 'description_text',
180 154 [
181 - 'label' => esc_html__( 'Description', 'elementor' ),
155 + 'label' => '',
182 156 'type' => Controls_Manager::TEXTAREA,
183 157 'dynamic' => [
184 158 'active' => true,
185 159 ],
@@ -185,8 +159,10 @@
185 159 ],
186 160 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
187 161 'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
188 162 'rows' => 10,
163 + 'separator' => 'none',
164 + 'show_label' => false,
189 165 ]
190 166 );
191 167
192 168 $this->add_control(
@@ -196,205 +172,67 @@
196 172 'type' => Controls_Manager::URL,
197 173 'dynamic' => [
198 174 'active' => true,
199 175 ],
176 + 'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
200 177 'separator' => 'before',
201 178 ]
202 179 );
203 180
204 - $this->add_control(
205 - 'title_size',
206 - [
207 - 'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
208 - 'type' => Controls_Manager::SELECT,
209 - 'options' => [
210 - 'h1' => 'H1',
211 - 'h2' => 'H2',
212 - 'h3' => 'H3',
213 - 'h4' => 'H4',
214 - 'h5' => 'H5',
215 - 'h6' => 'H6',
216 - 'div' => 'div',
217 - 'span' => 'span',
218 - 'p' => 'p',
219 - ],
220 - 'default' => 'h3',
221 - ]
222 - );
223 -
224 - $this->end_controls_section();
225 -
226 - $this->start_controls_section(
227 - 'section_style_box',
228 - [
229 - 'label' => esc_html__( 'Box', 'elementor' ),
230 - 'tab' => Controls_Manager::TAB_STYLE,
231 - ]
232 - );
233 -
234 181 $this->add_responsive_control(
235 182 'position',
236 183 [
237 184 'label' => esc_html__( 'Icon Position', 'elementor' ),
238 185 'type' => Controls_Manager::CHOOSE,
239 - 'default' => 'block-start',
240 - 'mobile_default' => 'block-start',
186 + 'mobile_default' => 'top',
241 187 'options' => [
242 - 'inline-start' => [
243 - 'title' => esc_html__( 'Start', 'elementor' ),
188 + 'left' => [
189 + 'title' => esc_html__( 'Left', 'elementor' ),
244 190 'icon' => 'eicon-h-align-left',
245 191 ],
246 - 'inline-end' => [
247 - 'title' => esc_html__( 'End', 'elementor' ),
248 - 'icon' => 'eicon-h-align-right',
249 - ],
250 - 'block-start' => [
192 + 'top' => [
251 193 'title' => esc_html__( 'Top', 'elementor' ),
252 194 'icon' => 'eicon-v-align-top',
253 195 ],
254 - 'block-end' => [
255 - 'title' => esc_html__( 'Bottom', 'elementor' ),
256 - 'icon' => 'eicon-v-align-bottom',
196 + 'right' => [
197 + 'title' => esc_html__( 'Right', 'elementor' ),
198 + 'icon' => 'eicon-h-align-right',
257 199 ],
258 200 ],
259 - 'classes' => 'elementor-control-start-end',
260 - 'classes_dictionary' => [
261 - 'left' => is_rtl() ? 'inline-end' : 'inline-start',
262 - 'right' => is_rtl() ? 'inline-start' : 'inline-end',
263 - 'top' => 'block-start',
264 - 'bottom' => 'block-end',
265 - ],
266 201 'prefix_class' => 'elementor%s-position-',
267 - 'condition' => [
268 - 'selected_icon[value]!' => '',
269 - ],
270 - ]
271 - );
272 -
273 - $this->add_responsive_control(
274 - 'content_vertical_alignment',
275 - [
276 - 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
277 - 'type' => Controls_Manager::CHOOSE,
278 - 'options' => [
279 - 'top' => [
280 - 'title' => esc_html__( 'Top', 'elementor' ),
281 - 'icon' => 'eicon-v-align-top',
202 + 'conditions' => [
203 + 'relation' => 'or',
204 + 'terms' => [
205 + [
206 + 'name' => 'selected_icon[value]',
207 + 'operator' => '!=',
208 + 'value' => '',
209 + ],
282 210 ],
283 - 'middle' => [
284 - 'title' => esc_html__( 'Middle', 'elementor' ),
285 - 'icon' => 'eicon-v-align-middle',
286 - ],
287 - 'bottom' => [
288 - 'title' => esc_html__( 'Bottom', 'elementor' ),
289 - 'icon' => 'eicon-v-align-bottom',
290 - ],
291 211 ],
292 - 'default' => 'top',
293 - 'selectors_dictionary' => [
294 - 'top' => 'start',
295 - 'middle' => 'center',
296 - 'bottom' => 'end',
297 - ],
298 - 'selectors' => [
299 - '{{WRAPPER}} .elementor-icon-box-wrapper' => 'align-items: {{VALUE}};',
300 - ],
301 - 'condition' => [
302 - 'selected_icon[value]!' => '',
303 - 'position' => [ 'left', 'right', 'inline-start', 'inline-end' ],
304 - ],
305 212 ]
306 213 );
307 214
308 - $this->add_responsive_control(
309 - 'text_align',
215 + $this->add_control(
216 + 'title_size',
310 217 [
311 - 'label' => esc_html__( 'Alignment', 'elementor' ),
312 - 'type' => Controls_Manager::CHOOSE,
218 + 'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
219 + 'type' => Controls_Manager::SELECT,
313 220 'options' => [
314 - 'start' => [
315 - 'title' => esc_html__( 'Start', 'elementor' ),
316 - 'icon' => 'eicon-text-align-left',
317 - ],
318 - 'center' => [
319 - 'title' => esc_html__( 'Center', 'elementor' ),
320 - 'icon' => 'eicon-text-align-center',
321 - ],
322 - 'end' => [
323 - 'title' => esc_html__( 'End', 'elementor' ),
324 - 'icon' => 'eicon-text-align-right',
325 - ],
326 - 'justify' => [
327 - 'title' => esc_html__( 'Justified', 'elementor' ),
328 - 'icon' => 'eicon-text-align-justify',
329 - ],
221 + 'h1' => 'H1',
222 + 'h2' => 'H2',
223 + 'h3' => 'H3',
224 + 'h4' => 'H4',
225 + 'h5' => 'H5',
226 + 'h6' => 'H6',
227 + 'div' => 'div',
228 + 'span' => 'span',
229 + 'p' => 'p',
330 230 ],
331 - 'classes' => 'elementor-control-start-end',
332 - 'selectors_dictionary' => [
333 - 'left' => is_rtl() ? 'end' : 'start',
334 - 'right' => is_rtl() ? 'start' : 'end',
335 - ],
336 - 'selectors' => [
337 - '{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
338 - ],
339 - 'separator' => 'after',
231 + 'default' => 'h3',
340 232 ]
341 233 );
342 234
343 - $this->add_responsive_control(
344 - 'icon_space',
345 - [
346 - 'label' => esc_html__( 'Icon Spacing', 'elementor' ),
347 - 'type' => Controls_Manager::SLIDER,
348 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
349 - 'default' => [
350 - 'size' => 15,
351 - ],
352 - 'range' => [
353 - 'px' => [
354 - 'max' => 100,
355 - ],
356 - 'em' => [
357 - 'max' => 10,
358 - ],
359 - 'rem' => [
360 - 'max' => 10,
361 - ],
362 - ],
363 - 'selectors' => [
364 - '{{WRAPPER}} .elementor-icon-box-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
365 - ],
366 - 'condition' => [
367 - 'selected_icon[value]!' => '',
368 - ],
369 - ]
370 - );
371 -
372 - $this->add_responsive_control(
373 - 'title_bottom_space',
374 - [
375 - 'label' => esc_html__( 'Content Spacing', 'elementor' ),
376 - 'type' => Controls_Manager::SLIDER,
377 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
378 - 'range' => [
379 - 'px' => [
380 - 'max' => 100,
381 - ],
382 - 'em' => [
383 - 'min' => 0,
384 - 'max' => 10,
385 - ],
386 - 'rem' => [
387 - 'min' => 0,
388 - 'max' => 10,
389 - ],
390 - ],
391 - 'selectors' => [
392 - '{{WRAPPER}} .elementor-icon-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};',
393 - ],
394 - ]
395 - );
396 -
397 235 $this->end_controls_section();
398 236
399 237 $this->start_controls_section(
400 238 'section_style_icon',
@@ -400,10 +238,17 @@
400 238 'section_style_icon',
401 239 [
402 240 'label' => esc_html__( 'Icon', 'elementor' ),
403 241 'tab' => Controls_Manager::TAB_STYLE,
404 - 'condition' => [
405 - 'selected_icon[value]!' => '',
242 + 'conditions' => [
243 + 'relation' => 'or',
244 + 'terms' => [
245 + [
246 + 'name' => 'selected_icon[value]',
247 + 'operator' => '!=',
248 + 'value' => '',
249 + ],
250 + ],
406 251 ],
407 252 ]
408 253 );
409 254
@@ -463,14 +308,10 @@
463 308 'label' => esc_html__( 'Primary Color', 'elementor' ),
464 309 'type' => Controls_Manager::COLOR,
465 310 'default' => '',
466 311 'selectors' => [
467 - '{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-icon,
468 - {{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-icon' => 'background-color: {{VALUE}};',
469 - '{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-icon,
470 - {{WRAPPER}}.elementor-view-default:has(:hover) .elementor-icon,
471 - {{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-icon,
472 - {{WRAPPER}}.elementor-view-default:has(:focus) .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
312 + '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
313 + '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
473 314 ],
474 315 ]
475 316 );
476 317
@@ -483,32 +324,15 @@
483 324 'condition' => [
484 325 'view!' => 'default',
485 326 ],
486 327 'selectors' => [
487 - '{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-icon,
488 - {{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-icon' => 'background-color: {{VALUE}};',
489 - '{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-icon,
490 - {{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
328 + '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
329 + '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
491 330 ],
492 331 ]
493 332 );
494 333
495 334 $this->add_control(
496 - 'hover_icon_colors_transition_duration',
497 - [
498 - 'label' => esc_html__( 'Transition Duration', 'elementor' ),
499 - 'type' => Controls_Manager::SLIDER,
500 - 'size_units' => [ 's', 'ms', 'custom' ],
501 - 'default' => [
502 - 'unit' => 's',
503 - ],
504 - 'selectors' => [
505 - '{{WRAPPER}} .elementor-icon' => 'transition-duration: {{SIZE}}{{UNIT}};',
506 - ],
507 - ]
508 - );
509 -
510 - $this->add_control(
511 335 'hover_animation',
512 336 [
513 337 'label' => esc_html__( 'Hover Animation', 'elementor' ),
514 338 'type' => Controls_Manager::HOVER_ANIMATION,
@@ -519,13 +343,32 @@
519 343
520 344 $this->end_controls_tabs();
521 345
522 346 $this->add_responsive_control(
347 + 'icon_space',
348 + [
349 + 'label' => esc_html__( 'Spacing', 'elementor' ),
350 + 'type' => Controls_Manager::SLIDER,
351 + 'default' => [
352 + 'size' => 15,
353 + ],
354 + 'range' => [
355 + 'px' => [
356 + 'min' => 0,
357 + 'max' => 100,
358 + ],
359 + ],
360 + 'selectors' => [
361 + '{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
362 + ],
363 + ]
364 + );
365 +
366 + $this->add_responsive_control(
523 367 'icon_size',
524 368 [
525 369 'label' => esc_html__( 'Size', 'elementor' ),
526 370 'type' => Controls_Manager::SLIDER,
527 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
528 371 'range' => [
529 372 'px' => [
530 373 'min' => 6,
531 374 'max' => 300,
@@ -541,24 +384,16 @@
541 384 'icon_padding',
542 385 [
543 386 'label' => esc_html__( 'Padding', 'elementor' ),
544 387 'type' => Controls_Manager::SLIDER,
545 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
546 388 'selectors' => [
547 389 '{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
548 390 ],
549 391 'range' => [
550 - 'px' => [
551 - 'max' => 50,
552 - ],
553 392 'em' => [
554 393 'min' => 0,
555 394 'max' => 5,
556 395 ],
557 - 'rem' => [
558 - 'min' => 0,
559 - 'max' => 5,
560 - ],
561 396 ],
562 397 'condition' => [
563 398 'view!' => 'default',
564 399 ],
@@ -571,8 +406,9 @@
571 406
572 407 $rotate_device_settings = [
573 408 'default' => [
574 409 'unit' => 'deg',
410 + 'size' => '',
575 411 ],
576 412 ];
577 413
578 414 foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
@@ -583,18 +419,20 @@
583 419 'rotate',
584 420 [
585 421 'label' => esc_html__( 'Rotate', 'elementor' ),
586 422 'type' => Controls_Manager::SLIDER,
587 - 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
423 + 'size_units' => [ 'deg' ],
424 + 'range' => [
425 + 'deg' => [
426 + 'min' => 0,
427 + 'max' => 360,
428 + 'step' => 1,
429 + ],
430 + ],
588 431 'default' => [
589 432 'unit' => 'deg',
433 + 'size' => '',
590 434 ],
591 - 'tablet_default' => [
592 - 'unit' => 'deg',
593 - ],
594 - 'mobile_default' => [
595 - 'unit' => 'deg',
596 - ],
597 435 'device_args' => $rotate_device_args,
598 436 'selectors' => [
599 437 '{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
600 438 ],
@@ -605,9 +443,8 @@
605 443 'border_width',
606 444 [
607 445 'label' => esc_html__( 'Border Width', 'elementor' ),
608 446 'type' => Controls_Manager::DIMENSIONS,
609 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
610 447 'selectors' => [
611 448 '{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
612 449 ],
613 450 'condition' => [
@@ -620,9 +457,9 @@
620 457 'border_radius',
621 458 [
622 459 'label' => esc_html__( 'Border Radius', 'elementor' ),
623 460 'type' => Controls_Manager::DIMENSIONS,
624 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
461 + 'size_units' => [ 'px', '%' ],
625 462 'selectors' => [
626 463 '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
627 464 ],
628 465 'condition' => [
@@ -627,9 +464,8 @@
627 464 ],
628 465 'condition' => [
629 466 'view!' => 'default',
630 467 ],
631 - 'separator' => 'before',
632 468 ]
633 469 );
634 470
635 471 $this->end_controls_section();
@@ -641,9 +477,53 @@
641 477 'tab' => Controls_Manager::TAB_STYLE,
642 478 ]
643 479 );
644 480
481 + $this->add_responsive_control(
482 + 'text_align',
483 + [
484 + 'label' => esc_html__( 'Alignment', 'elementor' ),
485 + 'type' => Controls_Manager::CHOOSE,
486 + 'options' => [
487 + 'left' => [
488 + 'title' => esc_html__( 'Left', 'elementor' ),
489 + 'icon' => 'eicon-text-align-left',
490 + ],
491 + 'center' => [
492 + 'title' => esc_html__( 'Center', 'elementor' ),
493 + 'icon' => 'eicon-text-align-center',
494 + ],
495 + 'right' => [
496 + 'title' => esc_html__( 'Right', 'elementor' ),
497 + 'icon' => 'eicon-text-align-right',
498 + ],
499 + 'justify' => [
500 + 'title' => esc_html__( 'Justified', 'elementor' ),
501 + 'icon' => 'eicon-text-align-justify',
502 + ],
503 + ],
504 + 'selectors' => [
505 + '{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
506 + ],
507 + ]
508 + );
509 +
645 510 $this->add_control(
511 + 'content_vertical_alignment',
512 + [
513 + 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
514 + 'type' => Controls_Manager::SELECT,
515 + 'options' => [
516 + 'top' => esc_html__( 'Top', 'elementor' ),
517 + 'middle' => esc_html__( 'Middle', 'elementor' ),
518 + 'bottom' => esc_html__( 'Bottom', 'elementor' ),
519 + ],
520 + 'default' => 'top',
521 + 'prefix_class' => 'elementor-vertical-align-',
522 + ]
523 + );
524 +
525 + $this->add_control(
646 526 'heading_title',
647 527 [
648 528 'label' => esc_html__( 'Title', 'elementor' ),
649 529 'type' => Controls_Manager::HEADING,
@@ -650,8 +530,40 @@
650 530 'separator' => 'before',
651 531 ]
652 532 );
653 533
534 + $this->add_responsive_control(
535 + 'title_bottom_space',
536 + [
537 + 'label' => esc_html__( 'Spacing', 'elementor' ),
538 + 'type' => Controls_Manager::SLIDER,
539 + 'range' => [
540 + 'px' => [
541 + 'min' => 0,
542 + 'max' => 100,
543 + ],
544 + ],
545 + 'selectors' => [
546 + '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
547 + ],
548 + ]
549 + );
550 +
551 + $this->add_control(
552 + 'title_color',
553 + [
554 + 'label' => esc_html__( 'Color', 'elementor' ),
555 + 'type' => Controls_Manager::COLOR,
556 + 'default' => '',
557 + 'selectors' => [
558 + '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
559 + ],
560 + 'global' => [
561 + 'default' => Global_Colors::COLOR_PRIMARY,
562 + ],
563 + ]
564 + );
565 +
654 566 $this->add_group_control(
655 567 Group_Control_Typography::get_type(),
656 568 [
657 569 'name' => 'title_typography',
@@ -677,85 +589,32 @@
677 589 'selector' => '{{WRAPPER}} .elementor-icon-box-title',
678 590 ]
679 591 );
680 592
681 - $this->start_controls_tabs( 'icon_box_title_colors' );
682 -
683 - $this->start_controls_tab(
684 - 'icon_box_title_colors_normal',
685 - [
686 - 'label' => esc_html__( 'Normal', 'elementor' ),
687 - ]
688 - );
689 -
690 593 $this->add_control(
691 - 'title_color',
594 + 'heading_description',
692 595 [
693 - 'label' => esc_html__( 'Color', 'elementor' ),
694 - 'type' => Controls_Manager::COLOR,
695 - 'default' => '',
696 - 'selectors' => [
697 - '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
698 - ],
699 - 'global' => [
700 - 'default' => Global_Colors::COLOR_PRIMARY,
701 - ],
596 + 'label' => esc_html__( 'Description', 'elementor' ),
597 + 'type' => Controls_Manager::HEADING,
598 + 'separator' => 'before',
702 599 ]
703 600 );
704 601
705 - $this->end_controls_tab();
706 -
707 - $this->start_controls_tab(
708 - 'icon_box_title_colors_hover',
709 - [
710 - 'label' => esc_html__( 'Hover', 'elementor' ),
711 - ]
712 - );
713 -
714 602 $this->add_control(
715 - 'hover_title_color',
603 + 'description_color',
716 604 [
717 605 'label' => esc_html__( 'Color', 'elementor' ),
718 606 'type' => Controls_Manager::COLOR,
719 607 'default' => '',
720 608 'selectors' => [
721 - '{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
722 - {{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
609 + '{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
723 610 ],
724 611 'global' => [
725 - 'default' => Global_Colors::COLOR_PRIMARY,
612 + 'default' => Global_Colors::COLOR_TEXT,
726 613 ],
727 614 ]
728 615 );
729 616
730 - $this->add_control(
731 - 'hover_title_color_transition_duration',
732 - [
733 - 'label' => esc_html__( 'Transition Duration', 'elementor' ),
734 - 'type' => Controls_Manager::SLIDER,
735 - 'size_units' => [ 's', 'ms', 'custom' ],
736 - 'default' => [
737 - 'unit' => 's',
738 - ],
739 - 'selectors' => [
740 - '{{WRAPPER}} .elementor-icon-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};',
741 - ],
742 - ]
743 - );
744 -
745 - $this->end_controls_tab();
746 -
747 - $this->end_controls_tabs();
748 -
749 - $this->add_control(
750 - 'heading_description',
751 - [
752 - 'label' => esc_html__( 'Description', 'elementor' ),
753 - 'type' => Controls_Manager::HEADING,
754 - 'separator' => 'before',
755 - ]
756 - );
757 -
758 617 $this->add_group_control(
759 618 Group_Control_Typography::get_type(),
760 619 [
761 620 'name' => 'description_typography',
@@ -773,23 +632,8 @@
773 632 'selector' => '{{WRAPPER}} .elementor-icon-box-description',
774 633 ]
775 634 );
776 635
777 - $this->add_control(
778 - 'description_color',
779 - [
780 - 'label' => esc_html__( 'Color', 'elementor' ),
781 - 'type' => Controls_Manager::COLOR,
782 - 'default' => '',
783 - 'selectors' => [
784 - '{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
785 - ],
786 - 'global' => [
787 - 'default' => Global_Colors::COLOR_TEXT,
788 - ],
789 - ]
790 - );
791 -
792 636 $this->end_controls_section();
793 637 }
794 638
795 639 /**
@@ -801,38 +645,27 @@
801 645 * @access protected
802 646 */
803 647 protected function render() {
804 648 $settings = $this->get_settings_for_display();
805 - $has_link = ! empty( $settings['link']['url'] );
806 - $html_tag = $has_link ? 'a' : 'span';
807 649
808 - $this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
650 + $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
809 651
810 - if ( ! empty( $settings['hover_animation'] ) ) {
811 - $this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
652 + $icon_tag = 'span';
653 +
654 + if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
655 + // add old default
656 + $settings['icon'] = 'fa fa-star';
812 657 }
813 658
814 - $has_icon = ! empty( $settings['selected_icon']['value'] );
815 - $has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
659 + $has_icon = ! empty( $settings['icon'] );
816 660
817 - if ( ! $has_icon && ! $has_content ) {
818 - return;
819 - }
661 + if ( ! empty( $settings['link']['url'] ) ) {
662 + $icon_tag = 'a';
820 663
821 - if ( $has_link ) {
822 664 $this->add_link_attributes( 'link', $settings['link'] );
823 - $this->add_render_attribute( 'icon', 'tabindex', '-1' );
824 - if ( ! empty( $settings['title_text'] ) ) {
825 - $this->add_render_attribute( 'icon', 'aria-label', $settings['title_text'] );
826 - }
827 665 }
828 666
829 - if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
830 - // add old default
831 - $settings['icon'] = 'fa fa-star';
832 - }
833 -
834 - if ( ! empty( $settings['icon'] ) ) {
667 + if ( $has_icon ) {
835 668 $this->add_render_attribute( 'i', 'class', $settings['icon'] );
836 669 $this->add_render_attribute( 'i', 'aria-hidden', 'true' );
837 670 }
838 671
@@ -839,17 +672,19 @@
839 672 $this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
840 673
841 674 $this->add_inline_editing_attributes( 'title_text', 'none' );
842 675 $this->add_inline_editing_attributes( 'description_text' );
843 -
676 + if ( ! $has_icon && ! empty( $settings['selected_icon']['value'] ) ) {
677 + $has_icon = true;
678 + }
844 679 $migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
845 680 $is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
681 +
846 682 ?>
847 683 <div class="elementor-icon-box-wrapper">
848 -
849 684 <?php if ( $has_icon ) : ?>
850 685 <div class="elementor-icon-box-icon">
851 - <<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?>>
686 + <<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>>
852 687 <?php
853 688 if ( $is_new || $migrated ) {
854 689 Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
855 690 } elseif ( ! empty( $settings['icon'] ) ) {
@@ -855,32 +690,23 @@
855 690 } elseif ( ! empty( $settings['icon'] ) ) {
856 691 ?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
857 692 }
858 693 ?>
859 - </<?php Utils::print_validated_html_tag( $html_tag ); ?>>
694 + </<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
860 695 </div>
861 696 <?php endif; ?>
862 -
863 - <?php if ( $has_content ) : ?>
864 697 <div class="elementor-icon-box-content">
865 -
866 - <?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
867 - <<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
868 - <<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
869 - <?php echo wp_kses_post( $settings['title_text'] ); ?>
870 - </<?php Utils::print_validated_html_tag( $html_tag ); ?>>
871 - </<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
872 - <?php endif; ?>
873 -
698 + <<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
699 + <<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
700 + <?php $this->print_unescaped_setting( 'title_text' ); ?>
701 + </<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
702 + </<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
874 703 <?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
875 704 <p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
876 - <?php echo wp_kses_post( $settings['description_text'] ); ?>
705 + <?php $this->print_unescaped_setting( 'description_text' ); ?>
877 706 </p>
878 707 <?php endif; ?>
879 -
880 708 </div>
881 - <?php endif; ?>
882 -
883 709 </div>
884 710 <?php
885 711 }
886 712
@@ -894,36 +720,13 @@
894 720 */
895 721 protected function content_template() {
896 722 ?>
897 723 <#
898 - // For older version `settings.icon` is needed.
899 - var hasIcon = settings.icon || settings.selected_icon.value;
900 - var hasContent = settings.title_text || settings.description_text;
901 -
902 - if ( ! hasIcon && ! hasContent ) {
903 - return;
904 - }
905 -
906 - var hasLink = settings.link?.url,
907 - htmlTag = hasLink ? 'a' : 'span',
724 + var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
725 + iconTag = link ? 'a' : 'span',
908 726 iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
909 - migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
910 - titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
727 + migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
911 728
912 - view.addRenderAttribute( 'icon', 'class', 'elementor-icon' );
913 -
914 - if ( '' !== settings.hover_animation ) {
915 - view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
916 - }
917 -
918 - if ( hasLink ) {
919 - view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) );
920 - view.addRenderAttribute( 'icon', 'tabindex', '-1' );
921 - if ( '' !== settings.title_text ) {
922 - view.addRenderAttribute( 'icon', 'aria-label', settings.title_text );
923 - }
924 - }
925 -
926 729 view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
927 730
928 731 view.addInlineEditingAttributes( 'title_text', 'none' );
929 732 view.addInlineEditingAttributes( 'description_text' );
@@ -928,39 +731,29 @@
928 731 view.addInlineEditingAttributes( 'title_text', 'none' );
929 732 view.addInlineEditingAttributes( 'description_text' );
930 733 #>
931 734 <div class="elementor-icon-box-wrapper">
932 -
933 - <# if ( hasIcon ) { #>
735 + <?php // settings.icon is needed for older version ?>
736 + <# if ( settings.icon || settings.selected_icon.value ) { #>
934 737 <div class="elementor-icon-box-icon">
935 - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
738 + <{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}">
936 739 <# if ( iconHTML && iconHTML.rendered && ( ! settings.icon || migrated ) ) { #>
937 - {{{ elementor.helpers.sanitize( iconHTML.value ) }}}
938 - <# } else { #>
939 - <i class="{{ _.escape( settings.icon ) }}" aria-hidden="true"></i>
940 - <# } #>
941 - </{{{ htmlTag }}}>
740 + {{{ iconHTML.value }}}
741 + <# } else { #>
742 + <i class="{{ settings.icon }}" aria-hidden="true"></i>
743 + <# } #>
744 + </{{{ iconTag }}}>
942 745 </div>
943 746 <# } #>
944 -
945 - <# if ( hasContent ) { #>
946 747 <div class="elementor-icon-box-content">
947 -
948 - <# if ( settings.title_text ) { #>
748 + <# var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); #>
949 749 <{{{ titleSizeTag }}} class="elementor-icon-box-title">
950 - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
951 - {{{ elementor.helpers.sanitize( settings.title_text ) }}}
952 - </{{{ htmlTag }}}>
750 + <{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}>
953 751 </{{{ titleSizeTag }}}>
954 - <# } #>
955 -
956 752 <# if ( settings.description_text ) { #>
957 - <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
753 + <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
958 754 <# } #>
959 -
960 755 </div>
961 - <# } #>
962 -
963 756 </div>
964 757 <?php
965 758 }
966 759
@@ -965,27 +758,6 @@
965 758 }
966 759
967 760 public function on_import( $element ) {
968 761 return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
969 - }
970 -
971 - public function render_markdown(): string {
972 - $settings = $this->get_settings_for_display();
973 - $title = Utils::html_to_plain_text( $settings['title_text'] ?? '' );
974 - $description = Utils::html_to_plain_text( $settings['description_text'] ?? '' );
975 - if ( empty( $title ) && empty( $description ) ) {
976 - return '';
977 - }
978 - $parts = [];
979 - if ( ! empty( $title ) ) {
980 - if ( ! empty( $settings['link']['url'] ) ) {
981 - $parts[] = '### [' . $title . '](' . esc_url( $settings['link']['url'] ) . ')';
982 - } else {
983 - $parts[] = '### ' . $title;
984 - }
985 - }
986 - if ( ! empty( $description ) ) {
987 - $parts[] = $description;
988 - }
989 - return implode( "\n\n", $parts );
990 762 }
991 763 }