Rewrite - Standalone frame

.travis.yml

@@ -22,7 +22,7 @@ cache:
 
 before_script:
   - |
-    if [[ "$WP_TRAVISCI" == "travis:phpunit" ]] ; then
+    if [[ "$WP_TRAVISCI" == "travis:phpunit" ]] || [[ "$WP_TRAVISCI" == "travis:js-tests" ]]; then
       bash bin/install-wp-tests.sh wordpress_test root '' localhost $WP_VERSION
     fi
   - |

Gruntfile.js

@@ -2,7 +2,20 @@ module.exports = function( grunt ) {
 
 	'use strict';
 	var remapify = require('remapify');
-	var banner = '/**\n * <%= pkg.homepage %>\n * Copyright (c) <%= grunt.template.today("yyyy") %>\n * This file is generated automatically. Do not edit.\n */\n';
+	var banner   = '/**\n * <%= pkg.homepage %>\n * Copyright (c) <%= grunt.template.today("yyyy") %>\n * This file is generated automatically. Do not edit.\n */\n';
+
+	// Path to WordPress install. Either absoloute or relative to this plugin.
+	// Change this by passing --abspath="new/path" as a grunt option.
+	var abspath;
+
+	if ( grunt.option( "abspath" ) ) {
+		abspath = grunt.option( "abspath" );
+	} else if ( 'WP_DEVELOP_DIR' in process.env ) {
+		abspath = process.env.WP_DEVELOP_DIR;
+	} else {
+		abspath = '/tmp/wordpress';
+	}
+
 	// Project configuration
 	grunt.initConfig( {
 
@@ -135,12 +148,14 @@ module.exports = function( grunt ) {
 					specs: 'js-tests/build/specs.js',
 					helpers: 'js-tests/build/helpers.js',
 					vendor: [
-						'js-tests/vendor/jquery.js',
-						'js-tests/vendor/underscore.js',
-						'js-tests/vendor/backbone.js',
-						'js-tests/vendor/wp-shortcode.js',
-						'js-tests/vendor/wp-util.js',
-						'js-tests/vendor/wp-editors.js',
+						abspath + '/wp-includes/js/jquery/jquery.js',
+						abspath + '/wp-includes/js/underscore.min.js',
+						abspath + '/wp-includes/js/backbone.min.js',
+						abspath + '/wp-includes/js/wp-util.js',
+						abspath + '/wp-includes/js/shortcode.js',
+						abspath + '/wp-admin/js/editor.js',
+						abspath + '/wp-includes/js/media-models.js',
+						abspath + '/wp-includes/js/media-views.js',
 						'js-tests/vendor/mock-ajax.js',
 					],
 				}
@@ -196,7 +211,7 @@ module.exports = function( grunt ) {
 	grunt.loadNpmTasks( 'grunt-contrib-jasmine' );
 	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
 
-	grunt.registerTask( 'scripts', [ 'browserify', 'jasmine', 'jshint' ] );
+	grunt.registerTask( 'scripts', [ 'browserify', 'jshint' ] );
 	grunt.registerTask( 'styles', [ 'sass', 'postcss' ] );
 	grunt.registerTask( 'default', [ 'scripts', 'styles' ] );
 	grunt.registerTask( 'i18n', ['addtextdomain', 'makepot'] );

css/sass/shortcode-ui.scss

@@ -16,60 +16,85 @@
 
 }
 
-.add-shortcode-list {
-	padding: 0 10px;
-
-	.shortcode-list-item {
-		margin: 10px;
-		float: left;
-		-webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
-		box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
-		background: #eee;
-		cursor: pointer;
-		position: relative;
-		text-align: center;
-		width: 150px;
-		height: 150px;
+.button-shortcode-ui-insert span {
+	display: inline-block;
+	width: 18px;
+	height: 18px;
+	vertical-align: text-top;
+	margin: -2px 7px 0 -3px;
+	left: -2px;
+	color: #82878c;
+}
+
+.insert-shortcode-list {
+
+	.add-shortcode-list {
+		padding: 0 10px;
 
-		.add-shortcode-list-item-icon {
+		.shortcode-list-item {
+			margin: 10px;
+			float: left;
+			-webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+			box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+			background: #eee;
+			cursor: pointer;
 			position: relative;
-			height: 120px;
-			font-size: 64px;
+			text-align: center;
+			width: 150px;
+			height: 150px;
+
+			.add-shortcode-list-item-icon {
+				position: relative;
+				height: 120px;
+				font-size: 64px;
+
+				.dashicons,
+				img {
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					font-size: inherit;
+					line-height: inherit;
+					width: auto;
+					height: auto;
+					max-width: 80%;
+					max-height: 80%;
+				}
 
-			.dashicons,
-			img {
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				font-size: inherit;
-				line-height: inherit;
-				width: auto;
-				height: auto;
-				max-width: 80%;
-				max-height: 80%;
 			}
 
+			.add-shortcode-list-item-title {
+				box-sizing: border-box;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				margin: 0;
+				line-height: 1.2;
+				padding: 8px;
+				overflow: hidden;
+				max-height: 100%;
+				word-wrap: break-word;
+				text-align: center;
+				font-weight: bold;
+				background: rgba( 255, 255, 255, 0.8 );
+				-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
+				box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
+			}
 		}
+	}
 
-		.add-shortcode-list-item-title {
-			box-sizing: border-box;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			margin: 0;
-			line-height: 1.2;
-			padding: 8px;
-			overflow: hidden;
-			max-height: 100%;
-			word-wrap: break-word;
-			text-align: center;
-			font-weight: bold;
-			background: rgba( 255, 255, 255, 0.8 );
-			-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
-			box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
-		}
+	&.has-search {
+		padding-top: 25px;
+	}
+
+	.search {
+		position: absolute;
+		top: 0px;
+		right: 10px;
+		width: 100%;
+		max-width: 300px;
 	}
 
 }

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 );
 	}
@@ -273,10 +274,23 @@ 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
 	 */
 	public function action_admin_print_footer_scripts() {
+
 		echo $this->get_view( 'media-frame' ); // WPCS: xss ok
 		echo $this->get_view( 'list-item' ); // WPCS: xss ok
 		echo $this->get_view( 'edit-form' ); // WPCS: xss ok

inc/templates/edit-form.tpl.php

@@ -1,7 +1,6 @@
 <script type="text/html" id="tmpl-shortcode-default-edit-form">
 	<form class="edit-shortcode-form">
 		<p><a href="#" class="edit-shortcode-form-cancel">&#8592; <?php esc_html_e( 'Back to list', 'shortcode-ui' ); ?></a></p>
-
 		<div class="edit-shortcode-form-fields shortcode-ui-edit-{{ data.model.attributes.shortcode_tag }}"></div>
 	</form>
 </script>