Ticket #27320: 27320-01.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="dashicons dashicons-edit edit" data-mce-bogus="1"></div> ' +
-                        '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
+                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>';
 
                 toolbar = dom.create( 'div', {
                         'id': 'wp-image-toolbar',
@@ -361 +362 @@
 
                 dom.setStyles( toolbar, {
                         top: position.y,
-                        left: position.x
+                        left: position.x,
+                        width: node.width
                 });
         }
 

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 */
-        padding: 4px;
+        background-color: rgba(0,0,0,0.3);
 }
 
 #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;
@@ -220 +239 @@
         clip: rect(1px, 1px, 1px, 1px);
         overflow: hidden;
         outline: 0;
-        width: 100%;
 }
 
 /**
@@ -228 +246 @@
  */
 .wpview-type-gallery {
     position: relative;
+    padding: 0 0 12px;
     margin-bottom: 16px;
         cursor: pointer;
 }
 
  .wpview-type-gallery:after {
     content: '';
-        display: table;
+    display: block;
+    height: 0;
     clear: both;
+    visibility: hidden;
 }
 
  .wpview-type-gallery.selected {
-        background-color: #f2f8ff;
-        outline: 1px solid #777;
+        background-color: #efefef;
 }
 
 .wpview-type-gallery .toolbar {
@@ -271 +291 @@
 
 .gallery {
         margin: auto;
-        padding: 0.5em 0;
-        line-height: 1;
-        margin-left: -0.5em;
-        margin-right: -0.5em;
-        overflow-x: hidden;
+    line-height: 1;
 }
 
 .gallery .gallery-item {
         float: left;
-        margin: 0;
+        margin: 10px 0 0 0;
         text-align: center;
-        padding: 0.5em;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
 }
 
 .gallery .gallery-caption,
@@ -293 +305 @@
         margin: 0;
 }
 
-.gallery .gallery-caption {
-        font-size: 13px;
-        margin: 4px 0;
-}
-
 .gallery-columns-1 .gallery-item {
-        width: 100%;
+        width: 99%;
 }
 
 .gallery-columns-2 .gallery-item {
-        width: 50%;
+        width: 49.5%;
 }
 
 .gallery-columns-3 .gallery-item {
-        width: 33.333%;
+        width: 33%;
 }
 
 .gallery-columns-4 .gallery-item {
-        width: 25%;
+        width: 24.75%;
 }
 
 .gallery-columns-5 .gallery-item {
-        width: 20%;
+        width: 19.825%;
 }
 
 .gallery-columns-6 .gallery-item {
-        width: 16.667%;
+        width: 16%;
 }
 
 .gallery-columns-7 .gallery-item {
-        width: 14.285%;
+        width: 14%;
 }
 
 .gallery-columns-8 .gallery-item {
-        width: 12.5%;
+        width: 12%;
 }
 
 .gallery-columns-9 .gallery-item {
-        width: 11.111%;
+        width: 11%;
 }
 
 .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-edit edit"></div>
+                        <div class="dashicons dashicons-format-gallery edit"></div>
                         <div class="dashicons dashicons-no-alt remove"></div>
                 </div>
                 <div class="gallery gallery-columns-{{{ data.columns }}}">