Ticket #26959: 26959-03.patch

src/wp-includes/class-wp-editor.php

@@ -235 +235 @@
                                                 'fullscreen',
                                                 'wordpress',
                                                 'wpeditimage',
-                                                'wpgallery',
                                                 'wplink',
                                                 'wpdialogs',
+                                                'wpview'
                                         ) ) );
 
                                         if ( ( $key = array_search( 'spellchecker', $plugins ) ) !== false ) {
@@ -497 +497 @@
                 if ( self::$has_medialib ) {
                         add_thickbox();
                         wp_enqueue_script('media-upload');
+
+                        if ( self::$has_tinymce )
+                                wp_enqueue_script('mce-view');
                 }
+
         }
 
         public static function wp_mce_translation() {

src/wp-includes/css/editor.css

@@ -1132 +1132 @@
         color: #2ea2cc;
 }
 */
+
+
+
 /* Distraction Free Writing mode
  * =Overlay Styles
 -------------------------------------------------------------- */

src/wp-includes/js/mce-view.js

@@ -3 +3 @@
 
 (function($){
         var views = {},
-                instances = {};
+                instances = {},
+                media = wp.media;
 
         // Create the `wp.mce` object if necessary.
         wp.mce = wp.mce || {};
@@ -19 +20 @@
                         // The default properties used for objects with the `pattern` key in
                         // `wp.mce.view.add()`.
                         pattern: {
-                                view: Backbone.View,
+                                view: wp.Backbone.View,
                                 text: function( instance ) {
                                         return instance.options.original;
                                 },
 
                                 toView: function( content ) {
-                                        if ( ! this.pattern )
+                                        if ( ! this.pattern ) {
                                                 return;
+                                        }
 
                                         this.pattern.lastIndex = 0;
                                         var match = this.pattern.exec( content );
 
-                                        if ( ! match )
+                                        if ( ! match ) {
                                                 return;
+                                        }
 
                                         return {
                                                 index:   match.index,
@@ -48 +51 @@
                         // The default properties used for objects with the `shortcode` key in
                         // `wp.mce.view.add()`.
                         shortcode: {
-                                view: Backbone.View,
+                                view: wp.Backbone.View,
                                 text: function( instance ) {
                                         return instance.options.shortcode.string();
                                 },
@@ -56 +59 @@
                                 toView: function( content ) {
                                         var match = wp.shortcode.next( this.shortcode, content );
 
-                                        if ( ! match )
+                                        if ( ! match ) {
                                                 return;
+                                        }
 
                                         return {
                                                 index:   match.index,
@@ -98 +102 @@
                         var parent, remove, base, properties;
 
                         // Fetch the parent view or the default options.
-                        if ( options.extend )
+                        if ( options.extend ) {
                                 parent = wp.mce.view.get( options.extend );
-                        else if ( options.shortcode )
+                        } else if ( options.shortcode ) {
                                 parent = wp.mce.view.defaults.shortcode;
-                        else
+                        } else {
                                 parent = wp.mce.view.defaults.pattern;
+                        }
 
                         // Extend the `options` object with the parent's properties.
                         _.defaults( options, parent );
@@ -118 +123 @@
                                         this.$el.parent().remove();
 
                                         // Trigger the inherited `remove` method.
-                                        if ( remove )
+                                        if ( remove ) {
                                                 remove.apply( this, arguments );
+                                        }
 
                                         return this;
                                 }
@@ -138 +144 @@
 
                         // If there's a `remove` method on the `base` view that wasn't
                         // created by this method, inherit it.
-                        if ( ! remove && ! base._mceview )
+                        if ( ! remove && ! base._mceview ) {
                                 remove = base.prototype.remove;
+                        }
 
                         // Automatically create the new `Backbone.View` constructor.
                         options.view = base.extend( properties, {
@@ -168 +175 @@
                 // every match.
                 //
                 // To render the views, call `wp.mce.view.render( scope )`.
+                // TODO: needs unit tests!
                 toViews: function( content ) {
                         var pieces = [ { content: content } ],
                                 current;
@@ -190 +198 @@
                                         // and slicing the string as we go.
                                         while ( remaining && (result = view.toView( remaining )) ) {
                                                 // Any text before the match becomes an unprocessed piece.
-                                                if ( result.index )
+                                                if ( result.index ) {
                                                         pieces.push({ content: remaining.substring( 0, result.index ) });
+                                                }
 
                                                 // Add the processed piece for the match.
                                                 pieces.push({
@@ -205 +214 @@
 
                                         // There are no additional matches. If any content remains,
                                         // add it as an unprocessed piece.
-                                        if ( remaining )
+                                        if ( remaining ) {
                                                 pieces.push({ content: remaining });
+                                        }
                                 });
                         });
 
@@ -217 +227 @@
                         var view = wp.mce.view.get( viewType ),
                                 instance, id;
 
-                        if ( ! view )
+                        if ( ! view ) {
                                 return '';
-
+                        }
                         // Create a new view instance.
                         instance = new view.view( _.extend( options || {}, {
                                 viewType: viewType
@@ -239 +249 @@
                                 tag: 'span' === instance.tagName ? 'span' : 'div',
 
                                 attrs: {
-                                        'class':           'wp-view-wrap wp-view-type-' + viewType,
+                                        'class': 'wp-view-wrap wp-view-type-' + viewType,
                                         'data-wp-view':    id,
                                         'contenteditable': false
-                                }
+                                },
+
+                                content: '\u00a0'
                         });
                 },
 
@@ -255 +267 @@
                 render: function( scope ) {
                         $( '.wp-view-wrap', scope ).each( function() {
                                 var wrapper = $(this),
-                                        view = wp.mce.view.instance( this );
+                                        view = wp.mce.view.instance( this ),
+                                        $shortcode;
 
-                                if ( ! view )
+                                if ( ! view ) {
                                         return;
+                                }
 
                                 // Link the real wrapper to the view.
                                 view.$wrapper = wrapper;
@@ -267 +281 @@
                                 // Detach the view element to ensure events are not unbound.
                                 view.$el.detach();
 
+                                $shortcode = $( '<div />' )
+                                        .addClass( 'wp-view-shortcode' )
+                                        .prop( 'contenteditable', 'true' )
+                                        .data( 'mce-bogus', '1' )
+                                        .text( view.options.shortcode.string() );
+
                                 // Empty the wrapper, attach the view element to the wrapper,
+                                // add a hidden element with the shortcode,
                                 // and add an ending marker to the wrapper to help regexes
                                 // scan the HTML string.
-                                wrapper.empty().append( view.el ).append('<span data-wp-view-end class="wp-view-end"></span>');
+                                wrapper.empty().append( view.el )
+                                        .prepend( $shortcode )
+                                        .append('<span data-wp-view-end class="wp-view-end"></span>');
                         });
                 },
 
@@ -278 +301 @@
                 // Scans an HTML `content` string and replaces any view instances with
                 // their respective text representations.
                 toText: function( content ) {
-                        return content.replace( /<(?:div|span)[^>]+data-wp-view="([^"]+)"[^>]*>.*?<span[^>]+data-wp-view-end[^>]*><\/span><\/(?:div|span)>/g, function( match, id ) {
+
+                        return content.replace( /<(?:div|span)[^>]+data-wp-view="([^"]+)"[^>]*>.*?<span[^>]+data-wp-view-end[^>]*><\/span><\/(?:div|span)>/mg, function( match, id ) {
                                 var instance = instances[ id ],
                                         view;
 
-                                if ( instance )
+                                if ( instance ) {
                                         view = wp.mce.view.get( instance.options.viewType );
-
+                                }
                                 return instance && view ? view.text( instance ) : '';
                         });
                 },
@@ -293 +317 @@
                 removeInternalAttrs: function( attrs ) {
                         var result = {};
                         _.each( attrs, function( value, attr ) {
-                                if ( -1 === attr.indexOf('data-mce') )
+                                if ( -1 === attr.indexOf('data-mce') ) {
                                         result[ attr ] = value;
+                                }
                         });
                         return result;
                 },
@@ -311 +336 @@
                 instance: function( node ) {
                         var id = $( node ).data('wp-view');
 
-                        if ( id )
+                        if ( id ) {
                                 return instances[ id ];
+                        }
                 },
 
                 // ### Select a view.
@@ -323 +349 @@
                         var $node = $(node);
 
                         // Bail if node is already selected.
-                        if ( $node.hasClass('selected') )
+                        if ( $node.hasClass('selected') ) {
                                 return;
+                        }
 
                         $node.addClass('selected');
                         $( node.firstChild ).trigger('select');
@@ -338 +365 @@
                         var $node = $(node);
 
                         // Bail if node is already selected.
-                        if ( ! $node.hasClass('selected') )
+                        if ( ! $node.hasClass('selected') ) {
                                 return;
+                        }
 
                         $node.removeClass('selected');
                         $( node.firstChild ).trigger('deselect');
                 }
         };
 
-}(jQuery));
- No newline at end of file
+        wp.mce.view.add( 'gallery', {
+                shortcode: 'gallery',
+
+                gallery: (function() {
+                        var galleries = {};
+
+                        return {
+                                attachments: function( shortcode, parent ) {
+                                        var shortcodeString = shortcode.string(),
+                                                result = galleries[ shortcodeString ],
+                                                attrs, args, query, others;
+
+                                        delete galleries[ shortcodeString ];
+
+                                        if ( result ) {
+                                                return result;
+                                        }
+
+                                        attrs = shortcode.attrs.named;
+                                        args  = _.pick( attrs, 'orderby', 'order' );
+
+                                        args.type    = 'image';
+                                        args.perPage = -1;
+
+                                        // Map the `ids` param to the correct query args.
+                                        if ( attrs.ids ) {
+                                                args.post__in = attrs.ids.split(',');
+                                                args.orderby  = 'post__in';
+                                        } else if ( attrs.include ) {
+                                                args.post__in = attrs.include.split(',');
+                                        }
+
+                                        if ( attrs.exclude ) {
+                                                args.post__not_in = attrs.exclude.split(',');
+                                        }
+
+                                        if ( ! args.post__in ) {
+                                                args.parent = attrs.id || parent;
+                                        }
+
+                                        // Collect the attributes that were not included in `args`.
+                                        others = {};
+                                        _.filter( attrs, function( value, key ) {
+                                                if ( _.isUndefined( args[ key ] ) ) {
+                                                        others[ key ] = value;
+                                                }
+                                        });
+
+                                        query = media.query( args );
+                                        query.gallery = new Backbone.Model( others );
+                                        return query;
+                                },
+
+                                shortcode: function( attachments ) {
+                                        var props = attachments.props.toJSON(),
+                                                attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
+                                                shortcode, clone;
+
+                                        if ( attachments.gallery ) {
+                                                _.extend( attrs, attachments.gallery.toJSON() );
+                                        }
+
+                                        attrs.ids = attachments.pluck('id');
+
+                                        // If the `ids` attribute is set and `orderby` attribute
+                                        // is the default value, clear it for cleaner output.
+                                        if ( attrs.ids && 'post__in' === attrs.orderby ) {
+                                                delete attrs.orderby;
+                                        }
+
+                                        shortcode = new wp.shortcode({
+                                                tag:    'gallery',
+                                                attrs:  attrs,
+                                                type:   'single'
+                                        });
+
+                                        // Use a cloned version of the gallery.
+                                        clone = new wp.media.model.Attachments( attachments.models, {
+                                                props: props
+                                        });
+                                        clone.gallery = attachments.gallery;
+                                        galleries[ shortcode.string() ] = clone;
+
+                                        return shortcode;
+                                }
+                        };
+                }()),
+
+                view: {
+                        className: 'editor-gallery',
+                        template:  media.template('editor-gallery'),
+
+                        // The fallback post ID to use as a parent for galleries that don't
+                        // specify the `ids` or `include` parameters.
+                        //
+                        // Uses the hidden input on the edit posts page by default.
+                        parent: $('#post_ID').val(),
+
+                        events: {
+                                'click .remove': 'remove',
+                                'click .edit':  'edit'
+                        },
+
+                        initialize: function() {
+                                this.update();
+                        },
+
+                        update: function() {
+                                var     view = wp.mce.view.get('gallery');
+
+                                this.attachments = view.gallery.attachments( this.options.shortcode, this.parent );
+                                this.attachments.more().done( _.bind( this.render, this ) );
+                        },
+
+
+                        render: function() {
+                                var attrs = this.options.shortcode.attrs.named,
+                                        options;
+
+                                if ( ! this.attachments.length ) {
+                                        return;
+                                }
+
+                                options = {
+                                        attachments: this.attachments.toJSON(),
+                                        columns: attrs.columns ? parseInt( attrs.columns, 10 ) : 3
+                                };
+
+                                this.$el.html( this.template( options ) );
+                        },
+
+                        edit: function() {
+                                var selection;
+
+                                if ( ! wp.media.view || this.frame ) {
+                                        return;
+                                }
+
+                                selection = new wp.media.model.Selection( this.attachments.models, {
+                                        props:    this.attachments.props.toJSON(),
+                                        multiple: true
+                                });
+                                selection.gallery = this.attachments.gallery;
+
+                                this.frame = wp.media({
+                                        frame:     'post',
+                                        state:     'gallery-edit',
+                                        editing:   true,
+                                        multiple:  true,
+                                        selection: selection
+                                });
+
+                                // Create a single-use frame. If the frame is closed,
+                                // then detach it from the DOM and remove the reference.
+                                this.frame.on( 'close', function() {
+                                        if ( this.frame ) {
+                                                this.frame.detach();
+                                        }
+                                        delete this.frame;
+                                }, this );
+
+                                // Update the `shortcode` and `attachments`.
+                                this.frame.state('gallery-edit').on( 'update', function( selection ) {
+                                        var     view = wp.mce.view.get('gallery');
+
+                                        this.options.shortcode = view.gallery.shortcode( selection );
+                                        this.update();
+                                }, this );
+
+                                this.frame.open();
+                        }
+                }
+        });
+}(jQuery));

src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -379 +379 @@
                         return true;
                 }
 
+                if ( dom.getParent( node, '.wp-view-wrap' ) ) {
+                        return true;
+                }
+
                 return false;
         }
 

src/wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -2 +2 @@
 /**
  * WordPress View plugin.
  */
-
-(function() {
-        var VK = tinymce.VK,
+tinymce.PluginManager.add( 'wpview', function( editor ) {
+        var VK = tinymce.util.VK,
                 TreeWalker = tinymce.dom.TreeWalker,
+                removeSelected = false,
                 selected;
 
-        tinymce.create('tinymce.plugins.wpView', {
-                init : function( editor ) {
-                        var wpView = this;
+        function getParentView( node ) {
+                while ( node ) {
+                        if ( isView( node ) ) {
+                                return node;
+                        }
+
+                        node = node.parentNode;
+                }
+        }
+
+        function isView( node ) {
+                return (/(?:^|\s)wp-view-wrap(?:\s|$)/).test( node.className );
+        }
+
+        function select( view ) {
+                var elem;
+                if ( view === selected ) {
+                        return;
+                }
+
+                deselect();
+                selected = view;
+
+                elem = editor.dom.select( '.wp-view-shortcode', view )[0];
+
+                // the following are both necessary to avoid tinymce from manipulating the selection/focus
+                editor.dom.bind(elem, 'beforedeactivate focusin focusout', function(e) {
+                        e.stopPropagation();
+                });
+                editor.dom.bind(selected, 'beforedeactivate focusin focusout click mouseup', function(e) {
+                        e.stopPropagation();
+                });
+
+                // select a the hidden div
+                editor.selection.select( elem, true );
+                elem.focus();
+                wp.mce.view.select( selected );
+        }
+
+        function deselect() {
+                var elem;
+
+                if ( selected ) {
+                        elem = editor.dom.select( '.wp-view-shortcode', selected )[0];
+                        editor.dom.unbind(elem, 'beforedeactivate focusin focusout');
+                        editor.dom.unbind(selected, 'beforedeactivate focusin focusout click mouseup');
+
+                        editor.selection.select( selected.nextSibling );
+                        editor.selection.collapse();
+                        wp.mce.view.deselect( selected );
+                }
+
+                selected = null;
+        }
+
+        // Check if the `wp.mce` API exists.
+        if ( typeof wp === 'undefined' || ! wp.mce ) {
+                return;
+        }
+
+        editor.on( 'PreInit', function() {
+                // Add elements so we can set `contenteditable` to false.
+                // TODO: since we are serializing, is this needed?
+                editor.schema.addValidElements('div[*],span[*]');
+        });
+
+        // When the editor's content changes, scan the new content for
+        // matching view patterns, and transform the matches into
+        // view wrappers. Since the editor's DOM is outdated at this point,
+        // we'll wait to render the views.
+        editor.on( 'BeforeSetContent', function( e ) {
+                if ( ! e.content ) {
+                        return;
+                }
+
+                e.content = wp.mce.view.toViews( e.content );
+        });
+
+        // When the editor's content has been updated and the DOM has been
+        // processed, render the views in the document.
+        editor.on( 'SetContent', function() {
+                wp.mce.view.render( editor.getDoc() );
+        });
+
+        // Provide our own handler for selecting a view that is picked up before TinyMCE
+        // Ideally, TinyMCE would provide a way to relinquish control over a block that is marked contenteditable=false perhaps through some sort of data attribute
+        editor.on( 'mousedown', function( event ) {
+                var view = getParentView( event.target );
 
-                        // Check if the `wp.mce` API exists.
-                        if ( typeof wp === 'undefined' || ! wp.mce ) {
+                if ( event.metaKey || event.ctrlKey ) {
+                        return;
+                }
+
+                // Update the selected view.
+                if ( view ) {
+                        select( view );
+
+                        // maybe we can trigger the mousedown so that a view can listen to it.
+                        // Prevent the selection from propagating to other plugins.
+                        return false;
+
+                } else {
+                        deselect();
+                }
+        } );
+
+        editor.on( 'init', function() {
+                var selection = editor.selection;
+                // When a view is selected, ensure content that is being pasted
+                // or inserted is added to a text node (instead of the view).
+                editor.on( 'BeforeSetContent', function() {
+                        var walker, target,
+                                view = getParentView( selection.getNode() );
+
+                        // If the selection is not within a view, bail.
+                        if ( ! view ) {
                                 return;
                         }
 
-                        editor.on( 'PreInit', function() {
-                                // Add elements so we can set `contenteditable` to false.
-                                editor.schema.addValidElements('div[*],span[*]');
-                        });
-
-                        // When the editor's content changes, scan the new content for
-                        // matching view patterns, and transform the matches into
-                        // view wrappers. Since the editor's DOM is outdated at this point,
-                        // we'll wait to render the views.
-                        editor.on( 'BeforeSetContent', function( e ) {
-                                if ( ! e.content ) {
-                                        return;
-                                }
-
-                                e.content = wp.mce.view.toViews( e.content );
-                        });
-
-                        // When the editor's content has been updated and the DOM has been
-                        // processed, render the views in the document.
-                        editor.on( 'SetContent', function() {
-                                wp.mce.view.render( editor.getDoc() );
-                        });
-
-                        editor.on( 'init', function() {
-                                var selection = editor.selection;
-                                // When a view is selected, ensure content that is being pasted
-                                // or inserted is added to a text node (instead of the view).
-                                editor.on( 'BeforeSetContent', function() {
-                                        var walker, target,
-                                                view = wpView.getParentView( selection.getNode() );
-
-                                        // If the selection is not within a view, bail.
-                                        if ( ! view ) {
-                                                return;
-                                        }
-
-                                        // If there are no additional nodes or the next node is a
-                                        // view, create a text node after the current view.
-                                        if ( ! view.nextSibling || wpView.isView( view.nextSibling ) ) {
-                                                target = editor.getDoc().createTextNode('');
-                                                editor.dom.insertAfter( target, view );
-
-                                        // Otherwise, find the next text node.
-                                        } else {
-                                                walker = new TreeWalker( view.nextSibling, view.nextSibling );
-                                                target = walker.next();
-                                        }
-
-                                        // Select the `target` text node.
-                                        selection.select( target );
-                                        selection.collapse( true );
-                                });
-
-                                // When the selection's content changes, scan any new content
-                                // for matching views and immediately render them.
-                                //
-                                // Runs on paste and on inserting nodes/html.
-                                editor.on( 'SetContent', function( e ) {
-                                        if ( ! e.context ) {
-                                                return;
-                                        }
-
-                                        var node = selection.getNode();
-
-                                        if ( ! node.innerHTML ) {
-                                                return;
-                                        }
-
-                                        node.innerHTML = wp.mce.view.toViews( node.innerHTML );
-                                        wp.mce.view.render( node );
-                                });
-                        });
-
-                        // When the editor's contents are being accessed as a string,
-                        // transform any views back to their text representations.
-                        editor.on( 'PostProcess', function( e ) {
-                                if ( ( ! e.get && ! e.save ) || ! e.content ) {
-                                        return;
-                                }
-
-                                e.content = wp.mce.view.toText( e.content );
-                        });
-
-                        // Triggers when the selection is changed.
-                        // Add the event handler to the top of the stack.
-                        editor.on( 'NodeChange', function( e ) {
-                                var view = wpView.getParentView( e.element );
-
-                                // Update the selected view.
-                                if ( view ) {
-                                        wpView.select( view );
-
-                                        // Prevent the selection from propagating to other plugins.
-                                        return false;
-
-                                // If we've clicked off of the selected view, deselect it.
-                                } else {
-                                        wpView.deselect();
-                                }
-                        });
-
-                        editor.on( 'keydown', function( event ) {
-                                var keyCode = event.keyCode,
-                                        view, instance;
-
-                                // If a view isn't selected, let the event go on its merry way.
-                                if ( ! selected ) {
-                                        return;
-                                }
-
-                                // If the caret is not within the selected view, deselect the
-                                // view and bail.
-                                view = wpView.getParentView( editor.selection.getNode() );
-                                if ( view !== selected ) {
-                                        wpView.deselect();
-                                        return;
-                                }
-
-                                // If delete or backspace is pressed, delete the view.
-                                if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
-                                        if ( (instance = wp.mce.view.instance( selected )) ) {
-                                                instance.remove();
-                                                wpView.deselect();
-                                        }
-                                }
-
-                                // Let keypresses that involve the command or control keys through.
-                                // Also, let any of the F# keys through.
-                                if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) {
-                                        return;
-                                }
-
-                                event.preventDefault();
-                        });
-                },
-
-                getParentView : function( node ) {
-                        while ( node ) {
-                                if ( this.isView( node ) ) {
-                                        return node;
-                                }
-
-                                node = node.parentNode;
+                        // If there are no additional nodes or the next node is a
+                        // view, create a text node after the current view.
+                        if ( ! view.nextSibling || isView( view.nextSibling ) ) {
+                                target = editor.getDoc().createTextNode('');
+                                editor.dom.insertAfter( target, view );
+
+                        // Otherwise, find the next text node.
+                        } else {
+                                walker = new TreeWalker( view.nextSibling, view.nextSibling );
+                                target = walker.next();
                         }
-                },
 
-                isView : function( node ) {
-                        return (/(?:^|\s)wp-view-wrap(?:\s|$)/).test( node.className );
-                },
+                        // Select the `target` text node.
+                        selection.select( target );
+                        selection.collapse( true );
+                });
+
+                // When the selection's content changes, scan any new content
+                // for matching views and immediately render them.
+                //
+                // Runs on paste and on inserting nodes/html.
+                editor.on( 'SetContent', function( e ) {
+                        if ( ! e.context ) {
+                                return;
+                        }
+
+                        var node = selection.getNode();
 
-                select : function( view ) {
-                        if ( view === selected ) {
+                        if ( ! node.innerHTML ) {
                                 return;
                         }
 
-                        this.deselect();
-                        selected = view;
-                        wp.mce.view.select( selected );
-                },
+                        node.innerHTML = wp.mce.view.toViews( node.innerHTML );
+                        wp.mce.view.render( node );
+                });
+        });
+
+        // When the editor's contents are being accessed as a string,
+        // transform any views back to their text representations.
+        editor.on( 'PostProcess', function( e ) {
+                if ( ( ! e.get && ! e.save ) || ! e.content ) {
+                        return;
+                }
+
+                e.content = wp.mce.view.toText( e.content );
+        });
+
+        editor.on( 'keydown', function( event ) {
+                var keyCode = event.keyCode,
+                        view, instance;
+
+                // If a view isn't selected, let the event go on its merry way.
+                if ( ! selected ) {
+                        return;
+                }
 
-                deselect : function() {
-                        if ( selected ) {
-                                wp.mce.view.deselect( selected );
+                // Let keypresses that involve the command or control keys through.
+                // Also, let any of the F# keys through.
+                if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) {
+                        if ( ( event.metaKey || event.ctrlKey ) && keyCode === 88 ) {
+                                removeSelected = true;
                         }
+                        return;
+                }
 
-                        selected = null;
+                // If the caret is not within the selected view, deselect the
+                // view and bail.
+                view = getParentView( editor.selection.getNode() );
+                if ( view !== selected ) {
+                        deselect();
+                        return;
                 }
+
+                // If delete or backspace is pressed, delete the view.
+                if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
+                        if ( (instance = wp.mce.view.instance( selected )) ) {
+                                instance.remove();
+                                deselect();
+                        }
+                }
+
+                event.preventDefault();
         });
 
-        // Register plugin
-        tinymce.PluginManager.add( 'wpview', tinymce.plugins.wpView );
-})();
+        editor.on( 'keyup', function() {
+                var instance;
+
+                if ( selected && removeSelected ) {
+                        instance = wp.mce.view.instance( selected );
+                        removeSelected = false;
+                        instance.remove();
+                        deselect();
+                }
+
+        });
+});

src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -183 +183 @@
         outline: 1px solid #777;
 }
 
+
+/**
+ * WP Views
+ */
+
+/* delegate the handling of the selection to the wpview tinymce plugin */
+
+.wp-view-wrap,
+.wp-view-wrap * {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+}
+
+/* hide the shortcode content, but allow the content to still be selected */
+.wp-view-wrap .wp-view-shortcode {
+        position: absolute;
+        top: 20px;
+        width: 10px;
+        z-index: 100;
+        overflow: hidden;
+        opacity: 1;
+        left: -9999px;
+        display: block;
+        -moz-user-select: element;
+        -webkit-user-select: element;
+        -ms-user-select: element;
+        user-select: element;
+
+}
+
+/**
+ * Gallery preview
+ */
+.wp-view-type-gallery {
+    position: relative;
+    padding: 16px 0;
+    margin-bottom: 16px;
+        cursor: pointer;
+}
+
+ .wp-view-type-gallery:after {
+    content: '';
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
+
+ .wp-view-type-gallery.selected {
+        background-color: #efefef;
+}
+
+.wp-view-type-gallery .toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #333;
+    color: white;
+    padding: 4px;
+        display: none;
+}
+
+.wp-view-type-gallery.selected .toolbar {
+        display: block;
+}
+
+.wp-view-type-gallery .toolbar span {
+        cursor: pointer;
+}
+
+.gallery img[data-mce-selected]:focus {
+        outline: none;
+}
+
+.gallery a {
+        cursor: default;
+}
+
+.gallery {
+        margin: auto;
+    line-height: 1;
+}
+
+.gallery .gallery-item {
+        float: left;
+        margin: 10px 0 0 0;
+        text-align: center;
+}
+
+.gallery .gallery-caption,
+.gallery .gallery-icon {
+        margin: 0;
+}
+
+.gallery-columns-1 .gallery-item {
+        width: 100%;
+}
+
+.gallery-columns-2 .gallery-item {
+        width: 50%;
+}
+
+.gallery-columns-3 .gallery-item {
+        width: 33.333%;
+}
+
+.gallery-columns-4 .gallery-item {
+        width: 25%;
+}
+
+.gallery-columns-5 .gallery-item {
+        width: 20%;
+}
+
+.gallery-columns-6 .gallery-item {
+        width: 16%;
+}
+
+.gallery-columns-7 .gallery-item {
+        width: 14%;
+}
+
+.gallery-columns-8 .gallery-item {
+        width: 12%;
+}
+
+.gallery-columns-9 .gallery-item {
+        width: 11%;
+}
+
+.gallery img {
+        border: 2px solid #cfcfcf;
+}
+
 img.wp-oembed {
         border: 1px dashed #888;
         background: #f7f5f2 url("images/embedded.png") no-repeat scroll center center;

src/wp-includes/media-template.php

@@ -599 +599 @@
         </script>
         <?php
 
+                //TODO: do we want to deal with the fact that the elements used for gallery items are filterable and can be overriden via shortcode attributes
+                // do we want to deal with the difference between display and edit context at all? (e.g. wptexturize() being applied to the caption.
+        ?>
+
+        <script type="text/html" id="tmpl-editor-gallery">
+                <div class="toolbar">
+                        <div class="dashicons dashicons-format-gallery edit"></div>
+                        <div class="dashicons dashicons-no-alt remove"></div>
+                </div>
+                <div class="gallery gallery-columns-{{{ data.columns }}}">
+                        <# _.each( data.attachments, function( attachment, index ) { #>
+                                <dl class="gallery-item">
+                                        <dt class="gallery-icon">
+                                                <?php // TODO: need to figure out the best way to make sure that we have thumbnails ?>
+                                                <img src="{{{ attachment.sizes.thumbnail.url }}}" />
+                                        </dt>
+                                        <dd class="wp-caption-text gallery-caption">
+                                                {{ attachment.caption }}
+                                        </dd>
+                                </dl>
+                                <?php // this is kind silly, but copied from the gallery shortcode. Maybe it should be removed ?>
+                                <# if ( index % data.columns === data.columns - 1 ) { #>
+                                        <br style="clear: both;">
+                                <# } #>
+
+                        <# } ); #>
+                </div>
+        </script>
+        <?php
+
         /**
          * Prints the media manager custom media templates.
          *