Feature request: Ability to have a custom button that opens a specified shortcode directly.

[nextgenthemes]

It currently takes 3 click to create a shortcode. Add Media -> insert Post item -> Pick shortcode out of a possible bunch of shortcodes.

Maybe I already can do this somehow?

[danielbachhuber]

With #551, it will be two steps. You could use code similar to that on the pull request to open your shortcode directly.

Related #281 #94

[goldenapples]

For a little more context, passing a shortcode as currentShortcode into the media.editor.open() call will open the specific shortcode UI you want.

For example, to open the UI for a "pullquote" shortcode on clicking Ctrl-P:

jQuery(window).on( 'keyup', function(e) {  
  if ( e.ctrlKey && 'p' === e.key ) {
    wp.media.editor.open( 'content', {
      frame: 'post',
      state: 'shortcode-ui',
      currentShortcode: sui.shortcodes.findWhere( { shortcode_tag: 'pullquote' } ).clone(),
      title: shortcodeUIData.strings.media_frame_title
    });
  }
});

[nextgenthemes]

@goldenapples Thanks so much! This is exactly what I was looking for!

[nextgenthemes]

@goldenapples Thanks again for the snippet but I have a problem with my code thats is based on that code.

When I click the button the shortcode dialog is showing without the sidebar and then it locks that state. So when I close the dialog I no longer can access the normal media dialog.

This also happens the other way arround, when I first open the normal media dialog, my own button is showing the normal dialog.

This is my botton I include right after the wordpress media button:
<button id="arve-btn" title="Advanced Responsive Video Embedder Shortcode Creator" data-arve-mode="lazyload" class="arve-btn button add_media" type="button"><span class="wp-media-buttons-icon arve-icon"></span> Embed Video</button>

And this is the code I use

(function ( $ ) {
    'use strict';

    $(window).on( 'keyup', function(e) {
        if ( e.ctrlKey && 'p' === e.key ) {
            open_arve_dialog();
        }
    } );

    $( '#arve-btn' ).on( 'click', function(e) {
        e.preventDefault();
        open_arve_dialog();
    } );

    function open_arve_dialog() {
        wp.media.editor.open( 'content', {
          frame: 'post',
          state: 'shortcode-ui',
          currentShortcode: sui.shortcodes.findWhere( { shortcode_tag: 'arve' } ).clone(),
          title: shortcodeUIData.strings.media_frame_title
        });
    }

}(jQuery));

[goldenapples]

Ah, I gave you a bad code snippet - sorry about that!

This should work for your opener function with the latest Shortcake version:

function open_arve_dialog() {
    var arveShortcode = sui.utils.shortcodeViewConstructor.parseShortcodeString( '[arve]' )
    wp.media({
        frame : "post",
        state : 'shortcode-ui',
        currentShortcode : arveShortcode
    }).open();
}

[nextgenthemes]

@goldenapples Thanks, almost there. With this the dialog is only reopening after two clicks on the button after closing.

[goldenapples]

@nextgenthemes are you on the latest commit in master branch? This sounds like the same regex parser bug we just fixed in #560.

[nextgenthemes]

@goldenapples No I was not.

wp.org version:
folder name: shortcode-ui 4 weeks outdated.
github version, no support for github updater. folder name shortcake (when simply cloning this repo). Not a very present way to have ppl run the latest code.

I never used composer but I guess I would need to manually run a command to update or have some cronjob for that. So I guess i will manually update with git since I am more familiar with that.