diff --git a/inc/class-shortcode-ui.php b/inc/class-shortcode-ui.php
index 94bbdb07..7445820f 100644
--- a/inc/class-shortcode-ui.php
+++ b/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 ),
);
}
diff --git a/js-tests/build/specs.js b/js-tests/build/specs.js
index 9a302cfc..b253fbc1 100644
--- a/js-tests/build/specs.js
+++ b/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 = '' + shortcodeUIData.strings.mce_view_error + '';
} ).always( function() {
delete self.fetching;
self.render( null, true );
+ self.getNodes( function( editor, node, contentNode ) {
+ $(node).attr( 'class', self.classes );
+ } );
} );
},
diff --git a/js/build/shortcode-ui.js b/js/build/shortcode-ui.js
index b76c0040..64b64dfc 100644
--- a/js/build/shortcode-ui.js
+++ b/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 = '' + shortcodeUIData.strings.mce_view_error + '';
} ).always( function() {
delete self.fetching;
self.render( null, true );
+ self.getNodes( function( editor, node, contentNode ) {
+ $(node).attr( 'class', self.classes );
+ } );
} );
},
diff --git a/js/src/utils/shortcode-view-constructor.js b/js/src/utils/shortcode-view-constructor.js
index 47556512..4f4f4617 100644
--- a/js/src/utils/shortcode-view-constructor.js
+++ b/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 = '' + shortcodeUIData.strings.mce_view_error + '';
} ).always( function() {
delete self.fetching;
self.render( null, true );
+ self.getNodes( function( editor, node, contentNode ) {
+ $(node).attr( 'class', self.classes );
+ } );
} );
},