'button', 'callback' => 'su_shortcode_button', 'image' => su_get_plugin_url() . 'admin/images/shortcodes/button.svg', 'name' => __('Button', 'shortcodes-ultimate'), 'type' => 'wrap', 'group' => 'content', 'atts' => array( 'url' => array( 'values' => array(), 'default' => get_option('home'), 'name' => __('Link', 'shortcodes-ultimate'), 'desc' => __('Button link', 'shortcodes-ultimate'), ), 'target' => array( 'type' => 'select', 'values' => array( 'self' => __('Open in same tab', 'shortcodes-ultimate'), 'blank' => __('Open in new tab', 'shortcodes-ultimate'), ), 'default' => 'self', 'name' => __('Target', 'shortcodes-ultimate'), 'desc' => __('Button link target', 'shortcodes-ultimate'), ), 'style' => array( 'type' => 'select', 'values' => array( 'default' => __('Default', 'shortcodes-ultimate'), 'flat' => __('Flat', 'shortcodes-ultimate'), 'ghost' => __('Ghost', 'shortcodes-ultimate'), 'soft' => __('Soft', 'shortcodes-ultimate'), 'glass' => __('Glass', 'shortcodes-ultimate'), 'bubbles' => __('Bubbles', 'shortcodes-ultimate'), 'noise' => __('Noise', 'shortcodes-ultimate'), 'stroked' => __('Stroked', 'shortcodes-ultimate'), '3d' => __('3D', 'shortcodes-ultimate'), ), 'default' => 'default', 'name' => __('Style', 'shortcodes-ultimate'), 'desc' => __('Button background style preset', 'shortcodes-ultimate'), ), 'background' => array( 'type' => 'color', 'values' => array(), 'default' => '#2D89EF', 'name' => __('Background', 'shortcodes-ultimate'), 'desc' => __('Button background color', 'shortcodes-ultimate'), ), 'color' => array( 'type' => 'color', 'values' => array(), 'default' => '#FFFFFF', 'name' => __('Text color', 'shortcodes-ultimate'), 'desc' => __('Button text color', 'shortcodes-ultimate'), ), 'size' => array( 'type' => 'slider', 'min' => 1, 'max' => 20, 'step' => 1, 'default' => 3, 'name' => __('Size', 'shortcodes-ultimate'), 'desc' => __('Button size', 'shortcodes-ultimate'), ), 'wide' => array( 'type' => 'bool', 'default' => 'no', 'name' => __('Fluid', 'shortcodes-ultimate'), 'desc' => __('Fluid buttons has 100% width', 'shortcodes-ultimate'), ), 'center' => array( 'type' => 'bool', 'default' => 'no', 'name' => __('Centered', 'shortcodes-ultimate'), 'desc' => __('Is button centered on the page', 'shortcodes-ultimate'), ), 'radius' => array( 'type' => 'select', 'values' => array( 'auto' => __('Auto', 'shortcodes-ultimate'), 'round' => __('Round', 'shortcodes-ultimate'), '0' => __('Square', 'shortcodes-ultimate'), '5' => '5px', '10' => '10px', '20' => '20px', ), 'default' => 'auto', 'name' => __('Radius', 'shortcodes-ultimate'), 'desc' => __('Radius of button corners. Auto-radius calculation based on button size', 'shortcodes-ultimate'), ), 'icon' => array( 'type' => 'icon', 'default' => '', 'name' => __('Icon', 'shortcodes-ultimate'), 'desc' => __('You can upload custom icon for this button or pick a built-in icon', 'shortcodes-ultimate'), ), 'icon_color' => array( 'type' => 'color', 'default' => '#FFFFFF', 'name' => __('Icon color', 'shortcodes-ultimate'), 'desc' => __('This color will be applied to the selected icon. Does not works with uploaded icons', 'shortcodes-ultimate'), ), 'text_shadow' => array( 'type' => 'shadow', 'default' => 'none', 'name' => __('Text shadow', 'shortcodes-ultimate'), 'desc' => __('Button text shadow', 'shortcodes-ultimate'), ), 'desc' => array( 'default' => '', 'name' => __('Description', 'shortcodes-ultimate'), 'desc' => __('Small description under button text. This option is incompatible with icon.', 'shortcodes-ultimate'), ), 'download' => array( 'default' => '', 'name' => __('Download', 'shortcodes-ultimate'), 'desc' => __('The download attribute specifies that the button URL will be downloaded when a user clicks on the button. The value of the attribute will be the name of the downloaded file.', 'shortcodes-ultimate'), ), 'onclick' => array( 'default' => '', 'name' => __('onClick', 'shortcodes-ultimate'), 'desc' => __('Advanced JavaScript code for onClick action', 'shortcodes-ultimate'), ), 'rel' => array( 'default' => '', 'name' => __('Rel attribute', 'shortcodes-ultimate'), 'desc' => __('Here you can add value for the rel attribute.
Example values: nofollow, lightbox', 'shortcodes-ultimate'), ), 'title' => array( 'default' => '', 'name' => __('Title attribute', 'shortcodes-ultimate'), 'desc' => __('Here you can add value for the title attribute', 'shortcodes-ultimate'), ), 'id' => array( 'default' => '', 'name' => __('Button ID', 'shortcodes-ultimate'), 'desc' => __('Custom value for the ID attribute', 'shortcodes-ultimate'), ), 'class' => array( 'type' => 'extra_css_class', 'name' => __('Extra CSS class', 'shortcodes-ultimate'), 'desc' => __('Additional CSS class name(s) separated by space(s)', 'shortcodes-ultimate'), 'default' => '', ), ), 'content' => __('Button text', 'shortcodes-ultimate'), 'desc' => __('Styled button', 'shortcodes-ultimate'), 'example' => 'buttons', 'icon' => 'heart', ) ); function su_shortcode_button($atts = null, $content = null) { $atts = shortcode_atts( array( 'url' => get_option('home'), 'link' => null, // 3.x 'target' => 'self', 'style' => 'default', 'background' => '#2D89EF', 'color' => '#FFFFFF', 'dark' => null, // 3.x 'size' => 3, 'wide' => 'no', 'center' => 'no', 'radius' => 'auto', 'icon' => false, 'icon_color' => '#FFFFFF', 'ts_color' => null, // Dep. 4.3.2 'ts_pos' => null, // Dep. 4.3.2 'text_shadow' => 'none', 'desc' => '', 'download' => '', 'onclick' => '', 'rel' => '', 'title' => '', 'id' => '', 'class' => '', ), $atts, 'button' ); $atts['target'] = sanitize_key($atts['target']); $atts['style'] = sanitize_key($atts['style']); $atts['background'] = su_sanitize_css_color($atts['background']); $atts['color'] = su_sanitize_css_color($atts['color']); $atts['size'] = intval($atts['size']); $atts['wide'] = sanitize_key($atts['wide']); $atts['center'] = sanitize_key($atts['center']); $atts['radius'] = sanitize_key($atts['radius']); $atts['icon_color'] = su_sanitize_css_color($atts['icon_color']); $atts['text_shadow'] = preg_replace('/[^a-z\d\#\(\)\.\-\,% ]+/i', '', $atts['text_shadow']); if ($atts['link'] !== null) { $atts['url'] = $atts['link']; } if ($atts['dark'] !== null) { $atts['background'] = $atts['color']; $atts['color'] = ($atts['dark']) ? '#000' : '#fff'; } // 3.x if (is_numeric($atts['style'])) { $atts['style'] = str_replace(array('1', '2', '3', '4', '5'), array('default', 'glass', 'bubbles', 'noise', 'stroked'), $atts['style']); } $a_css = array(); $span_css = array(); $img_css = array(); $small_css = array(); $before = ''; $after = ''; $shadows = array( 'none' => '0 0', 'top' => '0 -1px', 'right' => '1px 0', 'bottom' => '0 1px', 'left' => '-1px 0', 'top-right' => '1px -1px', 'top-left' => '-1px -1px', 'bottom-right' => '1px 1px', 'bottom-left' => '-1px 1px', ); $styles = array( 'size' => round(($atts['size'] + 7) * 1.3), 'ts_color' => $atts['ts_color'] === 'light' ? su_adjust_lightness($atts['background'], 50) : su_adjust_lightness($atts['background'], -40), 'ts_pos' => $atts['ts_pos'] !== null && isset($shadows[$atts['ts_pos']]) ? $shadows[$atts['ts_pos']] : $shadows['none'], ); $radius = '0px'; if ($atts['radius'] === 'auto') { // phpcs:ignore $radius = round($atts['size'] + 2) . 'px'; } if ($atts['radius'] == 'round') { $radius = round((($atts['size'] * 2) + 2) * 2 + $styles['size']) . 'px'; } if (is_numeric($atts['radius'])) { $radius = intval($atts['radius']) . 'px'; } $a_rules = array( 'color' => $atts['color'], 'background-color' => $atts['background'], 'border-color' => su_adjust_lightness($atts['background'], -20), 'border-radius' => $radius, ); $span_rules = array( 'color' => $atts['color'], 'padding' => $atts['icon'] ? round(($atts['size']) / 2 + 4) . 'px ' . round($atts['size'] * 2 + 10) . 'px' : '0px ' . round($atts['size'] * 2 + 10) . 'px', 'font-size' => $styles['size'] . 'px', 'line-height' => $atts['icon'] ? round($styles['size'] * 1.5) . 'px' : round($styles['size'] * 2) . 'px', 'border-color' => su_adjust_lightness($atts['background'], 30), 'border-radius' => $radius, 'text-shadow' => $styles['ts_pos'] . ' 1px ' . $styles['ts_color'], ); if ($atts['ts_color'] === null && $atts['ts_pos'] === null) { $span_rules['text-shadow'] = $atts['text_shadow']; } // CSS rules for tag $img_rules = array( 'width' => round($styles['size'] * 1.5) . 'px', 'height' => round($styles['size'] * 1.5) . 'px', ); // CSS rules for tag $small_rules = array( 'padding-bottom' => round(($atts['size']) / 2 + 4) . 'px', 'color' => $atts['color'], ); // Create style attr value for tag foreach ($a_rules as $a_rule => $a_value) { $a_css[] = $a_rule . ':' . str_replace(';', '', $a_value); } // Create style attr value for tag foreach ($span_rules as $span_rule => $span_value) { $span_css[] = $span_rule . ':' . str_replace(';', '', $span_value); } // Create style attr value for tag foreach ($img_rules as $img_rule => $img_value) { $img_css[] = $img_rule . ':' . str_replace(';', '', $img_value); } // Create style attr value for tag foreach ($small_rules as $small_rule => $small_value) { $small_css[] = $small_rule . ':' . $small_value; } $classes = array('su-button', 'su-button-style-' . $atts['style']); if ($atts['class']) { $classes[] = $atts['class']; } if ($atts['wide'] === 'yes') { $classes[] = 'su-button-wide'; } $icon = ''; if ($atts['icon'] && strpos($atts['icon'], 'icon:') !== false) { $icon = ''; su_query_asset('css', 'su-icons'); } if ($atts['icon'] && strpos($atts['icon'], '/') !== false) { $icon = '' . esc_attr($content) . ''; } // Prepare with description $desc = $atts['desc'] ? '' . su_do_attribute($atts['desc'], true) . '' : ''; // Wrap with div if button centered if ($atts['center'] === 'yes') { $before .= '
'; $after .= '
'; } // Replace icon marker in content, // add float-icon class to rearrange margins if (strpos($content, '%icon%') !== false) { $content = str_replace('%icon%', $icon, $content); $classes[] = 'su-button-float-icon'; } // Button text has no icon marker, append icon to begin of the text else { $content = $icon . ' ' . $content; } // Prepare onclick action if ($atts['onclick'] && !su_is_unsafe_features_enabled()) { return su_error_message( 'Button', sprintf( '%s.
%s', // translators: do not translate the onclick part, the Unsafe features must be translated __('The onclick attribute cannot be used while Unsafe features option is turned off', 'shortcodes-ultimate'), __('Learn more', 'shortcodes-ultimate') ) ); } if ($atts['onclick']) { $atts['onclick'] = ' onClick="' . esc_attr($atts['onclick']) . '"'; } if ('blank' === $atts['target'] && '' === $atts['rel']) { $atts['rel'] = 'noopener noreferrer'; } $atts['download'] = $atts['download'] ? ' download="' . esc_attr($atts['download']) . '"' : ''; $atts['rel'] = $atts['rel'] ? ' rel="' . esc_attr($atts['rel']) . '"' : ''; $atts['title'] = $atts['title'] ? ' title="' . su_do_attribute($atts['title']) . '"' : ''; $atts['id'] = !empty($atts['id']) ? ' id="' . esc_attr($atts['id']) . '"' : ''; su_query_asset('css', 'su-shortcodes'); return $before . '' . do_shortcode(stripcslashes($content)) . $desc . '' . $after; }