Merge pull request #257 from WordPress/update/tinymce-single/mock-ups

Add icons to type switcher
WordPress · Mar 13, 2017 · aeb9ddf · aeb9ddf
2 parents 2a2ba0e + 958b81a
commit aeb9ddf
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js
@@ -96,6 +96,34 @@
 		}
 	} ) );
 
+	tinymce.ui.Factory.add( 'menuitem', tinymce.ui.MenuItem.extend( {
+		renderHtml: function () {
+			var self = this, id = self._id, settings = self.settings, prefix = self.classPrefix;
+
+			var icon = this.settings.icon;
+			var text = this.settings.text;
+			var html = '';
+
+			if ( icon ) {
+				html += (
+					'<svg width="24" height="24" class="gridicon ' + icon + '">' +
+						'<use xlink:href="../shared/gridicons.svg#' + icon + '"></use>' +
+					'</svg>'
+				);
+			}
+
+			if ( text ) {
+				html += '<span class="' + prefix + 'txt">' + this.encode( text ) + '</span>';
+			}
+
+			return (
+				'<div id="' + id + '" class="' + self.classes + '" tabindex="-1">' +
+					html +
+				'</div>'
+			);
+		}
+	} ) );
+
 	tinymce.PluginManager.add( 'toolbar', function( editor ) {
 		var each = tinymce.each;
 		var DOM = tinymce.DOM;

diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -322,6 +322,7 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	text-transform: uppercase;
 }
 
+.mce-menu-item .mce-txt,
 .insert-menu .mce-txt {
 	font-size: 16px;
 	text-align: inherit;
@@ -330,6 +331,7 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	line-height: 16px;
 	width: 120px;
 	padding: 4px;
+	display: inline-block;
 }
 
 .insert-menu .mce-btn-has-text svg.gridicons-heading {
@@ -352,13 +354,17 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	background-color: #fff;
 	border: 1px solid #e1e6ea;
 	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
-	margin-top: 2px;
+	margin-top: 3px;
+	margin-left: -1px;
 }
 
 .mce-listbox .mce-txt {
 	display: none;
 }
 
 .mce-menu-item {
-	padding: 4px;
+	padding: 6px;
+	position: relative;
+	background: none;
+	color: #12181e;
 }
diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -54,6 +54,7 @@
 			values: textBlocks.map( function( settings ) {
 				return {
 					text: settings.displayName,
+					icon: settings.icon,
 					value: settings._id
 				}
 			} ),