Add additional attributes to the do_shortcode ajax response for improved preview rendering

inc/class-shortcode-ui.php

@@ -291,6 +291,34 @@ private function compare_shortcodes_by_label( $a, $b ) {
 		return strcmp( $a['label'], $b['label'] );
 	}
 
+	/**
+	 * Return a classname string to apply to the MCE view wrapping a shortcode preview.
+	 *
+	 * @param string $shortcode
+	 * @param int $post_id
+	 */
+	private function render_shortcode_classes_for_preview( $shortcode, $post_id = null ) {
+		$class_names = array( 'wpview-wrap' );
+
+		if ( preg_match( '#' . get_shortcode_regex() . '#', $shortcode, $parsed_shortcode ) ) {
+			$shortcode_tag = $parsed_shortcode[2];
+			$class_names[] = "wpview-{$shortcode_tag}";
+
+			/**
+			 * Filter the class names applied to the wpview div in the MCE editor.
+			 *
+			 * Can be used to render specific shortcodes as displaying floated or inline.
+			 *
+			 * @param array $class_names Array of class names to be applied.
+			 * @param string $shortcode_tag The shortcode tag
+			 * @param array $parsed_shortcode The parsed attributes, as returned by shortcode regex.
+			 */
+			$class_names = apply_filters( 'shortcode_ui_shortcode_preview_classes', $class_names, $shortcode_tag, $parsed_shortcode );
+		}
+
+		return implode( ' ', $class_names );
+	}
+
 	/**
 	 * Render a shortcode body for preview.
 	 */
@@ -354,8 +382,9 @@ public function handle_ajax_bulk_do_shortcode() {
 				}
 
 				$responses[ $posted_query['counter'] ] = array(
-					'query' => $posted_query,
+					'query'    => $posted_query,
 					'response' => $this->render_shortcode_for_preview( $shortcode, $post_id ),
+					'classes'  => $this->render_shortcode_classes_for_preview( $shortcode, $post_id ),
 				);
 			}
 

js-tests/build/specs.js

@@ -634,6 +634,8 @@ var sui = require('./sui.js'),
  */
 var shortcodeViewConstructor = {
 
+	classes: 'wpview-wrap',
+
 	initialize: function( options ) {
 		var self = this;
 
@@ -647,11 +649,15 @@ var shortcodeViewConstructor = {
 			} else {
 				self.content = response;
 			}
+			self.classes = queryResponse.classes;
 		}).fail( function() {
 			self.content = '<span class="shortcake-error">' + shortcodeUIData.strings.mce_view_error + '</span>';
 		} ).always( function() {
 			delete self.fetching;
 			self.render( null, true );
+			self.getNodes( function( editor, node, contentNode ) {
+				$(node).attr( 'class', self.classes );
+			} );
 		} );
 	},
 

js/build/shortcode-ui.js

@@ -363,6 +363,8 @@ var sui = require('./sui.js'),
  */
 var shortcodeViewConstructor = {
 
+	classes: 'wpview-wrap',
+
 	initialize: function( options ) {
 		var self = this;
 
@@ -376,11 +378,15 @@ var shortcodeViewConstructor = {
 			} else {
 				self.content = response;
 			}
+			self.classes = queryResponse.classes;
 		}).fail( function() {
 			self.content = '<span class="shortcake-error">' + shortcodeUIData.strings.mce_view_error + '</span>';
 		} ).always( function() {
 			delete self.fetching;
 			self.render( null, true );
+			self.getNodes( function( editor, node, contentNode ) {
+				$(node).attr( 'class', self.classes );
+			} );
 		} );
 	},
 

js/src/utils/shortcode-view-constructor.js

@@ -9,6 +9,8 @@ var sui = require('sui-utils/sui'),
  */
 var shortcodeViewConstructor = {
 
+	classes: 'wpview-wrap',
+
 	initialize: function( options ) {
 		var self = this;
 
@@ -22,11 +24,15 @@ var shortcodeViewConstructor = {
 			} else {
 				self.content = response;
 			}
+			self.classes = queryResponse.classes;
 		}).fail( function() {
 			self.content = '<span class="shortcake-error">' + shortcodeUIData.strings.mce_view_error + '</span>';
 		} ).always( function() {
 			delete self.fetching;
 			self.render( null, true );
+			self.getNodes( function( editor, node, contentNode ) {
+				$(node).attr( 'class', self.classes );
+			} );
 		} );
 	},