WordPress button shortcode builder

shortcode-button.js

(function() {

	tinymce.PluginManager.add('button', function( editor, url ) {

		// Add button to the editor
		editor.addButton('button', {
			icon: 'link',
			text: 'Button',
			tooltip: 'Insert button',
			onclick: function() {

				// Dialogue box to build our button
				editor.windowManager.open({
					title: 'Add button',
					body: [
						{
							type: 'textbox',
							name: 'url',
							label: 'URL',
							value: '',
							tooltip: 'Enter the URL to link to',
						},
						{
							type: 'textbox',
							name: 'label',
							label: 'Button label',
							value: '',
							tooltip: 'Enter the text to place in the button',
						},
						{
							type: 'checkbox',
							text: 'Always round sides, regardless of size',
							name: 'rounded',
							tooltip: '',
						},
						{
							type: 'checkbox',
							text: 'Full-width of container',
							name: 'fullwidth',
							tooltip: '',
						},
						{
							type: 'listbox',
							name: 'color',
							label: 'Color',
							'values': [
								{text: 'Primary', value: 'primary'},
								{text: 'Secondary', value: 'secondary'},
								{text: 'Success', value: 'success'},
								{text: 'Warning', value: 'warning'},
								{text: 'Danger', value: 'danger'},
								{text: 'Info', value: 'info'},
								{text: 'Light', value: 'light'},
								{text: 'Dark', value: 'dark'},
								{text: 'Accent', value: 'accent'},
								{text: 'Dark accent', value: 'btn-dark-accent'},
							],
							tooltip: 'Theme colour to use for your button'
						},
						{
							type: 'listbox',
							name: 'size',
							label: 'Size',
							'values': [
								{text: 'Default', value: ''},
								{text: 'Medium', value: 'md'},
								{text: 'Large', value: 'lg'},
							],
							tooltip: '',
						},
					],
					onsubmit: function(e) {

						// Get URL

						// Get classes
						var color = e.data.color;
						var size = e.data.size;
						var rounded = e.data.rounded;
						var fullwidth = e.data.fullwidth;

						console.log(e.data);

						// Open shortcode and add attributes
						var shortcode_str = '';
						shortcode_str += '[button url=' + '"' + e.data.url + '"';
						shortcode_str += ' color=' + '"' + color + '"';
						if(size != '') { // default size outputs nothing, so we don't want to add a size class unless a specific size such as md or lg is set
							shortcode_str += ' size=' + '"' + size + '"';
						}
						shortcode_str += ' round=' + '"' + rounded + '"';
						shortcode_str += ' fullwidth=' + '"' + fullwidth + '"';
						shortcode_str += ']';

						// Add button label
						shortcode_str +=  e.data.label;

						// Close shortcode
						shortcode_str += '[/button]';

						// Insert shortcode into the content
						editor.insertContent( shortcode_str);
					}
				});

			}

		});

	});
})();

shortcode-button.php

<?php
/**
 * Register button shortcode
 * @param $atts
 * @param null $content
 *
 * @return string
 */
function doublee_button_shortcode( $atts , $content = null ) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'url'       => '',
			'color'     => 'primary',
			'size'      => '',
			'round'     => '',
			'fullwidth' => '',
		),
		$atts
	);

	// Build array of classes
	$classes = array();
	array_push($classes, 'button ' . $atts['color']); // Color has a default set above so we don't need to check for it.
	if($atts['size']) {
		array_push($classes, $atts['size']);
	}
	if($atts['round'] == 'true') {
		array_push($classes, 'round');
	}
	if($atts['fullwidth'] == 'true') {
		array_push($classes, 'fullwidth');
	}

	// Convert to string
	$classes = implode(' ', $classes);

	// Return the HTML
	return '<a href="' . $atts['url'] . '" class="btn ' . $classes . '">' . $content . '</a>';

}
add_shortcode( 'button', 'doublee_button_shortcode' );


/**
 * Add TinyMCE button for button shortcode builder
 * Note: Styling additions in inc/admin/admin.php along with other admin styles
 * This just adds it to the button array, actual button is created by JS - see below
 *
 * @param  array $buttons
 * @return array
 */
function doublee_mce_button_button($buttons) {
	array_splice($buttons, 10, 0, 'button');
	return $buttons;
}
add_filter('mce_buttons', 'doublee_mce_button_button');


/**
 * Load JavaScript file to handle the button
 * @param  array $plugin_array
 * @return array
 */
function doublee_mce_button_plugin($plugin_array) {
	$plugin_array['button'] = get_stylesheet_directory_uri() . '/functions/admin/shortcode-button.js';
	return $plugin_array;
}
add_filter('mce_external_plugins', 'doublee_mce_button_plugin');