Add insert menu separators

WordPress · Mar 8, 2017 · 0f53bd7 · 0f53bd7
1 parent 30b697d
commit 0f53bd7
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 11 deletions.
diff --git a/tinymce-single/blocks/core/gallery/register.js b/tinymce-single/blocks/core/gallery/register.js
@@ -2,7 +2,7 @@ window.wp.blocks.registerBlock( {
 	name: 'gallery',
 	namespace: 'core',
 	displayName: 'Gallery',
-	type: 'image',
+	type: 'media',
 	keywords: [],
 	icon: 'gridicons-image-multiple',
 	controls: [

diff --git a/tinymce-single/blocks/core/image/register.js b/tinymce-single/blocks/core/image/register.js
@@ -2,7 +2,7 @@ window.wp.blocks.registerBlock( {
 	name: 'image',
 	namespace: 'core',
 	displayName: 'Image',
-	type: 'image',
+	type: 'media',
 	icon: 'gridicons-image',
 	controls: [
 		'block-align-left',

diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js
@@ -2,7 +2,7 @@ window.wp.blocks.registerBlock( {
 	name: 'youtube',
 	namespace: 'my-awesome-plugin',
 	displayName: 'YouTube Video',
-	type: 'video',
+	type: 'media',
 	keywords: [],
 	icon: 'gridicons-video',
 	controls: [

diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -259,6 +259,13 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	float: left;
 }
 
+.insert-menu .insert-separator {
+	clear: both;
+	background: #f0f2f4;
+	padding: 4px;
+	text-transform: uppercase;
+}
+
 .insert-menu .mce-txt {
 	font-size: 16px;
 	text-align: inherit;
@@ -268,3 +275,7 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	width: 120px;
 	padding: 4px;
 }
+
+.insert-menu .mce-btn-has-text svg.gridicons-heading {
+	margin: 0;
+}
diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -258,21 +258,38 @@
 				return insert;
 			}
 
+			window.tinymce.ui.WPInsertSeparator = tinymce.ui.Control.extend( {
+				renderHtml: function() {
+					console.log(this)
+					return (
+						'<div id="' + this._id + '" class="insert-separator">' + this.settings.text + '</div>'
+					);
+				}
+			} );
+
 			function createInsertMenu() {
 				var insertMenu = editor.wp._createToolbar( ( function() {
 					var allSettings = wp.blocks.getBlocks();
 					var buttons = [];
 					var key;
+					var types = [ 'text', 'media', 'separator' ];
+
+					types.forEach( function( type ) {
+						buttons.push( {
+							type: 'WPInsertSeparator',
+							text: type
+						} );
 
-					for ( key in allSettings ) {
-						if ( allSettings[ key ].insert ) {
-							buttons.push( {
-								text: allSettings[ key ].displayName,
-								icon: allSettings[ key ].icon,
-								onClick: allSettings[ key ].insert
-							} );
+						for ( key in allSettings ) {
+							if ( allSettings[ key ].type === type ) {
+								buttons.push( {
+									text: allSettings[ key ].displayName,
+									icon: allSettings[ key ].icon,
+									onClick: allSettings[ key ].insert
+								} );
+							}
 						}
-					}
+					} );
 
 					return buttons;
 				} )() );