PluginProbe
Elementor Website Builder – more than just a page builder / 3.1.3
Elementor Website Builder – more than just a page builder v3.1.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/button.php +446 -40 4.2.23.1.3 View file →
@@ -1,14 +1,14 @@
1 1 <?php
2 2 namespace Elementor;
3 3
4 -use Elementor\Includes\Widgets\Traits\Button_Trait;
5 -use Elementor\Modules\Promotions\Controls\Promotion_Control;
6 -
7 4 if ( ! defined( 'ABSPATH' ) ) {
8 5 exit; // Exit if accessed directly.
9 6 }
10 7
8 +use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9 +use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10 +
11 11 /**
12 12 * Elementor button widget.
13 13 *
14 14 * Elementor widget that displays a button with the ability to control every
@@ -17,10 +17,8 @@
17 17 * @since 1.0.0
18 18 */
19 19 class Widget_Button extends Widget_Base {
20 20
21 - use Button_Trait;
22 -
23 21 /**
24 22 * Get widget name.
25 23 *
26 24 * Retrieve button widget name.
@@ -44,9 +42,9 @@
44 42 *
45 43 * @return string Widget title.
46 44 */
47 45 public function get_title() {
48 - return esc_html__( 'Button', 'elementor' );
46 + return __( 'Button', 'elementor' );
49 47 }
50 48
51 49 /**
52 50 * Get widget icon.
@@ -77,60 +75,362 @@
77 75 public function get_categories() {
78 76 return [ 'basic' ];
79 77 }
80 78
81 - protected function is_dynamic_content(): bool {
82 - return false;
83 - }
84 -
85 - public function has_widget_inner_wrapper(): bool {
86 - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
87 - }
88 -
89 79 /**
90 - * Get widget upsale data.
80 + * Get button sizes.
91 81 *
92 - * Retrieve the widget promotion data.
82 + * Retrieve an array of button sizes for the button widget.
93 83 *
94 - * @since 3.19.0
95 - * @access protected
84 + * @since 1.0.0
85 + * @access public
86 + * @static
96 87 *
97 - * @return array Widget promotion data.
88 + * @return array An array containing button sizes.
98 89 */
99 - protected function get_upsale_data() {
90 + public static function get_button_sizes() {
100 91 return [
101 - 'condition' => ! Utils::has_pro(),
102 - 'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
103 - 'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
104 - 'title' => esc_html__( 'Convert visitors into customers', 'elementor' ),
105 - 'description' => esc_html__( 'Get the Call to Action widget and grow your toolbox with Elementor Pro.', 'elementor' ),
106 - 'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-button-widget/' ),
107 - 'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
92 + 'xs' => __( 'Extra Small', 'elementor' ),
93 + 'sm' => __( 'Small', 'elementor' ),
94 + 'md' => __( 'Medium', 'elementor' ),
95 + 'lg' => __( 'Large', 'elementor' ),
96 + 'xl' => __( 'Extra Large', 'elementor' ),
108 97 ];
109 98 }
110 99
100 + /**
101 + * Register button widget controls.
102 + *
103 + * Adds different input fields to allow the user to change and customize the widget settings.
104 + *
105 + * @since 3.1.0
106 + * @access protected
107 + */
111 108 protected function register_controls() {
112 109 $this->start_controls_section(
113 110 'section_button',
114 111 [
115 - 'label' => esc_html__( 'Button', 'elementor' ),
112 + 'label' => __( 'Button', 'elementor' ),
116 113 ]
117 114 );
118 115
119 - $this->register_button_content_controls();
116 + $this->add_control(
117 + 'button_type',
118 + [
119 + 'label' => __( 'Type', 'elementor' ),
120 + 'type' => Controls_Manager::SELECT,
121 + 'default' => '',
122 + 'options' => [
123 + '' => __( 'Default', 'elementor' ),
124 + 'info' => __( 'Info', 'elementor' ),
125 + 'success' => __( 'Success', 'elementor' ),
126 + 'warning' => __( 'Warning', 'elementor' ),
127 + 'danger' => __( 'Danger', 'elementor' ),
128 + ],
129 + 'prefix_class' => 'elementor-button-',
130 + ]
131 + );
120 132
133 + $this->add_control(
134 + 'text',
135 + [
136 + 'label' => __( 'Text', 'elementor' ),
137 + 'type' => Controls_Manager::TEXT,
138 + 'dynamic' => [
139 + 'active' => true,
140 + ],
141 + 'default' => __( 'Click here', 'elementor' ),
142 + 'placeholder' => __( 'Click here', 'elementor' ),
143 + ]
144 + );
145 +
146 + $this->add_control(
147 + 'link',
148 + [
149 + 'label' => __( 'Link', 'elementor' ),
150 + 'type' => Controls_Manager::URL,
151 + 'dynamic' => [
152 + 'active' => true,
153 + ],
154 + 'placeholder' => __( 'https://your-link.com', 'elementor' ),
155 + 'default' => [
156 + 'url' => '#',
157 + ],
158 + ]
159 + );
160 +
161 + $this->add_responsive_control(
162 + 'align',
163 + [
164 + 'label' => __( 'Alignment', 'elementor' ),
165 + 'type' => Controls_Manager::CHOOSE,
166 + 'options' => [
167 + 'left' => [
168 + 'title' => __( 'Left', 'elementor' ),
169 + 'icon' => 'eicon-text-align-left',
170 + ],
171 + 'center' => [
172 + 'title' => __( 'Center', 'elementor' ),
173 + 'icon' => 'eicon-text-align-center',
174 + ],
175 + 'right' => [
176 + 'title' => __( 'Right', 'elementor' ),
177 + 'icon' => 'eicon-text-align-right',
178 + ],
179 + 'justify' => [
180 + 'title' => __( 'Justified', 'elementor' ),
181 + 'icon' => 'eicon-text-align-justify',
182 + ],
183 + ],
184 + 'prefix_class' => 'elementor%s-align-',
185 + 'default' => '',
186 + ]
187 + );
188 +
189 + $this->add_control(
190 + 'size',
191 + [
192 + 'label' => __( 'Size', 'elementor' ),
193 + 'type' => Controls_Manager::SELECT,
194 + 'default' => 'sm',
195 + 'options' => self::get_button_sizes(),
196 + 'style_transfer' => true,
197 + ]
198 + );
199 +
200 + $this->add_control(
201 + 'selected_icon',
202 + [
203 + 'label' => __( 'Icon', 'elementor' ),
204 + 'type' => Controls_Manager::ICONS,
205 + 'fa4compatibility' => 'icon',
206 + 'skin' => 'inline',
207 + 'label_block' => false,
208 + ]
209 + );
210 +
211 + $this->add_control(
212 + 'icon_align',
213 + [
214 + 'label' => __( 'Icon Position', 'elementor' ),
215 + 'type' => Controls_Manager::SELECT,
216 + 'default' => 'left',
217 + 'options' => [
218 + 'left' => __( 'Before', 'elementor' ),
219 + 'right' => __( 'After', 'elementor' ),
220 + ],
221 + 'condition' => [
222 + 'selected_icon[value]!' => '',
223 + ],
224 + ]
225 + );
226 +
227 + $this->add_control(
228 + 'icon_indent',
229 + [
230 + 'label' => __( 'Icon Spacing', 'elementor' ),
231 + 'type' => Controls_Manager::SLIDER,
232 + 'range' => [
233 + 'px' => [
234 + 'max' => 50,
235 + ],
236 + ],
237 + 'selectors' => [
238 + '{{WRAPPER}} .elementor-button .elementor-align-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
239 + '{{WRAPPER}} .elementor-button .elementor-align-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
240 + ],
241 + ]
242 + );
243 +
244 + $this->add_control(
245 + 'view',
246 + [
247 + 'label' => __( 'View', 'elementor' ),
248 + 'type' => Controls_Manager::HIDDEN,
249 + 'default' => 'traditional',
250 + ]
251 + );
252 +
253 + $this->add_control(
254 + 'button_css_id',
255 + [
256 + 'label' => __( 'Button ID', 'elementor' ),
257 + 'type' => Controls_Manager::TEXT,
258 + 'dynamic' => [
259 + 'active' => true,
260 + ],
261 + 'default' => '',
262 + 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
263 + 'description' => __( 'Please make sure the ID is unique and not used elsewhere on the page this form is displayed. This field allows <code>A-z 0-9</code> & underscore chars without spaces.', 'elementor' ),
264 + 'separator' => 'before',
265 +
266 + ]
267 + );
268 +
121 269 $this->end_controls_section();
122 270
123 271 $this->start_controls_section(
124 272 'section_style',
125 273 [
126 - 'label' => esc_html__( 'Button', 'elementor' ),
274 + 'label' => __( 'Button', 'elementor' ),
127 275 'tab' => Controls_Manager::TAB_STYLE,
128 276 ]
129 277 );
130 278
131 - $this->register_button_style_controls();
279 + $this->add_group_control(
280 + Group_Control_Typography::get_type(),
281 + [
282 + 'name' => 'typography',
283 + 'global' => [
284 + 'default' => Global_Typography::TYPOGRAPHY_ACCENT,
285 + ],
286 + 'selector' => '{{WRAPPER}} .elementor-button',
287 + ]
288 + );
132 289
290 + $this->add_group_control(
291 + Group_Control_Text_Shadow::get_type(),
292 + [
293 + 'name' => 'text_shadow',
294 + 'selector' => '{{WRAPPER}} .elementor-button',
295 + ]
296 + );
297 +
298 + $this->start_controls_tabs( 'tabs_button_style' );
299 +
300 + $this->start_controls_tab(
301 + 'tab_button_normal',
302 + [
303 + 'label' => __( 'Normal', 'elementor' ),
304 + ]
305 + );
306 +
307 + $this->add_control(
308 + 'button_text_color',
309 + [
310 + 'label' => __( 'Text Color', 'elementor' ),
311 + 'type' => Controls_Manager::COLOR,
312 + 'default' => '',
313 + 'selectors' => [
314 + '{{WRAPPER}} .elementor-button' => 'fill: {{VALUE}}; color: {{VALUE}};',
315 + ],
316 + ]
317 + );
318 +
319 + $this->add_control(
320 + 'background_color',
321 + [
322 + 'label' => __( 'Background Color', 'elementor' ),
323 + 'type' => Controls_Manager::COLOR,
324 + 'global' => [
325 + 'default' => Global_Colors::COLOR_ACCENT,
326 + ],
327 + 'selectors' => [
328 + '{{WRAPPER}} .elementor-button' => 'background-color: {{VALUE}};',
329 + ],
330 + ]
331 + );
332 +
333 + $this->end_controls_tab();
334 +
335 + $this->start_controls_tab(
336 + 'tab_button_hover',
337 + [
338 + 'label' => __( 'Hover', 'elementor' ),
339 + ]
340 + );
341 +
342 + $this->add_control(
343 + 'hover_color',
344 + [
345 + 'label' => __( 'Text Color', 'elementor' ),
346 + 'type' => Controls_Manager::COLOR,
347 + 'selectors' => [
348 + '{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'color: {{VALUE}};',
349 + '{{WRAPPER}} .elementor-button:hover svg, {{WRAPPER}} .elementor-button:focus svg' => 'fill: {{VALUE}};',
350 + ],
351 + ]
352 + );
353 +
354 + $this->add_control(
355 + 'button_background_hover_color',
356 + [
357 + 'label' => __( 'Background Color', 'elementor' ),
358 + 'type' => Controls_Manager::COLOR,
359 + 'selectors' => [
360 + '{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'background-color: {{VALUE}};',
361 + ],
362 + ]
363 + );
364 +
365 + $this->add_control(
366 + 'button_hover_border_color',
367 + [
368 + 'label' => __( 'Border Color', 'elementor' ),
369 + 'type' => Controls_Manager::COLOR,
370 + 'condition' => [
371 + 'border_border!' => '',
372 + ],
373 + 'selectors' => [
374 + '{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'border-color: {{VALUE}};',
375 + ],
376 + ]
377 + );
378 +
379 + $this->add_control(
380 + 'hover_animation',
381 + [
382 + 'label' => __( 'Hover Animation', 'elementor' ),
383 + 'type' => Controls_Manager::HOVER_ANIMATION,
384 + ]
385 + );
386 +
387 + $this->end_controls_tab();
388 +
389 + $this->end_controls_tabs();
390 +
391 + $this->add_group_control(
392 + Group_Control_Border::get_type(),
393 + [
394 + 'name' => 'border',
395 + 'selector' => '{{WRAPPER}} .elementor-button',
396 + 'separator' => 'before',
397 + ]
398 + );
399 +
400 + $this->add_control(
401 + 'border_radius',
402 + [
403 + 'label' => __( 'Border Radius', 'elementor' ),
404 + 'type' => Controls_Manager::DIMENSIONS,
405 + 'size_units' => [ 'px', '%', 'em' ],
406 + 'selectors' => [
407 + '{{WRAPPER}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
408 + ],
409 + ]
410 + );
411 +
412 + $this->add_group_control(
413 + Group_Control_Box_Shadow::get_type(),
414 + [
415 + 'name' => 'button_box_shadow',
416 + 'selector' => '{{WRAPPER}} .elementor-button',
417 + ]
418 + );
419 +
420 + $this->add_responsive_control(
421 + 'text_padding',
422 + [
423 + 'label' => __( 'Padding', 'elementor' ),
424 + 'type' => Controls_Manager::DIMENSIONS,
425 + 'size_units' => [ 'px', 'em', '%' ],
426 + 'selectors' => [
427 + '{{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
428 + ],
429 + 'separator' => 'before',
430 + ]
431 + );
432 +
133 433 $this->end_controls_section();
134 434 }
135 435
136 436 /**
@@ -141,23 +441,129 @@
141 441 * @since 1.0.0
142 442 * @access protected
143 443 */
144 444 protected function render() {
145 - $this->render_button();
445 + $settings = $this->get_settings_for_display();
446 +
447 + $this->add_render_attribute( 'wrapper', 'class', 'elementor-button-wrapper' );
448 +
449 + if ( ! empty( $settings['link']['url'] ) ) {
450 + $this->add_link_attributes( 'button', $settings['link'] );
451 + $this->add_render_attribute( 'button', 'class', 'elementor-button-link' );
452 + }
453 +
454 + $this->add_render_attribute( 'button', 'class', 'elementor-button' );
455 + $this->add_render_attribute( 'button', 'role', 'button' );
456 +
457 + if ( ! empty( $settings['button_css_id'] ) ) {
458 + $this->add_render_attribute( 'button', 'id', $settings['button_css_id'] );
459 + }
460 +
461 + if ( ! empty( $settings['size'] ) ) {
462 + $this->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['size'] );
463 + }
464 +
465 + if ( $settings['hover_animation'] ) {
466 + $this->add_render_attribute( 'button', 'class', 'elementor-animation-' . $settings['hover_animation'] );
467 + }
468 +
469 + ?>
470 + <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
471 + <a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
472 + <?php $this->render_text(); ?>
473 + </a>
474 + </div>
475 + <?php
146 476 }
147 477
148 - public function render_markdown(): string {
478 + /**
479 + * Render button widget output in the editor.
480 + *
481 + * Written as a Backbone JavaScript template and used to generate the live preview.
482 + *
483 + * @since 2.9.0
484 + * @access protected
485 + */
486 + protected function content_template() {
487 + ?>
488 + <#
489 + view.addRenderAttribute( 'text', 'class', 'elementor-button-text' );
490 + view.addInlineEditingAttributes( 'text', 'none' );
491 + var iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
492 + migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
493 + #>
494 + <div class="elementor-button-wrapper">
495 + <a id="{{ settings.button_css_id }}" class="elementor-button elementor-size-{{ settings.size }} elementor-animation-{{ settings.hover_animation }}" href="{{ settings.link.url }}" role="button">
496 + <span class="elementor-button-content-wrapper">
497 + <# if ( settings.icon || settings.selected_icon ) { #>
498 + <span class="elementor-button-icon elementor-align-icon-{{ settings.icon_align }}">
499 + <# if ( ( migrated || ! settings.icon ) && iconHTML.rendered ) { #>
500 + {{{ iconHTML.value }}}
501 + <# } else { #>
502 + <i class="{{ settings.icon }}" aria-hidden="true"></i>
503 + <# } #>
504 + </span>
505 + <# } #>
506 + <span {{{ view.getRenderAttributeString( 'text' ) }}}>{{{ settings.text }}}</span>
507 + </span>
508 + </a>
509 + </div>
510 + <?php
511 + }
512 +
513 + /**
514 + * Render button text.
515 + *
516 + * Render button widget text.
517 + *
518 + * @since 1.5.0
519 + * @access protected
520 + */
521 + protected function render_text() {
149 522 $settings = $this->get_settings_for_display();
150 523
151 - $text = Utils::html_to_plain_text( $settings['text'] ?? '' );
524 + $migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
525 + $is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
152 526
153 - if ( empty( $text ) ) {
154 - return '';
527 + if ( ! $is_new && empty( $settings['icon_align'] ) ) {
528 + // @todo: remove when deprecated
529 + // added as bc in 2.6
530 + //old default
531 + $settings['icon_align'] = $this->get_settings( 'icon_align' );
155 532 }
156 533
157 - if ( ! empty( $settings['link']['url'] ) ) {
158 - return '[' . $text . '](' . esc_url( $settings['link']['url'] ) . ')';
159 - }
534 + $this->add_render_attribute( [
535 + 'content-wrapper' => [
536 + 'class' => 'elementor-button-content-wrapper',
537 + ],
538 + 'icon-align' => [
539 + 'class' => [
540 + 'elementor-button-icon',
541 + 'elementor-align-icon-' . $settings['icon_align'],
542 + ],
543 + ],
544 + 'text' => [
545 + 'class' => 'elementor-button-text',
546 + ],
547 + ] );
160 548
161 - return '**' . $text . '**';
549 + $this->add_inline_editing_attributes( 'text', 'none' );
550 + ?>
551 + <span <?php echo $this->get_render_attribute_string( 'content-wrapper' ); ?>>
552 + <?php if ( ! empty( $settings['icon'] ) || ! empty( $settings['selected_icon']['value'] ) ) : ?>
553 + <span <?php echo $this->get_render_attribute_string( 'icon-align' ); ?>>
554 + <?php if ( $is_new || $migrated ) :
555 + Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
556 + else : ?>
557 + <i class="<?php echo esc_attr( $settings['icon'] ); ?>" aria-hidden="true"></i>
558 + <?php endif; ?>
559 + </span>
560 + <?php endif; ?>
561 + <span <?php echo $this->get_render_attribute_string( 'text' ); ?>><?php echo $settings['text']; ?></span>
562 + </span>
563 + <?php
564 + }
565 +
566 + public function on_import( $element ) {
567 + return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon' );
162 568 }
163 569 }