TinyMCE button / Quicktag rather than Add Media

[bobbingwide]

It's probably no big thing but it's not immediately obvious that Add Media would be used to create a shortcode. It would be nice to be able to support display of the "Insert Post Content" dialog through a toolbar button.

In my oik plugin I defined a TinyMCE button in the Visual editor and a Quicktag for the Text editor. Both buttons are optional; the UI is not enforced.

I imagine this is related to #115 and #94

BTW. While investigating a "good reason" for doing this I created a custom post type that doesn't support thumbnail. I noticed two problems when shortcake was activated.

• The Add Media button appeared but didn't do anything
• The were no quicktag buttons on the Text editor.

[mattheu]

We originally had a separate button, and decided to role it all into the single button. I'm certainly open to UX feedback on this though. However I think we should be consistent - pick one and go with it.

If we stick with the current - It should definitely try to handle your situation.

[bfintal]

I agree that this should be inside a TinyMCE button instead though, since strictly speaking, a post element isn't media. The "Insert Post Element" integrates great with the media manager, so it should be kept that way. When the TinyMCE button is clicked though it should open the media manager with the "Insert Post Element" pre-selected.

[chrisvanpatten]

I agree and think a TinyMCE button makes more sense, or at least as its own button next to Add Media. Whether the Insert Post Element tab gets broken out into its own modal or not is beyond the scope of my opinions though :)

[bfintal]

or at least as its own button next to Add Media

+1

[ghost]

This snippet will add a button next to Add media, clicking the button will open the default WP Media dialogue on the Add Post Element tab.

/**
 * Add Post Element button.
 */

function alpha_add_post_element_button_markup() {
  echo '<a href="#" class="button shortcake-add-shortcode"><span class="wp-media-buttons-icon dashicons dashicons-migrate"></span> ' . __( 'Add Post Element', 'alpha' ) . '</a>';
}
add_action( 'media_buttons', 'alpha_add_post_element_button_markup', 100 );

// Action on button click

add_action( 'wp_enqueue_media', 'alpha_add_post_element_button_action' );

function alpha_add_post_element_button_action(){
  add_action( 'admin_print_footer_scripts', 'alpha_add_post_element_button_scripts', 999);
}

function alpha_add_post_element_button_scripts(){ ?>

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('body').on('click', '.shortcake-add-shortcode', function() {
    $(this).siblings('[id="insert-media-button"]').click();
    $('.media-menu .media-menu-item:contains("' + shortcodeUIData.strings.media_frame_menu_insert_label + '")').click();
    return false;
  });
});
</script>

<?php

}

[jbjanot]

or at least as its own button next to Add Media

+1 for me too

[Vaince]

or at least as its own button next to Add Media

+1 for me too

And I improved @ninetienne snippet in order to show media panel when you click on the add media button (after a click and close on add post element button)

/**
 * Add Post Element button.
 */

function alpha_add_post_element_button_markup() {
    echo '<a href="#" class="button shortcake-add-shortcode"><span class="wp-media-buttons-icon dashicons dashicons-migrate"></span> ' . __( 'Add Post Element', 'alpha' ) . '</a>';
}
add_action( 'media_buttons', 'alpha_add_post_element_button_markup', 100 );

// Action on button click

add_action( 'wp_enqueue_media', 'alpha_add_post_element_button_action' );

function alpha_add_post_element_button_action(){
    add_action( 'admin_print_footer_scripts', 'alpha_add_post_element_button_scripts', 999);
}

function alpha_add_post_element_button_scripts(){ ?>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('body').on('click', '.wp-editor-wrap .shortcake-add-shortcode', function() {
                $(this).siblings('[id="insert-media-button"]').click();
                $('.media-menu .media-menu-item:contains("' + shortcodeUIData.strings.media_frame_menu_insert_label + '")').click();
                return false;
            });
            $('body').on('click', '.wp-editor-wrap .insert-media', function() {
                $('.media-menu .media-menu-item:first').click();
                return false;
            });
        });
    </script>

    <?php
}

[khromov]

:+1:

[goldenapples]

You should be able to open the correct frame of the media modal by passing the state of the media modal you want to target into wp.media.editor.open(). That way you don't have to resort to that somewhat-fragile click triggering on the first media menu item.

We did the same thing in Shortcake Bakery here.