Custom View is showing up, but not the Add Media view...

[whyisjake]

add_action( 'init', array( $this, 'register_shortcode_ui' ) );

/**
 * Register the Shortcode UI
 *
 *
 * @return void
 */
function register_shortcode_ui() {
    shortcode_ui_register_for_shortcode(
        'pullquote',
        array(
            'label' => 'Pullquote',
            'listItemImage' => 'dashicons-editor-quote',
            'attrs' => array(
                array(
                    'label' => 'Quote',
                    'attr'  => 'quote',
                    'type'  => 'textarea',
                ),
                array(
                    'label' => 'Attribution',
                    'attr'  => 'attribution',
                    'type'  => 'text',
                ),
                array(
                    'label' => 'Classes',
                    'attr'  => 'classes',
                    'type'  => 'text',
                ),
            ),
        )
    );
}

Using this code, but no workie..

[danielbachhuber]

@whyisjake Is this in a stock install of WordPress, or Wired's instance? If the latter, could you have some conflicting media library code?

[mattheu]

Just got round to looking into this. I've not encountered the issue.

I just tested this code locally and all was working fine. I tested Shortcake v0.2.1 and WP 4.1.1. Also Shortcake master and WP trunk.

Would be happy to help further. I wonder if you (or a plugin) is doing anything to modify wp.media.view.MediaFrame.Post

[whyisjake]

Yeah, turns out we had some code that hijacked things. Working now.

Cheers.

[whyisjake]

This is the offending code. I'm not really very familiar with Backbone, but something here is stomping out the links that are created from the shortcode ui.

// Add custom gallery edit buttons on post edit/new pages
if ( ( $( '.post-new-php' ).length || $( '.post-php' ).length ) && wp && wp.media && wp.media.editor ) {
    // Second argument is modified default object as extracted from Wordpress media loader add function
    var frame = wp.media.editor.add('content');

    frame.on( 'open', function() {
        // Overwrite this so the modal reflects everything currently in the textarea independent of whether it's been written to the DB
        var content = document.getElementById('content'),
            workflow = wp.media.editor.get(),
            options  = workflow.options;

        $.each( shortcodeLoop( 'gallery', content.textContent ), function( index, value ) {
            var num = index + 1,
                editString = 'Edit Gallery ' + num,
                jQ = $('a.media-menu-item:contains(' + editString + ')' );

            if ( !jQ.length ) {
                // add to sidebar
                editLink = new wp.media.view.RouterItem( _.extend( options, {
                    text: editString
                } ) );
                workflow.menu.view.views.set( '.media-menu', editLink, _.extend( options, {
                    add: true
                } ) );

                $('a.media-menu-item:contains(' + editString + ')' ).on( 'click', function( e ) {
                    e.preventDefault();
                    // save off the shortcode
                    var scSave = value.content,
                    // spawn gallery edit screen, pass in shortcode
                        subview = wp.media.gallery.edit(scSave);

                    subview.state('gallery-edit').on( 'update', function( selection ) {
                        // pass it up the chain
                        var sc = wp.media.gallery.shortcode( selection ).string(),
                        // get janky with it
                            curr = $('#content').html(),
                            newContent = curr.replace( scSave, sc );

                        $('#content').html( newContent );
                        frame.close();
                    });
                });
            }
        });  // end shortcode gallery loop
    });
}

[mattheu]

Thanks Jake - I was able to replicate the issue using the code you provided. The way we're integrating with the media modal can definitely be improved. I'll dig into this a bit further.

[whyisjake]

Thanks @mattheu.

[BenChirlinn]

I've narrowed down the issue to this line in our custom media uploader code var frame = wp.media.editor.add('content');. My guess is it's stomping out your custom uploader with a new basic one from the default template in the page. Is there an easy way for our code to fetch out your custom frame object and add our custom router items to it?

[danielbachhuber]

Punting to next milestone.

[danielbachhuber]

@whyisjake @BenChirlin We discussed this some on today's chat. https://wordpress.slack.com/archives/feature-shortcode/p1433792288000127

How did you end up with the code approach you did?

[BenChirlinn]

@danielbachhuber it's old code from a former team member. The uploader is so poorly documented I believe this was just the way he managed to get it to work. I tried tweaking it and couldn't get it to work any other way. Not my area of expertise...