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 ); + } ); } ); },