One-click paths to adding a shortcode

[danielbachhuber]

There are some places in core where it might make sense to clone existing UI and add a one-click path to adding a shortcode:

• "Add Media" button
• TinyMCE editor buttons
• Links in the left rail of the media modal

Related https://github.com/fusioneng/Shortcake/issues/92#issuecomment-67864002

[MickeyKay]

Here's a quick go at adding button insertion - the code is pasted at the very bottom. It does work, but has the following drawbacks:

• Doesn't utilize existing backbone.js (a bit over my head) - would be good to rework the jQuery parts to utilize backbone
• Just inserts blank shortcode - doesn't trigger initial popup to populate the shortcode attributes

Code

add_action( 'media_buttons_context', 'shortcode_ui_add_editor_buttons' );
/**
 * Add shortcode insertion buttons to the editor.
 *
 * @since   0.2.0
 *
 * @param   string  $html  Editor buttons HTML.
 *
 * @return  string  $html  Updated buttons HTML.
 */
function shortcode_ui_add_editor_buttons( $html ) {

    // Get all registered UI shortcodes
    $ui_shortcodes = Shortcode_UI::get_instance()->get_shortcodes();

    // Initialize empty jQuery string       
    $script = '';

    // Add button and jQuery for each UI shortcode with add_button attribute
    foreach ( $ui_shortcodes as $shortcode => $atts ) {

        // Skip if add_button attribute isn't set
        if ( ! $atts['add_button'] ) {
            continue;
        }

        // Compile button HTML
        ob_start(); 
        ?>
        <a href="#" id="insert-<?php echo $shortcode; ?>-button" class="button insert-<?php echo $shortcode; ?> add_<?php echo $shortcode; ?>" data-editor="content" title="Add <?php echo $atts['label']; ?>"><span class="dashicons wp-media-buttons-icon <?php echo $atts['listItemImage']; ?>"></span> Add <?php echo $atts['label']; ?></a>
        <?php 
        $html .= ob_get_clean();

        /**
         * Compile button JS
         *
         * @todo This should likely be reworked to incorporate existing backbone.js functionality.
         */
        $att_markup = array();
        $has_content_att = false;

        foreach( $atts['attrs'] as $att_array ) {
            $att_markup[] = $att_array['attr'] . '=""';

            // Flag if shortcode has a content attribute (e.g. single shortcode [button] vs [button][/button])
            if ( 'content' == $att_array['attr'] ) {
                $has_content_att = true;
            }

        }

        // Compose button jQuery
        ob_start(); 
        ?>
        jQuery('#insert-<?php echo $shortcode; ?>-button').on('click', function() {
            window.parent.send_to_editor('[<?php echo $shortcode; ?> <?php echo implode( ' ', $att_markup ); ?>]<?php echo $has_content_att ? '[/' . $shortcode . ']' : ''; ?>');
        });
        <?php 

        // Wrap individual button scripts up together
        $script .= '<script>' . ob_get_clean() . '</script>';
    }

    $html .= $script;

    return $html;

}

[DevinWalker]

Would love to see this as an option as well +1

[cliffordp]

Thanks for the head start, @MickeyKay!

I cleaned it up a bit and added some new functionality here: https://gist.github.com/cliffordp/90235d62ce8df52caa34

• bail if Shortcake isn't installed and active
• if add_button does not exist, empty() won't throw an "undefined index" warning
• support for inner_content top-level attribute instead of content argument per attribute (current version of Shortcake)
• DRY code that's easier to read (I personally prefer sprintf to opening and closing php tags)
• new feature: 'add_button' => 'icon_only' displays only an icon to keep things narrower -- but still displays full text (e.g. Insert MDL Badge) on hover
• hooked into media_buttons because media_buttons_context is deprecated

Here's a preview of all but one as 'icon_only' and the last one's hover.

[MickeyKay]

Sweet! This is looking cool. Not sure if/how it will fit into the backbone paradigm that seems to be gaining in popularity. Any insights/feedback from the main devs?