PluginProbe
Elementor Website Builder – more than just a page builder / 3.0.4
Elementor Website Builder – more than just a page builder v3.0.4
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 +222 -498 4.1.0-dev23.0.4 View file →
@@ -41,9 +41,9 @@
41 41 *
42 42 * @return string Widget title.
43 43 */
44 44 public function get_title() {
45 - return esc_html__( 'Icon Box', 'elementor' );
45 + return __( 'Icon Box', 'elementor' );
46 46 }
47 47
48 48 /**
49 49 * Get widget icon.
@@ -72,43 +72,21 @@
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 *
103 - * @since 3.1.0
81 + * @since 1.0.0
104 82 * @access protected
105 83 */
106 - protected function register_controls() {
84 + protected function _register_controls() {
107 85 $this->start_controls_section(
108 86 'section_icon',
109 87 [
110 - 'label' => esc_html__( 'Icon Box', 'elementor' ),
88 + 'label' => __( 'Icon Box', 'elementor' ),
111 89 ]
112 90 );
113 91
114 92 $this->add_control(
@@ -113,9 +91,9 @@
113 91
114 92 $this->add_control(
115 93 'selected_icon',
116 94 [
117 - 'label' => esc_html__( 'Icon', 'elementor' ),
95 + 'label' => __( 'Icon', 'elementor' ),
118 96 'type' => Controls_Manager::ICONS,
119 97 'fa4compatibility' => 'icon',
120 98 'default' => [
121 99 'value' => 'fas fa-star',
@@ -126,20 +104,17 @@
126 104
127 105 $this->add_control(
128 106 'view',
129 107 [
130 - 'label' => esc_html__( 'View', 'elementor' ),
108 + 'label' => __( 'View', 'elementor' ),
131 109 'type' => Controls_Manager::SELECT,
132 110 'options' => [
133 - 'default' => esc_html__( 'Default', 'elementor' ),
134 - 'stacked' => esc_html__( 'Stacked', 'elementor' ),
135 - 'framed' => esc_html__( 'Framed', 'elementor' ),
111 + 'default' => __( 'Default', 'elementor' ),
112 + 'stacked' => __( 'Stacked', 'elementor' ),
113 + 'framed' => __( '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(
@@ -144,14 +119,13 @@
144 119
145 120 $this->add_control(
146 121 'shape',
147 122 [
148 - 'label' => esc_html__( 'Shape', 'elementor' ),
123 + 'label' => __( 'Shape', 'elementor' ),
149 124 'type' => Controls_Manager::SELECT,
150 125 'options' => [
151 - 'square' => esc_html__( 'Square', 'elementor' ),
152 - 'rounded' => esc_html__( 'Rounded', 'elementor' ),
153 - 'circle' => esc_html__( 'Circle', 'elementor' ),
126 + 'circle' => __( 'Circle', 'elementor' ),
127 + 'square' => __( 'Square', 'elementor' ),
154 128 ],
155 129 'default' => 'circle',
156 130 'condition' => [
157 131 'view!' => 'default',
@@ -163,15 +137,15 @@
163 137
164 138 $this->add_control(
165 139 'title_text',
166 140 [
167 - 'label' => esc_html__( 'Title', 'elementor' ),
141 + 'label' => __( 'Title & Description', 'elementor' ),
168 142 'type' => Controls_Manager::TEXT,
169 143 'dynamic' => [
170 144 'active' => true,
171 145 ],
172 - 'default' => esc_html__( 'This is the heading', 'elementor' ),
173 - 'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
146 + 'default' => __( 'This is the heading', 'elementor' ),
147 + 'placeholder' => __( 'Enter your title', 'elementor' ),
174 148 'label_block' => true,
175 149 ]
176 150 );
177 151
@@ -177,16 +151,18 @@
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 ],
186 - 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
187 - 'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
160 + 'default' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
161 + 'placeholder' => __( '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(
@@ -191,219 +167,89 @@
191 167
192 168 $this->add_control(
193 169 'link',
194 170 [
195 - 'label' => esc_html__( 'Link', 'elementor' ),
171 + 'label' => __( 'Link', 'elementor' ),
196 172 'type' => Controls_Manager::URL,
197 173 'dynamic' => [
198 174 'active' => true,
199 175 ],
176 + 'placeholder' => __( '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 - 'label' => esc_html__( 'Icon Position', 'elementor' ),
184 + 'label' => __( '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' => __( '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' => [
251 - 'title' => esc_html__( 'Top', 'elementor' ),
192 + 'top' => [
193 + 'title' => __( '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' => __( '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' => __( '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',
401 240 [
402 - 'label' => esc_html__( 'Icon', 'elementor' ),
241 + 'label' => __( '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
@@ -411,9 +257,9 @@
411 257
412 258 $this->start_controls_tab(
413 259 'icon_colors_normal',
414 260 [
415 - 'label' => esc_html__( 'Normal', 'elementor' ),
261 + 'label' => __( 'Normal', 'elementor' ),
416 262 ]
417 263 );
418 264
419 265 $this->add_control(
@@ -418,9 +264,9 @@
418 264
419 265 $this->add_control(
420 266 'primary_color',
421 267 [
422 - 'label' => esc_html__( 'Primary Color', 'elementor' ),
268 + 'label' => __( 'Primary Color', 'elementor' ),
423 269 'type' => Controls_Manager::COLOR,
424 270 'global' => [
425 271 'default' => Global_Colors::COLOR_PRIMARY,
426 272 ],
@@ -434,9 +280,9 @@
434 280
435 281 $this->add_control(
436 282 'secondary_color',
437 283 [
438 - 'label' => esc_html__( 'Secondary Color', 'elementor' ),
284 + 'label' => __( 'Secondary Color', 'elementor' ),
439 285 'type' => Controls_Manager::COLOR,
440 286 'default' => '',
441 287 'condition' => [
442 288 'view!' => 'default',
@@ -452,9 +298,9 @@
452 298
453 299 $this->start_controls_tab(
454 300 'icon_colors_hover',
455 301 [
456 - 'label' => esc_html__( 'Hover', 'elementor' ),
302 + 'label' => __( 'Hover', 'elementor' ),
457 303 ]
458 304 );
459 305
460 306 $this->add_control(
@@ -459,18 +305,14 @@
459 305
460 306 $this->add_control(
461 307 'hover_primary_color',
462 308 [
463 - 'label' => esc_html__( 'Primary Color', 'elementor' ),
309 + 'label' => __( '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
@@ -476,9 +318,9 @@
476 318
477 319 $this->add_control(
478 320 'hover_secondary_color',
479 321 [
480 - 'label' => esc_html__( 'Secondary Color', 'elementor' ),
322 + 'label' => __( 'Secondary Color', 'elementor' ),
481 323 'type' => Controls_Manager::COLOR,
482 324 'default' => '',
483 325 'condition' => [
484 326 'view!' => 'default',
@@ -483,35 +325,18 @@
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 - 'label' => esc_html__( 'Hover Animation', 'elementor' ),
338 + 'label' => __( 'Hover Animation', 'elementor' ),
514 339 'type' => Controls_Manager::HOVER_ANIMATION,
515 340 ]
516 341 );
517 342
@@ -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' => __( '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 - 'label' => esc_html__( 'Size', 'elementor' ),
373 + 'label' => __( '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 - 'label' => esc_html__( 'Padding', 'elementor' ),
390 + 'label' => __( '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 - 'label' => esc_html__( 'Rotate', 'elementor' ),
410 + 'label' => __( '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 - 'label' => esc_html__( 'Border Width', 'elementor' ),
425 + 'label' => __( '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 - 'label' => esc_html__( 'Border Radius', 'elementor' ),
439 + 'label' => __( '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();
@@ -636,66 +452,91 @@
636 452
637 453 $this->start_controls_section(
638 454 'section_style_content',
639 455 [
640 - 'label' => esc_html__( 'Content', 'elementor' ),
456 + 'label' => __( 'Content', 'elementor' ),
641 457 'tab' => Controls_Manager::TAB_STYLE,
642 458 ]
643 459 );
644 460
645 - $this->add_control(
646 - 'heading_title',
461 + $this->add_responsive_control(
462 + 'text_align',
647 463 [
648 - 'label' => esc_html__( 'Title', 'elementor' ),
649 - 'type' => Controls_Manager::HEADING,
650 - 'separator' => 'before',
464 + 'label' => __( 'Alignment', 'elementor' ),
465 + 'type' => Controls_Manager::CHOOSE,
466 + 'options' => [
467 + 'left' => [
468 + 'title' => __( 'Left', 'elementor' ),
469 + 'icon' => 'eicon-text-align-left',
470 + ],
471 + 'center' => [
472 + 'title' => __( 'Center', 'elementor' ),
473 + 'icon' => 'eicon-text-align-center',
474 + ],
475 + 'right' => [
476 + 'title' => __( 'Right', 'elementor' ),
477 + 'icon' => 'eicon-text-align-right',
478 + ],
479 + 'justify' => [
480 + 'title' => __( 'Justified', 'elementor' ),
481 + 'icon' => 'eicon-text-align-justify',
482 + ],
483 + ],
484 + 'selectors' => [
485 + '{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
486 + ],
651 487 ]
652 488 );
653 489
654 - $this->add_group_control(
655 - Group_Control_Typography::get_type(),
490 + $this->add_control(
491 + 'content_vertical_alignment',
656 492 [
657 - 'name' => 'title_typography',
658 - 'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
659 - 'global' => [
660 - 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
493 + 'label' => __( 'Vertical Alignment', 'elementor' ),
494 + 'type' => Controls_Manager::SELECT,
495 + 'options' => [
496 + 'top' => __( 'Top', 'elementor' ),
497 + 'middle' => __( 'Middle', 'elementor' ),
498 + 'bottom' => __( 'Bottom', 'elementor' ),
661 499 ],
500 + 'default' => 'top',
501 + 'prefix_class' => 'elementor-vertical-align-',
662 502 ]
663 503 );
664 504
665 - $this->add_group_control(
666 - Group_Control_Text_Stroke::get_type(),
505 + $this->add_control(
506 + 'heading_title',
667 507 [
668 - 'name' => 'text_stroke',
669 - 'selector' => '{{WRAPPER}} .elementor-icon-box-title',
508 + 'label' => __( 'Title', 'elementor' ),
509 + 'type' => Controls_Manager::HEADING,
510 + 'separator' => 'before',
670 511 ]
671 512 );
672 513
673 - $this->add_group_control(
674 - Group_Control_Text_Shadow::get_type(),
514 + $this->add_responsive_control(
515 + 'title_bottom_space',
675 516 [
676 - 'name' => 'title_shadow',
677 - 'selector' => '{{WRAPPER}} .elementor-icon-box-title',
517 + 'label' => __( '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 + ],
678 528 ]
679 529 );
680 530
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 531 $this->add_control(
691 532 'title_color',
692 533 [
693 - 'label' => esc_html__( 'Color', 'elementor' ),
534 + 'label' => __( 'Color', 'elementor' ),
694 535 'type' => Controls_Manager::COLOR,
695 536 'default' => '',
696 537 'selectors' => [
697 - '{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
538 + '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-title' => 'color: {{VALUE}};',
698 539 ],
699 540 'global' => [
700 541 'default' => Global_Colors::COLOR_PRIMARY,
701 542 ],
@@ -701,91 +542,50 @@
701 542 ],
702 543 ]
703 544 );
704 545
705 - $this->end_controls_tab();
706 -
707 - $this->start_controls_tab(
708 - 'icon_box_title_colors_hover',
546 + $this->add_group_control(
547 + Group_Control_Typography::get_type(),
709 548 [
710 - 'label' => esc_html__( 'Hover', 'elementor' ),
711 - ]
712 - );
713 -
714 - $this->add_control(
715 - 'hover_title_color',
716 - [
717 - 'label' => esc_html__( 'Color', 'elementor' ),
718 - 'type' => Controls_Manager::COLOR,
719 - 'default' => '',
720 - 'selectors' => [
721 - '{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
722 - {{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
723 - ],
549 + 'name' => 'title_typography',
550 + 'selector' => '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-title a',
724 551 'global' => [
725 - 'default' => Global_Colors::COLOR_PRIMARY,
552 + 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
726 553 ],
727 554 ]
728 555 );
729 556
730 557 $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 558 'heading_description',
751 559 [
752 - 'label' => esc_html__( 'Description', 'elementor' ),
560 + 'label' => __( 'Description', 'elementor' ),
753 561 'type' => Controls_Manager::HEADING,
754 562 'separator' => 'before',
755 563 ]
756 564 );
757 565
758 - $this->add_group_control(
759 - Group_Control_Typography::get_type(),
566 + $this->add_control(
567 + 'description_color',
760 568 [
761 - 'name' => 'description_typography',
762 - 'selector' => '{{WRAPPER}} .elementor-icon-box-description',
569 + 'label' => __( 'Color', 'elementor' ),
570 + 'type' => Controls_Manager::COLOR,
571 + 'default' => '',
572 + 'selectors' => [
573 + '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-description' => 'color: {{VALUE}};',
574 + ],
763 575 'global' => [
764 - 'default' => Global_Typography::TYPOGRAPHY_TEXT,
576 + 'default' => Global_Colors::COLOR_TEXT,
765 577 ],
766 578 ]
767 579 );
768 580
769 581 $this->add_group_control(
770 - Group_Control_Text_Shadow::get_type(),
582 + Group_Control_Typography::get_type(),
771 583 [
772 - 'name' => 'description_shadow',
773 - 'selector' => '{{WRAPPER}} .elementor-icon-box-description',
774 - ]
775 - );
776 -
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 - ],
584 + 'name' => 'description_typography',
585 + 'selector' => '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-description',
786 586 'global' => [
787 - 'default' => Global_Colors::COLOR_TEXT,
587 + 'default' => Global_Typography::TYPOGRAPHY_TEXT,
788 588 ],
789 589 ]
790 590 );
791 591
@@ -801,86 +601,66 @@
801 601 * @access protected
802 602 */
803 603 protected function render() {
804 604 $settings = $this->get_settings_for_display();
805 - $has_link = ! empty( $settings['link']['url'] );
806 - $html_tag = $has_link ? 'a' : 'span';
807 605
808 - $this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
606 + $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
809 607
810 - if ( ! empty( $settings['hover_animation'] ) ) {
811 - $this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
608 + $icon_tag = 'span';
609 +
610 + if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
611 + // add old default
612 + $settings['icon'] = 'fa fa-star';
812 613 }
813 614
814 - $has_icon = ! empty( $settings['selected_icon']['value'] );
815 - $has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
615 + $has_icon = ! empty( $settings['icon'] );
816 616
817 - if ( ! $has_icon && ! $has_content ) {
818 - return;
819 - }
617 + if ( ! empty( $settings['link']['url'] ) ) {
618 + $icon_tag = 'a';
820 619
821 - if ( $has_link ) {
822 620 $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 621 }
828 622
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'] ) ) {
623 + if ( $has_icon ) {
835 624 $this->add_render_attribute( 'i', 'class', $settings['icon'] );
836 625 $this->add_render_attribute( 'i', 'aria-hidden', 'true' );
837 626 }
838 627
628 + $icon_attributes = $this->get_render_attribute_string( 'icon' );
629 + $link_attributes = $this->get_render_attribute_string( 'link' );
630 +
839 631 $this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
840 632
841 633 $this->add_inline_editing_attributes( 'title_text', 'none' );
842 634 $this->add_inline_editing_attributes( 'description_text' );
843 -
635 + if ( ! $has_icon && ! empty( $settings['selected_icon']['value'] ) ) {
636 + $has_icon = true;
637 + }
844 638 $migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
845 639 $is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
846 640 ?>
847 641 <div class="elementor-icon-box-wrapper">
848 -
849 642 <?php if ( $has_icon ) : ?>
850 643 <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' ); ?>>
644 + <<?php echo implode( ' ', [ $icon_tag, $icon_attributes, $link_attributes ] ); ?>>
852 645 <?php
853 646 if ( $is_new || $migrated ) {
854 647 Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
855 648 } elseif ( ! empty( $settings['icon'] ) ) {
856 - ?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
649 + ?><i <?php echo $this->get_render_attribute_string( 'i' ); ?>></i><?php
857 650 }
858 651 ?>
859 - </<?php Utils::print_validated_html_tag( $html_tag ); ?>>
652 + </<?php echo $icon_tag; ?>>
860 653 </div>
861 654 <?php endif; ?>
862 -
863 - <?php if ( $has_content ) : ?>
864 655 <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 -
656 + <<?php echo $settings['title_size']; ?> class="elementor-icon-box-title">
657 + <<?php echo implode( ' ', [ $icon_tag, $link_attributes ] ); ?><?php echo $this->get_render_attribute_string( 'title_text' ); ?>><?php echo $settings['title_text']; ?></<?php echo $icon_tag; ?>>
658 + </<?php echo $settings['title_size']; ?>>
874 659 <?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
875 - <p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
876 - <?php echo wp_kses_post( $settings['description_text'] ); ?>
877 - </p>
660 + <p <?php echo $this->get_render_attribute_string( 'description_text' ); ?>><?php echo $settings['description_text']; ?></p>
878 661 <?php endif; ?>
879 -
880 662 </div>
881 - <?php endif; ?>
882 -
883 663 </div>
884 664 <?php
885 665 }
886 666
@@ -894,36 +674,13 @@
894 674 */
895 675 protected function content_template() {
896 676 ?>
897 677 <#
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',
678 + var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
679 + iconTag = link ? 'a' : 'span',
908 680 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 );
681 + migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
911 682
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 683 view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
927 684
928 685 view.addInlineEditingAttributes( 'title_text', 'none' );
929 686 view.addInlineEditingAttributes( 'description_text' );
@@ -928,39 +685,27 @@
928 685 view.addInlineEditingAttributes( 'title_text', 'none' );
929 686 view.addInlineEditingAttributes( 'description_text' );
930 687 #>
931 688 <div class="elementor-icon-box-wrapper">
932 -
933 - <# if ( hasIcon ) { #>
689 + <# if ( settings.icon || settings.selected_icon ) { #>
934 690 <div class="elementor-icon-box-icon">
935 - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
691 + <{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}">
936 692 <# 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 }}}>
693 + {{{ iconHTML.value }}}
694 + <# } else { #>
695 + <i class="{{ settings.icon }}" aria-hidden="true"></i>
696 + <# } #>
697 + </{{{ iconTag }}}>
942 698 </div>
943 699 <# } #>
944 -
945 - <# if ( hasContent ) { #>
946 700 <div class="elementor-icon-box-content">
947 -
948 - <# if ( settings.title_text ) { #>
949 - <{{{ titleSizeTag }}} class="elementor-icon-box-title">
950 - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
951 - {{{ elementor.helpers.sanitize( settings.title_text ) }}}
952 - </{{{ htmlTag }}}>
953 - </{{{ titleSizeTag }}}>
954 - <# } #>
955 -
701 + <{{{ settings.title_size }}} class="elementor-icon-box-title">
702 + <{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}>
703 + </{{{ settings.title_size }}}>
956 704 <# if ( settings.description_text ) { #>
957 - <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
705 + <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
958 706 <# } #>
959 -
960 707 </div>
961 - <# } #>
962 -
963 708 </div>
964 709 <?php
965 710 }
966 711
@@ -965,27 +710,6 @@
965 710 }
966 711
967 712 public function on_import( $element ) {
968 713 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 714 }
991 715 }