Add "Add Post Element" to media buttons

inc/class-shortcode-ui.php

@@ -67,6 +67,7 @@ private function __construct() {
 	private function setup_actions() {
 		add_action( 'admin_enqueue_scripts',     array( $this, 'action_admin_enqueue_scripts' ) );
 		add_action( 'wp_enqueue_editor',         array( $this, 'action_wp_enqueue_editor' ) );
+		add_action( 'media_buttons',             array( $this, 'action_media_buttons' ) );
 		add_action( 'wp_ajax_bulk_do_shortcode', array( $this, 'handle_ajax_bulk_do_shortcode' ) );
 		add_filter( 'wp_editor_settings',        array( $this, 'filter_wp_editor_settings' ), 10, 2 );
 	}
@@ -276,6 +277,18 @@ public function action_wp_enqueue_editor() {
 		do_action( 'shortcode_ui_loaded_editor' );
 	}
 
+	/**
+	 * Output an "Add Post Element" button with the media buttons.
+	 */
+	public function action_media_buttons( $editor_id ) {
+		printf( '<button type="button" class="button shortcake-add-post-element" data-editor="%s">' .
+			'<span class="wp-media-buttons-icon dashicons dashicons-migrate"></span> %s' .
+			'</button>',
+			esc_attr( $editor_id ),
+			esc_html__( 'Add Post Element', 'shortcode-ui' )
+		);
+	}
+
 	/**
 	 * Output required underscore.js templates in the footer
 	 */

js/build/shortcode-ui.js

@@ -279,6 +279,27 @@ $(document).ready(function(){
 		}
 	} );
 
+	$(document.body).on( 'click', '.shortcake-add-post-element', function( event ) {
+		var elem = $( event.currentTarget ),
+			editor = elem.data('editor'),
+			options = {
+				frame: 'post',
+				state: 'shortcode-ui',
+				title: shortcodeUIData.strings.media_frame_title
+			};
+
+		event.preventDefault();
+
+		// Remove focus from the `.shortcake-add-post-element` button.
+		// Prevents Opera from showing the outline of the button above the modal.
+		//
+		// See: https://core.trac.wordpress.org/ticket/22445
+		elem.blur();
+
+		wp.media.editor.remove( editor );
+		wp.media.editor.open( editor, options );
+	} );
+
 });
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})

js/src/shortcode-ui.js

@@ -22,4 +22,25 @@ $(document).ready(function(){
 		}
 	} );
 
+	$(document.body).on( 'click', '.shortcake-add-post-element', function( event ) {
+		var elem = $( event.currentTarget ),
+			editor = elem.data('editor'),
+			options = {
+				frame: 'post',
+				state: 'shortcode-ui',
+				title: shortcodeUIData.strings.media_frame_title
+			};
+
+		event.preventDefault();
+
+		// Remove focus from the `.shortcake-add-post-element` button.
+		// Prevents Opera from showing the outline of the button above the modal.
+		//
+		// See: https://core.trac.wordpress.org/ticket/22445
+		elem.blur();
+
+		wp.media.editor.remove( editor );
+		wp.media.editor.open( editor, options );
+	} );
+
 });