PluginProbe
Elementor Website Builder – more than just a page builder / 3.10.0-dev1
Elementor Website Builder – more than just a page builder v3.10.0-dev1
4.3.0-beta3 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 All 452 releases
← All changes | includes/widgets/icon-box.php +192 -426 4.2.33.10.0-dev1 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,34 @@
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 + 'size_units' => [ 'px', '%', 'em', 'rem' ],
352 + 'default' => [
353 + 'size' => 15,
354 + ],
355 + 'range' => [
356 + 'px' => [
357 + 'min' => 0,
358 + 'max' => 100,
359 + ],
360 + ],
361 + 'selectors' => [
362 + '{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
363 + ],
364 + ]
365 + );
366 +
367 + $this->add_responsive_control(
523 368 'icon_size',
524 369 [
525 370 'label' => esc_html__( 'Size', 'elementor' ),
526 371 'type' => Controls_Manager::SLIDER,
527 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
372 + 'size_units' => [ 'px', '%', 'em', 'rem' ],
528 373 'range' => [
529 374 'px' => [
530 375 'min' => 6,
531 376 'max' => 300,
@@ -541,24 +386,16 @@
541 386 'icon_padding',
542 387 [
543 388 'label' => esc_html__( 'Padding', 'elementor' ),
544 389 'type' => Controls_Manager::SLIDER,
545 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
546 390 'selectors' => [
547 391 '{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
548 392 ],
549 393 'range' => [
550 - 'px' => [
551 - 'max' => 50,
552 - ],
553 394 'em' => [
554 395 'min' => 0,
555 396 'max' => 5,
556 397 ],
557 - 'rem' => [
558 - 'min' => 0,
559 - 'max' => 5,
560 - ],
561 398 ],
562 399 'condition' => [
563 400 'view!' => 'default',
564 401 ],
@@ -583,18 +420,12 @@
583 420 'rotate',
584 421 [
585 422 'label' => esc_html__( 'Rotate', 'elementor' ),
586 423 'type' => Controls_Manager::SLIDER,
587 - 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
424 + 'size_units' => [ 'deg', 'grad', 'rad', 'turn' ],
588 425 'default' => [
589 426 'unit' => 'deg',
590 427 ],
591 - 'tablet_default' => [
592 - 'unit' => 'deg',
593 - ],
594 - 'mobile_default' => [
595 - 'unit' => 'deg',
596 - ],
597 428 'device_args' => $rotate_device_args,
598 429 'selectors' => [
599 430 '{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
600 431 ],
@@ -605,9 +436,9 @@
605 436 'border_width',
606 437 [
607 438 'label' => esc_html__( 'Border Width', 'elementor' ),
608 439 'type' => Controls_Manager::DIMENSIONS,
609 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
440 + 'size_units' => [ 'px', '%', 'em' ],
610 441 'selectors' => [
611 442 '{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
612 443 ],
613 444 'condition' => [
@@ -620,9 +451,9 @@
620 451 'border_radius',
621 452 [
622 453 'label' => esc_html__( 'Border Radius', 'elementor' ),
623 454 'type' => Controls_Manager::DIMENSIONS,
624 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
455 + 'size_units' => [ 'px', '%', 'em' ],
625 456 'selectors' => [
626 457 '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
627 458 ],
628 459 'condition' => [
@@ -627,9 +458,8 @@
627 458 ],
628 459 'condition' => [
629 460 'view!' => 'default',
630 461 ],
631 - 'separator' => 'before',
632 462 ]
633 463 );
634 464
635 465 $this->end_controls_section();
@@ -641,9 +471,53 @@
641 471 'tab' => Controls_Manager::TAB_STYLE,
642 472 ]
643 473 );
644 474
475 + $this->add_responsive_control(
476 + 'text_align',
477 + [
478 + 'label' => esc_html__( 'Alignment', 'elementor' ),
479 + 'type' => Controls_Manager::CHOOSE,
480 + 'options' => [
481 + 'left' => [
482 + 'title' => esc_html__( 'Left', 'elementor' ),
483 + 'icon' => 'eicon-text-align-left',
484 + ],
485 + 'center' => [
486 + 'title' => esc_html__( 'Center', 'elementor' ),
487 + 'icon' => 'eicon-text-align-center',
488 + ],
489 + 'right' => [
490 + 'title' => esc_html__( 'Right', 'elementor' ),
491 + 'icon' => 'eicon-text-align-right',
492 + ],
493 + 'justify' => [
494 + 'title' => esc_html__( 'Justified', 'elementor' ),
495 + 'icon' => 'eicon-text-align-justify',
496 + ],
497 + ],
498 + 'selectors' => [
499 + '{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
500 + ],
501 + ]
502 + );
503 +
645 504 $this->add_control(
505 + 'content_vertical_alignment',
506 + [
507 + 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
508 + 'type' => Controls_Manager::SELECT,
509 + 'options' => [
510 + 'top' => esc_html__( 'Top', 'elementor' ),
511 + 'middle' => esc_html__( 'Middle', 'elementor' ),
512 + 'bottom' => esc_html__( 'Bottom', 'elementor' ),
513 + ],
514 + 'default' => 'top',
515 + 'prefix_class' => 'elementor-vertical-align-',
516 + ]
517 + );
518 +
519 + $this->add_control(
646 520 'heading_title',
647 521 [
648 522 'label' => esc_html__( 'Title', 'elementor' ),
649 523 'type' => Controls_Manager::HEADING,
@@ -650,8 +524,40 @@
650 524 'separator' => 'before',
651 525 ]
652 526 );
653 527
528 + $this->add_responsive_control(
529 + 'title_bottom_space',
530 + [
531 + 'label' => esc_html__( 'Spacing', 'elementor' ),
532 + 'type' => Controls_Manager::SLIDER,
533 + 'range' => [
534 + 'px' => [
535 + 'min' => 0,
536 + 'max' => 100,
537 + ],
538 + ],
539 + 'selectors' => [
540 + '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
541 + ],
542 + ]
543 + );
544 +
545 + $this->add_control(
546 + 'title_color',
547 + [
548 + 'label' => esc_html__( 'Color', 'elementor' ),
549 + 'type' => Controls_Manager::COLOR,
550 + 'default' => '',
551 + 'selectors' => [
552 + '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
553 + ],
554 + 'global' => [
555 + 'default' => Global_Colors::COLOR_PRIMARY,
556 + ],
557 + ]
558 + );
559 +
654 560 $this->add_group_control(
655 561 Group_Control_Typography::get_type(),
656 562 [
657 563 'name' => 'title_typography',
@@ -677,85 +583,32 @@
677 583 'selector' => '{{WRAPPER}} .elementor-icon-box-title',
678 584 ]
679 585 );
680 586
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 587 $this->add_control(
691 - 'title_color',
588 + 'heading_description',
692 589 [
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 - ],
590 + 'label' => esc_html__( 'Description', 'elementor' ),
591 + 'type' => Controls_Manager::HEADING,
592 + 'separator' => 'before',
702 593 ]
703 594 );
704 595
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 596 $this->add_control(
715 - 'hover_title_color',
597 + 'description_color',
716 598 [
717 599 'label' => esc_html__( 'Color', 'elementor' ),
718 600 'type' => Controls_Manager::COLOR,
719 601 'default' => '',
720 602 'selectors' => [
721 - '{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
722 - {{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
603 + '{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
723 604 ],
724 605 'global' => [
725 - 'default' => Global_Colors::COLOR_PRIMARY,
606 + 'default' => Global_Colors::COLOR_TEXT,
726 607 ],
727 608 ]
728 609 );
729 610
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 611 $this->add_group_control(
759 612 Group_Control_Typography::get_type(),
760 613 [
761 614 'name' => 'description_typography',
@@ -773,23 +626,8 @@
773 626 'selector' => '{{WRAPPER}} .elementor-icon-box-description',
774 627 ]
775 628 );
776 629
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 630 $this->end_controls_section();
793 631 }
794 632
795 633 /**
@@ -801,38 +639,27 @@
801 639 * @access protected
802 640 */
803 641 protected function render() {
804 642 $settings = $this->get_settings_for_display();
805 - $has_link = ! empty( $settings['link']['url'] );
806 - $html_tag = $has_link ? 'a' : 'span';
807 643
808 - $this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
644 + $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
809 645
810 - if ( ! empty( $settings['hover_animation'] ) ) {
811 - $this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
646 + $icon_tag = 'span';
647 +
648 + if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
649 + // add old default
650 + $settings['icon'] = 'fa fa-star';
812 651 }
813 652
814 - $has_icon = ! empty( $settings['selected_icon']['value'] );
815 - $has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
653 + $has_icon = ! empty( $settings['icon'] );
816 654
817 - if ( ! $has_icon && ! $has_content ) {
818 - return;
819 - }
655 + if ( ! empty( $settings['link']['url'] ) ) {
656 + $icon_tag = 'a';
820 657
821 - if ( $has_link ) {
822 658 $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 659 }
828 660
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'] ) ) {
661 + if ( $has_icon ) {
835 662 $this->add_render_attribute( 'i', 'class', $settings['icon'] );
836 663 $this->add_render_attribute( 'i', 'aria-hidden', 'true' );
837 664 }
838 665
@@ -839,17 +666,19 @@
839 666 $this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
840 667
841 668 $this->add_inline_editing_attributes( 'title_text', 'none' );
842 669 $this->add_inline_editing_attributes( 'description_text' );
843 -
670 + if ( ! $has_icon && ! empty( $settings['selected_icon']['value'] ) ) {
671 + $has_icon = true;
672 + }
844 673 $migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
845 674 $is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
675 +
846 676 ?>
847 677 <div class="elementor-icon-box-wrapper">
848 -
849 678 <?php if ( $has_icon ) : ?>
850 679 <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' ); ?>>
680 + <<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>>
852 681 <?php
853 682 if ( $is_new || $migrated ) {
854 683 Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
855 684 } elseif ( ! empty( $settings['icon'] ) ) {
@@ -855,32 +684,23 @@
855 684 } elseif ( ! empty( $settings['icon'] ) ) {
856 685 ?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
857 686 }
858 687 ?>
859 - </<?php Utils::print_validated_html_tag( $html_tag ); ?>>
688 + </<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
860 689 </div>
861 690 <?php endif; ?>
862 -
863 - <?php if ( $has_content ) : ?>
864 691 <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 -
692 + <<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
693 + <<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
694 + <?php $this->print_unescaped_setting( 'title_text' ); ?>
695 + </<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
696 + </<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
874 697 <?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
875 698 <p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
876 - <?php echo wp_kses_post( $settings['description_text'] ); ?>
699 + <?php $this->print_unescaped_setting( 'description_text' ); ?>
877 700 </p>
878 701 <?php endif; ?>
879 -
880 702 </div>
881 - <?php endif; ?>
882 -
883 703 </div>
884 704 <?php
885 705 }
886 706
@@ -894,36 +714,13 @@
894 714 */
895 715 protected function content_template() {
896 716 ?>
897 717 <#
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',
718 + var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
719 + iconTag = link ? 'a' : 'span',
908 720 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 );
721 + migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
911 722
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 723 view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
927 724
928 725 view.addInlineEditingAttributes( 'title_text', 'none' );
929 726 view.addInlineEditingAttributes( 'description_text' );
@@ -928,39 +725,29 @@
928 725 view.addInlineEditingAttributes( 'title_text', 'none' );
929 726 view.addInlineEditingAttributes( 'description_text' );
930 727 #>
931 728 <div class="elementor-icon-box-wrapper">
932 -
933 - <# if ( hasIcon ) { #>
729 + <?php // settings.icon is needed for older version ?>
730 + <# if ( settings.icon || settings.selected_icon.value ) { #>
934 731 <div class="elementor-icon-box-icon">
935 - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
732 + <{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}">
936 733 <# 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 }}}>
734 + {{{ iconHTML.value }}}
735 + <# } else { #>
736 + <i class="{{ settings.icon }}" aria-hidden="true"></i>
737 + <# } #>
738 + </{{{ iconTag }}}>
942 739 </div>
943 740 <# } #>
944 -
945 - <# if ( hasContent ) { #>
946 741 <div class="elementor-icon-box-content">
947 -
948 - <# if ( settings.title_text ) { #>
742 + <# var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); #>
949 743 <{{{ titleSizeTag }}} class="elementor-icon-box-title">
950 - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
951 - {{{ elementor.helpers.sanitize( settings.title_text ) }}}
952 - </{{{ htmlTag }}}>
744 + <{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}>
953 745 </{{{ titleSizeTag }}}>
954 - <# } #>
955 -
956 746 <# if ( settings.description_text ) { #>
957 - <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
747 + <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
958 748 <# } #>
959 -
960 749 </div>
961 - <# } #>
962 -
963 750 </div>
964 751 <?php
965 752 }
966 753
@@ -965,27 +752,6 @@
965 752 }
966 753
967 754 public function on_import( $element ) {
968 755 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 756 }
991 757 }