diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js
index eeb1369a314d3..558cf1a4746dc 100644
--- 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 += (
+ ''
+ );
+ }
+
+ if ( text ) {
+ html += '' + this.encode( text ) + '';
+ }
+
+ return (
+ '
' +
+ html +
+ '
'
+ );
+ }
+ } ) );
+
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
index 88efecdce96de..cd741530d416c 100644
--- 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,7 +354,8 @@ 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 {
@@ -360,5 +363,8 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
}
.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
index b85b52f9a393d..04e0138bc01db 100644
--- 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
}
} ),