TinyMCE:

- Update the styling of the image caption and gallery toolbars.
- Fix issue where the hidden clipboard div in wpView.
- Switch to using the pencil dashicon for Edit.
- Add `max-width: 100%;` to images in the gallery preview and adjust column widths.
Props cramdesign, mattheu, gcorne, melchoyce, see #27320, fixes #27376, fixes #27354


git-svn-id: https://develop.svn.wordpress.org/trunk@27578 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -348,9 +348,8 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		dom.setAttrib( node, 'data-wp-imgselect', 1 );
 		position = dom.getPos( node, editor.getBody() );
 
-		toolbarHtml = '<div class="wrapper" data-mce-bogus="1">' +
+		toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div> ' +
-			'<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 class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div></div>';
 
 		toolbar = dom.create( 'div', {
 			'id': 'wp-image-toolbar',
@@ -362,8 +361,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 
 		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,34 +160,14 @@ img::selection {
 
 #wp-image-toolbar {
 	position: absolute;
-}
+	background-color: #333;
-
-#wp-image-toolbar .wrapper {
-	position: relative;
-	height: 33px;
-	background-color: #333; /* old IE */
-	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;
@@ -239,6 +219,7 @@ embed {
 	clip: rect(1px, 1px, 1px, 1px);
 	overflow: hidden;
 	outline: 0;
+	width: 100%;
 }
 
 /**
@@ -246,21 +227,19 @@ embed {
  */
 .wpview-type-gallery {
     position: relative;
-    padding: 0 0 12px;
     margin-bottom: 16px;
 	cursor: pointer;
 }
 
  .wpview-type-gallery:after {
     content: '';
-    display: block;
+	display: table;
-    height: 0;
     clear: both;
-    visibility: hidden;
 }
 
  .wpview-type-gallery.selected {
-	background-color: #efefef;
+	background-color: #f2f8ff;
+	outline: 1px solid #777;
 }
 
 .wpview-type-gallery .toolbar {
@@ -269,10 +248,14 @@ embed {
     left: 0;
     background-color: #333;
     color: white;
-    padding: 4px;
 	display: none;
 }
 
+.wpview-type-gallery .toolbar div,
+#wp-image-toolbar div {
+	margin: 5px;
+}
+
 .wpview-type-gallery.selected .toolbar {
 	display: block;
 }
@@ -291,13 +274,21 @@ embed {
 
 .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,44 +296,51 @@ embed {
 	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,7 +905,7 @@ function wp_print_media_templates() {
 
 	<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 }}}">