PluginProbe
Elementor Website Builder – more than just a page builder / 3.0.1
Elementor Website Builder – more than just a page builder v3.0.1
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 +445 -41 4.2.03.0.1 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,360 @@
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
111 - protected function register_controls() {
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 1.0.0
106 + * @access protected
107 + */
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 + ]
207 + );
208 +
209 + $this->add_control(
210 + 'icon_align',
211 + [
212 + 'label' => __( 'Icon Position', 'elementor' ),
213 + 'type' => Controls_Manager::SELECT,
214 + 'default' => 'left',
215 + 'options' => [
216 + 'left' => __( 'Before', 'elementor' ),
217 + 'right' => __( 'After', 'elementor' ),
218 + ],
219 + 'condition' => [
220 + 'selected_icon[value]!' => '',
221 + ],
222 + ]
223 + );
224 +
225 + $this->add_control(
226 + 'icon_indent',
227 + [
228 + 'label' => __( 'Icon Spacing', 'elementor' ),
229 + 'type' => Controls_Manager::SLIDER,
230 + 'range' => [
231 + 'px' => [
232 + 'max' => 50,
233 + ],
234 + ],
235 + 'selectors' => [
236 + '{{WRAPPER}} .elementor-button .elementor-align-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
237 + '{{WRAPPER}} .elementor-button .elementor-align-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
238 + ],
239 + ]
240 + );
241 +
242 + $this->add_control(
243 + 'view',
244 + [
245 + 'label' => __( 'View', 'elementor' ),
246 + 'type' => Controls_Manager::HIDDEN,
247 + 'default' => 'traditional',
248 + ]
249 + );
250 +
251 + $this->add_control(
252 + 'button_css_id',
253 + [
254 + 'label' => __( 'Button ID', 'elementor' ),
255 + 'type' => Controls_Manager::TEXT,
256 + 'dynamic' => [
257 + 'active' => true,
258 + ],
259 + 'default' => '',
260 + 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
261 + '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' ),
262 + 'separator' => 'before',
263 +
264 + ]
265 + );
266 +
121 267 $this->end_controls_section();
122 268
123 269 $this->start_controls_section(
124 270 'section_style',
125 271 [
126 - 'label' => esc_html__( 'Button', 'elementor' ),
272 + 'label' => __( 'Button', 'elementor' ),
127 273 'tab' => Controls_Manager::TAB_STYLE,
128 274 ]
129 275 );
130 276
131 - $this->register_button_style_controls();
277 + $this->add_group_control(
278 + Group_Control_Typography::get_type(),
279 + [
280 + 'name' => 'typography',
281 + 'global' => [
282 + 'default' => Global_Typography::TYPOGRAPHY_ACCENT,
283 + ],
284 + 'selector' => '{{WRAPPER}} .elementor-button',
285 + ]
286 + );
132 287
288 + $this->add_group_control(
289 + Group_Control_Text_Shadow::get_type(),
290 + [
291 + 'name' => 'text_shadow',
292 + 'selector' => '{{WRAPPER}} .elementor-button',
293 + ]
294 + );
295 +
296 + $this->start_controls_tabs( 'tabs_button_style' );
297 +
298 + $this->start_controls_tab(
299 + 'tab_button_normal',
300 + [
301 + 'label' => __( 'Normal', 'elementor' ),
302 + ]
303 + );
304 +
305 + $this->add_control(
306 + 'button_text_color',
307 + [
308 + 'label' => __( 'Text Color', 'elementor' ),
309 + 'type' => Controls_Manager::COLOR,
310 + 'default' => '',
311 + 'selectors' => [
312 + '{{WRAPPER}} .elementor-button' => 'fill: {{VALUE}}; color: {{VALUE}};',
313 + ],
314 + ]
315 + );
316 +
317 + $this->add_control(
318 + 'background_color',
319 + [
320 + 'label' => __( 'Background Color', 'elementor' ),
321 + 'type' => Controls_Manager::COLOR,
322 + 'global' => [
323 + 'default' => Global_Colors::COLOR_ACCENT,
324 + ],
325 + 'selectors' => [
326 + '{{WRAPPER}} .elementor-button' => 'background-color: {{VALUE}};',
327 + ],
328 + ]
329 + );
330 +
331 + $this->end_controls_tab();
332 +
333 + $this->start_controls_tab(
334 + 'tab_button_hover',
335 + [
336 + 'label' => __( 'Hover', 'elementor' ),
337 + ]
338 + );
339 +
340 + $this->add_control(
341 + 'hover_color',
342 + [
343 + 'label' => __( 'Text Color', 'elementor' ),
344 + 'type' => Controls_Manager::COLOR,
345 + 'selectors' => [
346 + '{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'color: {{VALUE}};',
347 + '{{WRAPPER}} .elementor-button:hover svg, {{WRAPPER}} .elementor-button:focus svg' => 'fill: {{VALUE}};',
348 + ],
349 + ]
350 + );
351 +
352 + $this->add_control(
353 + 'button_background_hover_color',
354 + [
355 + 'label' => __( 'Background Color', 'elementor' ),
356 + 'type' => Controls_Manager::COLOR,
357 + 'selectors' => [
358 + '{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'background-color: {{VALUE}};',
359 + ],
360 + ]
361 + );
362 +
363 + $this->add_control(
364 + 'button_hover_border_color',
365 + [
366 + 'label' => __( 'Border Color', 'elementor' ),
367 + 'type' => Controls_Manager::COLOR,
368 + 'condition' => [
369 + 'border_border!' => '',
370 + ],
371 + 'selectors' => [
372 + '{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'border-color: {{VALUE}};',
373 + ],
374 + ]
375 + );
376 +
377 + $this->add_control(
378 + 'hover_animation',
379 + [
380 + 'label' => __( 'Hover Animation', 'elementor' ),
381 + 'type' => Controls_Manager::HOVER_ANIMATION,
382 + ]
383 + );
384 +
385 + $this->end_controls_tab();
386 +
387 + $this->end_controls_tabs();
388 +
389 + $this->add_group_control(
390 + Group_Control_Border::get_type(),
391 + [
392 + 'name' => 'border',
393 + 'selector' => '{{WRAPPER}} .elementor-button',
394 + 'separator' => 'before',
395 + ]
396 + );
397 +
398 + $this->add_control(
399 + 'border_radius',
400 + [
401 + 'label' => __( 'Border Radius', 'elementor' ),
402 + 'type' => Controls_Manager::DIMENSIONS,
403 + 'size_units' => [ 'px', '%' ],
404 + 'selectors' => [
405 + '{{WRAPPER}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
406 + ],
407 + ]
408 + );
409 +
410 + $this->add_group_control(
411 + Group_Control_Box_Shadow::get_type(),
412 + [
413 + 'name' => 'button_box_shadow',
414 + 'selector' => '{{WRAPPER}} .elementor-button',
415 + ]
416 + );
417 +
418 + $this->add_responsive_control(
419 + 'text_padding',
420 + [
421 + 'label' => __( 'Padding', 'elementor' ),
422 + 'type' => Controls_Manager::DIMENSIONS,
423 + 'size_units' => [ 'px', 'em', '%' ],
424 + 'selectors' => [
425 + '{{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
426 + ],
427 + 'separator' => 'before',
428 + ]
429 + );
430 +
133 431 $this->end_controls_section();
134 432 }
135 433
136 434 /**
@@ -141,23 +439,129 @@
141 439 * @since 1.0.0
142 440 * @access protected
143 441 */
144 442 protected function render() {
145 - $this->render_button();
443 + $settings = $this->get_settings_for_display();
444 +
445 + $this->add_render_attribute( 'wrapper', 'class', 'elementor-button-wrapper' );
446 +
447 + if ( ! empty( $settings['link']['url'] ) ) {
448 + $this->add_link_attributes( 'button', $settings['link'] );
449 + $this->add_render_attribute( 'button', 'class', 'elementor-button-link' );
450 + }
451 +
452 + $this->add_render_attribute( 'button', 'class', 'elementor-button' );
453 + $this->add_render_attribute( 'button', 'role', 'button' );
454 +
455 + if ( ! empty( $settings['button_css_id'] ) ) {
456 + $this->add_render_attribute( 'button', 'id', $settings['button_css_id'] );
457 + }
458 +
459 + if ( ! empty( $settings['size'] ) ) {
460 + $this->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['size'] );
461 + }
462 +
463 + if ( $settings['hover_animation'] ) {
464 + $this->add_render_attribute( 'button', 'class', 'elementor-animation-' . $settings['hover_animation'] );
465 + }
466 +
467 + ?>
468 + <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
469 + <a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
470 + <?php $this->render_text(); ?>
471 + </a>
472 + </div>
473 + <?php
146 474 }
147 475
148 - public function render_markdown(): string {
476 + /**
477 + * Render button widget output in the editor.
478 + *
479 + * Written as a Backbone JavaScript template and used to generate the live preview.
480 + *
481 + * @since 2.9.0
482 + * @access protected
483 + */
484 + protected function content_template() {
485 + ?>
486 + <#
487 + view.addRenderAttribute( 'text', 'class', 'elementor-button-text' );
488 + view.addInlineEditingAttributes( 'text', 'none' );
489 + var iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
490 + migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
491 + #>
492 + <div class="elementor-button-wrapper">
493 + <a id="{{ settings.button_css_id }}" class="elementor-button elementor-size-{{ settings.size }} elementor-animation-{{ settings.hover_animation }}" href="{{ settings.link.url }}" role="button">
494 + <span class="elementor-button-content-wrapper">
495 + <# if ( settings.icon || settings.selected_icon ) { #>
496 + <span class="elementor-button-icon elementor-align-icon-{{ settings.icon_align }}">
497 + <# if ( ( migrated || ! settings.icon ) && iconHTML.rendered ) { #>
498 + {{{ iconHTML.value }}}
499 + <# } else { #>
500 + <i class="{{ settings.icon }}" aria-hidden="true"></i>
501 + <# } #>
502 + </span>
503 + <# } #>
504 + <span {{{ view.getRenderAttributeString( 'text' ) }}}>{{{ settings.text }}}</span>
505 + </span>
506 + </a>
507 + </div>
508 + <?php
509 + }
510 +
511 + /**
512 + * Render button text.
513 + *
514 + * Render button widget text.
515 + *
516 + * @since 1.5.0
517 + * @access protected
518 + */
519 + protected function render_text() {
149 520 $settings = $this->get_settings_for_display();
150 521
151 - $text = Utils::html_to_plain_text( $settings['text'] ?? '' );
522 + $migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
523 + $is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
152 524
153 - if ( empty( $text ) ) {
154 - return '';
525 + if ( ! $is_new && empty( $settings['icon_align'] ) ) {
526 + // @todo: remove when deprecated
527 + // added as bc in 2.6
528 + //old default
529 + $settings['icon_align'] = $this->get_settings( 'icon_align' );
155 530 }
156 531
157 - if ( ! empty( $settings['link']['url'] ) ) {
158 - return '[' . $text . '](' . esc_url( $settings['link']['url'] ) . ')';
159 - }
532 + $this->add_render_attribute( [
533 + 'content-wrapper' => [
534 + 'class' => 'elementor-button-content-wrapper',
535 + ],
536 + 'icon-align' => [
537 + 'class' => [
538 + 'elementor-button-icon',
539 + 'elementor-align-icon-' . $settings['icon_align'],
540 + ],
541 + ],
542 + 'text' => [
543 + 'class' => 'elementor-button-text',
544 + ],
545 + ] );
160 546
161 - return '**' . $text . '**';
547 + $this->add_inline_editing_attributes( 'text', 'none' );
548 + ?>
549 + <span <?php echo $this->get_render_attribute_string( 'content-wrapper' ); ?>>
550 + <?php if ( ! empty( $settings['icon'] ) || ! empty( $settings['selected_icon']['value'] ) ) : ?>
551 + <span <?php echo $this->get_render_attribute_string( 'icon-align' ); ?>>
552 + <?php if ( $is_new || $migrated ) :
553 + Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
554 + else : ?>
555 + <i class="<?php echo esc_attr( $settings['icon'] ); ?>" aria-hidden="true"></i>
556 + <?php endif; ?>
557 + </span>
558 + <?php endif; ?>
559 + <span <?php echo $this->get_render_attribute_string( 'text' ); ?>><?php echo $settings['text']; ?></span>
560 + </span>
561 + <?php
562 + }
563 +
564 + public function on_import( $element ) {
565 + return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon' );
162 566 }
163 567 }