{WP} WPBakery element-shortcode

wp_bakery_element_shortcode.php

<?php
//Example how to create WPBaker builder element, which works like shortcodes. 
//There is parent holder Buttons, where you can insert as many Button (only our button) as you want. 
//Include code or file into functions.php or elsewhere.

// source : https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524362

if(!function_exists('ef_buttons')){
	function ef_buttons( $atts, $content = null ) {
		extract(shortcode_atts(array(
			'buttons_alignment' => "Between",
		), $atts));

		$buttons_alignment = str_replace("Space ", '', $buttons_alignment);
		return '<div class="ef-buttons d-flex flex-wrap justify-content-'.strtolower($buttons_alignment).'">'.do_shortcode($content).'</div>';
	}
	add_shortcode('ef_buttons', 'ef_buttons');
}

if(!function_exists('ef_single_button')) {
	function ef_single_button( $atts, $content =  null) {
		extract(shortcode_atts(array(
			'title' => '',
			'title_span' => '',
			'url' => '',
			'button_style' => 'Outline',
			'bg_color' => '',
			'text_color' => ''
		), $atts));

		$url_link = vc_build_link($url);

		$bg_color = empty($bg_color) ? '' : 'background-color:' . $bg_color . '; ';
		$text_color = empty($text_color) ? '' : 'color:' . $text_color . '; ';

		$title_span = !empty($title_span) ? "<span>$title_span</span>" : '';

		$output = '<button class="ef-single-button '.$button_style.'" style="'.$bg_color . $text_color .'"><a href="'.trim($url_link['url']).'" target="'.trim($url_link['target']).'" title="'.$title.'">'.$title . $title_span .'</a></button>';

		return $output;
	}
	add_shortcode('ef_single_button', 'ef_single_button');
}
// Mapping
vc_map( array(
	"name" => __("EF Buttons", "ef"),
	"base" => "ef_buttons",
	"as_parent" => array('only' => 'ef_single_button'),
	"content_element" => true,
	"show_settings_on_create" => false,
	"is_container" => true,
	"js_view" => 'VcColumnView',
	"category" =>array('EF'),
	"params" => array (
		array(
			"type" => "dropdown",
			"value" => array (1 => "Start", 2 => "End", 3 => "Center", 4 => "Space Between", 5 => "Space Around"),
			"std" => 4,
			"heading" => __("Buttons block alignment", "ef"),
			"param_name" => "buttons_alignment",
			"description" => "Default: Space Between. Explain <a href='https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content' target='_blank'>here</a>."
		)
	)
) );

vc_map( array(
	"name" => __("EF button", "ef"),
	"base" => "ef_single_button",
	"content_element" => true,
	"as_child" => array('only' => 'ef_buttons'),
	"show_settings_on_create" => true,
	"params" => array(
		array(
			"type" => "textfield",
			"heading" => __("Title", "ef"),
			"param_name" => "title"
		),
		array(
			"type" => "textfield",
			"heading" => __("Title span text", "ef"),
			"param_name" => "title_span",
			"description" => __( "Extra text after title, text opacity 50%, example: (pdf)", "ef" )
		),
		array(
			'type' => 'vc_link',
			'heading' => __( 'Link', "ef" ),
			'param_name' => 'url',
		),
		array(
			"type" => "dropdown",
			"value" => array ("Outline", "Filled"),
			"heading" => __("Button style", "ef"),
			"param_name" => "button_style",
			"description" => __( "Default style: Outline (background transparent, with border)", 'ef' )
		),
		array(
			'type' => 'colorpicker',
			'heading' => __( 'Background color', "ef" ),
			'param_name' => 'bg_color',
			'value' => '',
			"description" => __( "Outline style: transparent, Filled: #003c64 or custom", 'ef' )
		),
		array(
			'type' => 'colorpicker',
			'heading' => __( 'Text color', "ef" ),
			'param_name' => 'text_color',
			'value' => '',
			"description" => __( "Outline style: #003C65, Filled: #fff or custom", 'ef' )
		)
	),
) );

if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
	class WPBakeryShortCode_Ef_Buttons extends WPBakeryShortCodesContainer {}
}
if ( class_exists( 'WPBakeryShortCode' ) ) {
	class WPBakeryShortCode_Ef_Single_Button extends WPBakeryShortCode {}
}

WPBakery Addon starter plugin: https://bitbucket.org/wpbakery/extend-wpbakery-page-builder-plugin-example/downloads/

WPBakery nested https://kb.wpbakery.com/docs/developers-how-tos/nested-shortcodes-container/

Shortcode generator: http://hasinhayder.github.io/VisualComposerShortcodeGenerator/