PluginProbe
Elementor Website Builder – more than just a page builder / 3.5.3
Elementor Website Builder – more than just a page builder v3.5.3
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 -446 4.1.0-dev13.5.3 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,68 @@
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 181 $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 - $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 + '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 - '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',
201 + 'prefix_class' => 'elementor-position-',
202 + 'toggle' => false,
203 + 'conditions' => [
204 + 'relation' => 'or',
205 + 'terms' => [
206 + [
207 + 'name' => 'selected_icon[value]',
208 + 'operator' => '!=',
209 + 'value' => '',
210 + ],
282 211 ],
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 212 ],
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 213 ]
306 214 );
307 215
308 - $this->add_responsive_control(
309 - 'text_align',
216 + $this->add_control(
217 + 'title_size',
310 218 [
311 - 'label' => esc_html__( 'Alignment', 'elementor' ),
312 - 'type' => Controls_Manager::CHOOSE,
219 + 'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
220 + 'type' => Controls_Manager::SELECT,
313 221 '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 - ],
222 + 'h1' => 'H1',
223 + 'h2' => 'H2',
224 + 'h3' => 'H3',
225 + 'h4' => 'H4',
226 + 'h5' => 'H5',
227 + 'h6' => 'H6',
228 + 'div' => 'div',
229 + 'span' => 'span',
230 + 'p' => 'p',
330 231 ],
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',
232 + 'default' => 'h3',
340 233 ]
341 234 );
342 235
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 236 $this->end_controls_section();
398 237
399 238 $this->start_controls_section(
400 239 'section_style_icon',
@@ -400,10 +239,17 @@
400 239 'section_style_icon',
401 240 [
402 241 'label' => esc_html__( 'Icon', 'elementor' ),
403 242 'tab' => Controls_Manager::TAB_STYLE,
404 - 'condition' => [
405 - 'selected_icon[value]!' => '',
243 + 'conditions' => [
244 + 'relation' => 'or',
245 + 'terms' => [
246 + [
247 + 'name' => 'selected_icon[value]',
248 + 'operator' => '!=',
249 + 'value' => '',
250 + ],
251 + ],
406 252 ],
407 253 ]
408 254 );
409 255
@@ -463,14 +309,10 @@
463 309 'label' => esc_html__( 'Primary Color', 'elementor' ),
464 310 'type' => Controls_Manager::COLOR,
465 311 'default' => '',
466 312 '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}};',
313 + '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
314 + '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
473 315 ],
474 316 ]
475 317 );
476 318
@@ -483,32 +325,15 @@
483 325 'condition' => [
484 326 'view!' => 'default',
485 327 ],
486 328 '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}};',
329 + '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
330 + '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
491 331 ],
492 332 ]
493 333 );
494 334
495 335 $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 336 'hover_animation',
512 337 [
513 338 'label' => esc_html__( 'Hover Animation', 'elementor' ),
514 339 'type' => Controls_Manager::HOVER_ANIMATION,
@@ -519,13 +344,35 @@
519 344
520 345 $this->end_controls_tabs();
521 346
522 347 $this->add_responsive_control(
348 + 'icon_space',
349 + [
350 + 'label' => esc_html__( 'Spacing', 'elementor' ),
351 + 'type' => Controls_Manager::SLIDER,
352 + 'default' => [
353 + 'size' => 15,
354 + ],
355 + 'range' => [
356 + 'px' => [
357 + 'min' => 0,
358 + 'max' => 100,
359 + ],
360 + ],
361 + 'selectors' => [
362 + '{{WRAPPER}}.elementor-position-right .elementor-icon-box-icon' => 'margin-left: {{SIZE}}{{UNIT}};',
363 + '{{WRAPPER}}.elementor-position-left .elementor-icon-box-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
364 + '{{WRAPPER}}.elementor-position-top .elementor-icon-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
365 + '(mobile){{WRAPPER}} .elementor-icon-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
366 + ],
367 + ]
368 + );
369 +
370 + $this->add_responsive_control(
523 371 'icon_size',
524 372 [
525 373 'label' => esc_html__( 'Size', 'elementor' ),
526 374 'type' => Controls_Manager::SLIDER,
527 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
528 375 'range' => [
529 376 'px' => [
530 377 'min' => 6,
531 378 'max' => 300,
@@ -536,29 +383,21 @@
536 383 ],
537 384 ]
538 385 );
539 386
540 - $this->add_responsive_control(
387 + $this->add_control(
541 388 'icon_padding',
542 389 [
543 390 'label' => esc_html__( 'Padding', 'elementor' ),
544 391 'type' => Controls_Manager::SLIDER,
545 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
546 392 'selectors' => [
547 393 '{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
548 394 ],
549 395 'range' => [
550 - 'px' => [
551 - 'max' => 50,
552 - ],
553 396 'em' => [
554 397 'min' => 0,
555 398 'max' => 5,
556 399 ],
557 - 'rem' => [
558 - 'min' => 0,
559 - 'max' => 5,
560 - ],
561 400 ],
562 401 'condition' => [
563 402 'view!' => 'default',
564 403 ],
@@ -564,38 +403,17 @@
564 403 ],
565 404 ]
566 405 );
567 406
568 - $active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
569 -
570 - $rotate_device_args = [];
571 -
572 - $rotate_device_settings = [
573 - 'default' => [
574 - 'unit' => 'deg',
575 - ],
576 - ];
577 -
578 - foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
579 - $rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
580 - }
581 -
582 - $this->add_responsive_control(
407 + $this->add_control(
583 408 'rotate',
584 409 [
585 410 'label' => esc_html__( 'Rotate', 'elementor' ),
586 411 'type' => Controls_Manager::SLIDER,
587 - 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
588 412 'default' => [
413 + 'size' => 0,
589 414 'unit' => 'deg',
590 415 ],
591 - 'tablet_default' => [
592 - 'unit' => 'deg',
593 - ],
594 - 'mobile_default' => [
595 - 'unit' => 'deg',
596 - ],
597 - 'device_args' => $rotate_device_args,
598 416 'selectors' => [
599 417 '{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
600 418 ],
601 419 ]
@@ -600,14 +418,13 @@
600 418 ],
601 419 ]
602 420 );
603 421
604 - $this->add_responsive_control(
422 + $this->add_control(
605 423 'border_width',
606 424 [
607 425 'label' => esc_html__( 'Border Width', 'elementor' ),
608 426 'type' => Controls_Manager::DIMENSIONS,
609 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
610 427 'selectors' => [
611 428 '{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
612 429 ],
613 430 'condition' => [
@@ -615,14 +432,14 @@
615 432 ],
616 433 ]
617 434 );
618 435
619 - $this->add_responsive_control(
436 + $this->add_control(
620 437 'border_radius',
621 438 [
622 439 'label' => esc_html__( 'Border Radius', 'elementor' ),
623 440 'type' => Controls_Manager::DIMENSIONS,
624 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
441 + 'size_units' => [ 'px', '%' ],
625 442 'selectors' => [
626 443 '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
627 444 ],
628 445 'condition' => [
@@ -627,9 +444,8 @@
627 444 ],
628 445 'condition' => [
629 446 'view!' => 'default',
630 447 ],
631 - 'separator' => 'before',
632 448 ]
633 449 );
634 450
635 451 $this->end_controls_section();
@@ -641,9 +457,53 @@
641 457 'tab' => Controls_Manager::TAB_STYLE,
642 458 ]
643 459 );
644 460
461 + $this->add_responsive_control(
462 + 'text_align',
463 + [
464 + 'label' => esc_html__( 'Alignment', 'elementor' ),
465 + 'type' => Controls_Manager::CHOOSE,
466 + 'options' => [
467 + 'left' => [
468 + 'title' => esc_html__( 'Left', 'elementor' ),
469 + 'icon' => 'eicon-text-align-left',
470 + ],
471 + 'center' => [
472 + 'title' => esc_html__( 'Center', 'elementor' ),
473 + 'icon' => 'eicon-text-align-center',
474 + ],
475 + 'right' => [
476 + 'title' => esc_html__( 'Right', 'elementor' ),
477 + 'icon' => 'eicon-text-align-right',
478 + ],
479 + 'justify' => [
480 + 'title' => esc_html__( 'Justified', 'elementor' ),
481 + 'icon' => 'eicon-text-align-justify',
482 + ],
483 + ],
484 + 'selectors' => [
485 + '{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
486 + ],
487 + ]
488 + );
489 +
645 490 $this->add_control(
491 + 'content_vertical_alignment',
492 + [
493 + 'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
494 + 'type' => Controls_Manager::SELECT,
495 + 'options' => [
496 + 'top' => esc_html__( 'Top', 'elementor' ),
497 + 'middle' => esc_html__( 'Middle', 'elementor' ),
498 + 'bottom' => esc_html__( 'Bottom', 'elementor' ),
499 + ],
500 + 'default' => 'top',
501 + 'prefix_class' => 'elementor-vertical-align-',
502 + ]
503 + );
504 +
505 + $this->add_control(
646 506 'heading_title',
647 507 [
648 508 'label' => esc_html__( 'Title', 'elementor' ),
649 509 'type' => Controls_Manager::HEADING,
@@ -650,8 +510,40 @@
650 510 'separator' => 'before',
651 511 ]
652 512 );
653 513
514 + $this->add_responsive_control(
515 + 'title_bottom_space',
516 + [
517 + 'label' => esc_html__( 'Spacing', 'elementor' ),
518 + 'type' => Controls_Manager::SLIDER,
519 + 'range' => [
520 + 'px' => [
521 + 'min' => 0,
522 + 'max' => 100,
523 + ],
524 + ],
525 + 'selectors' => [
526 + '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
527 + ],
528 + ]
529 + );
530 +
531 + $this->add_control(
532 + 'title_color',
533 + [
534 + 'label' => esc_html__( 'Color', 'elementor' ),
535 + 'type' => Controls_Manager::COLOR,
536 + 'default' => '',
537 + 'selectors' => [
538 + '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
539 + ],
540 + 'global' => [
541 + 'default' => Global_Colors::COLOR_PRIMARY,
542 + ],
543 + ]
544 + );
545 +
654 546 $this->add_group_control(
655 547 Group_Control_Typography::get_type(),
656 548 [
657 549 'name' => 'title_typography',
@@ -677,85 +569,32 @@
677 569 'selector' => '{{WRAPPER}} .elementor-icon-box-title',
678 570 ]
679 571 );
680 572
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 573 $this->add_control(
691 - 'title_color',
574 + 'heading_description',
692 575 [
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 - ],
576 + 'label' => esc_html__( 'Description', 'elementor' ),
577 + 'type' => Controls_Manager::HEADING,
578 + 'separator' => 'before',
702 579 ]
703 580 );
704 581
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 582 $this->add_control(
715 - 'hover_title_color',
583 + 'description_color',
716 584 [
717 585 'label' => esc_html__( 'Color', 'elementor' ),
718 586 'type' => Controls_Manager::COLOR,
719 587 'default' => '',
720 588 'selectors' => [
721 - '{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
722 - {{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
589 + '{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
723 590 ],
724 591 'global' => [
725 - 'default' => Global_Colors::COLOR_PRIMARY,
592 + 'default' => Global_Colors::COLOR_TEXT,
726 593 ],
727 594 ]
728 595 );
729 596
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 597 $this->add_group_control(
759 598 Group_Control_Typography::get_type(),
760 599 [
761 600 'name' => 'description_typography',
@@ -773,23 +612,8 @@
773 612 'selector' => '{{WRAPPER}} .elementor-icon-box-description',
774 613 ]
775 614 );
776 615
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 616 $this->end_controls_section();
793 617 }
794 618
795 619 /**
@@ -801,38 +625,27 @@
801 625 * @access protected
802 626 */
803 627 protected function render() {
804 628 $settings = $this->get_settings_for_display();
805 - $has_link = ! empty( $settings['link']['url'] );
806 - $html_tag = $has_link ? 'a' : 'span';
807 629
808 - $this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
630 + $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
809 631
810 - if ( ! empty( $settings['hover_animation'] ) ) {
811 - $this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
632 + $icon_tag = 'span';
633 +
634 + if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
635 + // add old default
636 + $settings['icon'] = 'fa fa-star';
812 637 }
813 638
814 - $has_icon = ! empty( $settings['selected_icon']['value'] );
815 - $has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
639 + $has_icon = ! empty( $settings['icon'] );
816 640
817 - if ( ! $has_icon && ! $has_content ) {
818 - return;
819 - }
641 + if ( ! empty( $settings['link']['url'] ) ) {
642 + $icon_tag = 'a';
820 643
821 - if ( $has_link ) {
822 644 $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 645 }
828 646
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'] ) ) {
647 + if ( $has_icon ) {
835 648 $this->add_render_attribute( 'i', 'class', $settings['icon'] );
836 649 $this->add_render_attribute( 'i', 'aria-hidden', 'true' );
837 650 }
838 651
@@ -839,17 +652,19 @@
839 652 $this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
840 653
841 654 $this->add_inline_editing_attributes( 'title_text', 'none' );
842 655 $this->add_inline_editing_attributes( 'description_text' );
843 -
656 + if ( ! $has_icon && ! empty( $settings['selected_icon']['value'] ) ) {
657 + $has_icon = true;
658 + }
844 659 $migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
845 660 $is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
661 +
846 662 ?>
847 663 <div class="elementor-icon-box-wrapper">
848 -
849 664 <?php if ( $has_icon ) : ?>
850 665 <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' ); ?>>
666 + <<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>>
852 667 <?php
853 668 if ( $is_new || $migrated ) {
854 669 Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
855 670 } elseif ( ! empty( $settings['icon'] ) ) {
@@ -855,32 +670,23 @@
855 670 } elseif ( ! empty( $settings['icon'] ) ) {
856 671 ?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
857 672 }
858 673 ?>
859 - </<?php Utils::print_validated_html_tag( $html_tag ); ?>>
674 + </<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
860 675 </div>
861 676 <?php endif; ?>
862 -
863 - <?php if ( $has_content ) : ?>
864 677 <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 -
678 + <<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
679 + <<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
680 + <?php $this->print_unescaped_setting( 'title_text' ); ?>
681 + </<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
682 + </<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
874 683 <?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
875 684 <p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
876 - <?php echo wp_kses_post( $settings['description_text'] ); ?>
685 + <?php $this->print_unescaped_setting( 'description_text' ); ?>
877 686 </p>
878 687 <?php endif; ?>
879 -
880 688 </div>
881 - <?php endif; ?>
882 -
883 689 </div>
884 690 <?php
885 691 }
886 692
@@ -894,36 +700,13 @@
894 700 */
895 701 protected function content_template() {
896 702 ?>
897 703 <#
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',
704 + var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
705 + iconTag = link ? 'a' : 'span',
908 706 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 );
707 + migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
911 708
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 709 view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
927 710
928 711 view.addInlineEditingAttributes( 'title_text', 'none' );
929 712 view.addInlineEditingAttributes( 'description_text' );
@@ -928,39 +711,29 @@
928 711 view.addInlineEditingAttributes( 'title_text', 'none' );
929 712 view.addInlineEditingAttributes( 'description_text' );
930 713 #>
931 714 <div class="elementor-icon-box-wrapper">
932 -
933 - <# if ( hasIcon ) { #>
715 + <?php // settings.icon is needed for older version ?>
716 + <# if ( settings.icon || settings.selected_icon.value ) { #>
934 717 <div class="elementor-icon-box-icon">
935 - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
718 + <{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}">
936 719 <# 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 }}}>
720 + {{{ iconHTML.value }}}
721 + <# } else { #>
722 + <i class="{{ settings.icon }}" aria-hidden="true"></i>
723 + <# } #>
724 + </{{{ iconTag }}}>
942 725 </div>
943 726 <# } #>
944 -
945 - <# if ( hasContent ) { #>
946 727 <div class="elementor-icon-box-content">
947 -
948 - <# if ( settings.title_text ) { #>
728 + <# var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); #>
949 729 <{{{ titleSizeTag }}} class="elementor-icon-box-title">
950 - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
951 - {{{ elementor.helpers.sanitize( settings.title_text ) }}}
952 - </{{{ htmlTag }}}>
730 + <{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}>
953 731 </{{{ titleSizeTag }}}>
954 - <# } #>
955 -
956 732 <# if ( settings.description_text ) { #>
957 - <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
733 + <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
958 734 <# } #>
959 -
960 735 </div>
961 - <# } #>
962 -
963 736 </div>
964 737 <?php
965 738 }
966 739
@@ -965,27 +738,6 @@
965 738 }
966 739
967 740 public function on_import( $element ) {
968 741 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 742 }
991 743 }