Ticket #27320: 27320-02.patch

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

@@ -348 +348 @@
                 dom.setAttrib( node, 'data-wp-imgselect', 1 );
                 position = dom.getPos( node, editor.getBody() );
 
-                toolbarHtml = '<div class="wrapper" data-mce-bogus="1">' +
-                        '<div class="dashicons dashicons-format-image edit" data-mce-bogus="1"></div> ' +
-                        '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div></div>';
+                toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div> ' +
+                        '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
 
                 toolbar = dom.create( 'div', {
                         'id': 'wp-image-toolbar',
@@ -362 +361 @@
 
                 dom.setStyles( toolbar, {
                         top: position.y,
-                        left: position.x,
-                        width: node.width
+                        left: position.x
                 });
         }
 

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

@@ -160 +160 @@
 
 #wp-image-toolbar {
         position: absolute;
-}
-
-#wp-image-toolbar .wrapper {
-        position: relative;
-        height: 33px;
         background-color: #333; /* old IE */
-        background-color: rgba(0,0,0,0.3);
+        padding: 4px;
 }
 
 #wp-image-toolbar .dashicons {
-        position: absolute;
         color: white;
-        width: 36px;
-        height: 32px;
-        line-height: 32px;
         cursor: pointer;
 }
 
-#wp-image-toolbar div.dashicons-no-alt {
-        top: 0;
-        right: 0;
-}
-
-#wp-image-toolbar div.dashicons-format-image {
-        top: 0;
-        left: 0;
-}
-
 /* Image resize handles */
 .mce-content-body div.mce-resizehandle {
         border-color: #777;
@@ -239 +220 @@
         clip: rect(1px, 1px, 1px, 1px);
         overflow: hidden;
         outline: 0;
+        width: 100%;
 }
 
 /**
@@ -246 +228 @@
  */
 .wpview-type-gallery {
     position: relative;
-    padding: 0 0 12px;
     margin-bottom: 16px;
         cursor: pointer;
 }
 
  .wpview-type-gallery:after {
     content: '';
-    display: block;
-    height: 0;
+        display: table;
     clear: both;
-    visibility: hidden;
 }
 
  .wpview-type-gallery.selected {
-        background-color: #efefef;
+        background-color: #f2f8ff;
+        outline: 1px solid #777;
 }
 
 .wpview-type-gallery .toolbar {
@@ -291 +271 @@
 
 .gallery {
         margin: auto;
-    line-height: 1;
+        padding: 0.5em 0;
+        line-height: 1;
+        margin-left: -0.5em;
+        margin-right: -0.5em;
+        overflow-x: hidden;
 }
 
 .gallery .gallery-item {
         float: left;
-        margin: 10px 0 0 0;
+        margin: 0;
         text-align: center;
+        padding: 0.5em;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
 }
 
 .gallery .gallery-caption,
@@ -305 +293 @@
         margin: 0;
 }
 
+.gallery .gallery-caption {
+        font-size: 13px;
+        margin: 4px 0;
+}
+
 .gallery-columns-1 .gallery-item {
-        width: 99%;
+        width: 100%;
 }
 
 .gallery-columns-2 .gallery-item {
-        width: 49.5%;
+        width: 50%;
 }
 
 .gallery-columns-3 .gallery-item {
-        width: 33%;
+        width: 33.333%;
 }
 
 .gallery-columns-4 .gallery-item {
-        width: 24.75%;
+        width: 25%;
 }
 
 .gallery-columns-5 .gallery-item {
-        width: 19.825%;
+        width: 20%;
 }
 
 .gallery-columns-6 .gallery-item {
-        width: 16%;
+        width: 16.667%;
 }
 
 .gallery-columns-7 .gallery-item {
-        width: 14%;
+        width: 14.285%;
 }
 
 .gallery-columns-8 .gallery-item {
-        width: 12%;
+        width: 12.5%;
 }
 
 .gallery-columns-9 .gallery-item {
-        width: 11%;
+        width: 11.111%;
 }
 
 .gallery img {
         border: 1px solid #cfcfcf;
+        max-width: 100%;
+        height: auto;
 }
 
 img.wp-oembed {

src/wp-includes/media-template.php

@@ -905 +905 @@
 
         <script type="text/html" id="tmpl-editor-gallery">
                 <div class="toolbar">
-                        <div class="dashicons dashicons-format-gallery edit"></div>
+                        <div class="dashicons dashicons-edit edit"></div>
                         <div class="dashicons dashicons-no-alt remove"></div>
                 </div>
                 <div class="gallery gallery-columns-{{{ data.columns }}}">