From 0f53bd78bf45a8318e2c626fe9b777d3f012e6db Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Wed, 8 Mar 2017 17:25:41 +0100
Subject: [PATCH] Add insert menu separators

---
 .../blocks/core/gallery/register.js           |  2 +-
 tinymce-single/blocks/core/image/register.js  |  2 +-
 .../my-awesome-plugin/youtube/register.js     |  2 +-
 tinymce-single/tinymce/block.css              | 11 +++++++
 tinymce-single/tinymce/block.js               | 33 ++++++++++++++-----
 5 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/tinymce-single/blocks/core/gallery/register.js b/tinymce-single/blocks/core/gallery/register.js
index 047c029aea6d8..075aa079fdf74 100644
--- 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
index 191da6ac9ac33..68bc3ad1d1035 100644
--- 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
index bab44c795e16c..de35e3969460d 100644
--- 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
index 5a0bce7534929..77bb30bf29f7c 100644
--- 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
index cad1bef837bf0..a5892e1ddb0e4 100644
--- 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;
 				} )() );