Merge pull request #211 from WordPress/add/tinymce-single/insert

Update single MCE inserter

Author: ellatrix

shared/index.css

@@ -26,6 +26,7 @@ body {
 
 #editor {
 	font-family: "Noto Serif", serif;
+	font-size: 16px;
 	outline: none;
 	padding: 50px;
 }
@@ -84,11 +85,6 @@ body {
 	font-size: 28px;
 }
 
-#editor p {
-	font-size: 16px;
-	min-height: 3.4em;
-}
-
 #editor blockquote {
 	font-size: 20px;
 	border-left: 4px solid black;

tinymce-single/blocks.js

@@ -4,19 +4,23 @@
 	_blocks = {};
 	_controls = {};
 
+	var _elementMap = {};
+
 	wp.blocks = {
 		registerBlock: function( settings ) {
 			// Note, elements should probably only be registered by core.
 			// Maybe for each block, we should offer to extend the settings (add buttons).
 
+			var namespace = settings.namespace || 'elements';
+			var id = namespace + ':' + settings.name;
+
+			_blocks[ id ] = settings;
+			_blocks[ id ]._id = id;
+
 			if ( settings.elements ) {
 				settings.elements.forEach( function( element ) {
-					_blocks[ 'element:' + element ] = settings;
-					_blocks[ 'element:' + element ]._id = 'element:' + element;
+					_elementMap[ element ] = id;
 				} );
-			} else if ( settings.namespace && settings.name ) {
-				_blocks[ settings.namespace + ':' + settings.name ] = settings;
-				_blocks[ settings.namespace + ':' + settings.name ]._id = settings.namespace + ':' + settings.name;
 			}
 		},
 		registerControl: function( name, settings ) {
@@ -29,10 +33,13 @@
 			return _controls[ name ];
 		},
 		getBlockSettingsByElement: function( element ) {
-			var blockType = element.getAttribute( 'data-wp-block-type' );
-			var nodeName = element.nodeName.toLowerCase();
+			var id = element.getAttribute( 'data-wp-block-type' );
+
+			if ( ! id ) {
+				id = _elementMap[ element.nodeName.toLowerCase() ];
+			}
 
-			return this.getBlockSettings( blockType || 'element:' + nodeName );
+			return this.getBlockSettings( id );
 		},
 		getBlocks: function() {
 			return _blocks;

tinymce-single/blocks/core/gallery/register.js

@@ -1,7 +1,8 @@
 window.wp.blocks.registerBlock( {
 	name: 'gallery',
 	namespace: 'core',
-	type: 'image',
+	displayName: 'Gallery',
+	type: 'media',
 	keywords: [],
 	icon: 'gridicons-image-multiple',
 	controls: [
@@ -24,5 +25,8 @@ window.wp.blocks.registerBlock( {
 		{
 			icon: 'gridicons-cog'
 		}
-	]
+	],
+	insert: function( block, editor ) {
+
+	}
 } );

tinymce-single/blocks/core/image/register.js

@@ -1,13 +1,17 @@
 window.wp.blocks.registerBlock( {
 	name: 'image',
 	namespace: 'core',
-	type: 'image',
+	displayName: 'Image',
+	type: 'media',
 	icon: 'gridicons-image',
 	controls: [
 		'block-align-left',
 		'block-align-center',
 		'block-align-right',
 		'block-align-full',
 		'togglefigcaption'
-	]
+	],
+	insert: function( block, editor ) {
+
+	}
 } );

tinymce-single/blocks/elements/blockquote/register.js

@@ -1,4 +1,6 @@
 window.wp.blocks.registerBlock( {
+	name: 'blockquote',
+	displayName: 'Quote',
 	elements: [ 'blockquote' ],
 	type: 'text',
 	icon: 'gridicons-quote',

tinymce-single/blocks/elements/headings/register.js

@@ -27,9 +27,14 @@
 	}
 
 	wp.blocks.registerBlock( {
+		name: 'heading',
+		displayName: 'Heading',
 		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		type: 'text',
 		icon: 'gridicons-heading',
-		controls: getControls()
+		controls: getControls(),
+		insert: function() {
+
+		}
 	} );
 } )( window.wp );

tinymce-single/blocks/elements/horizontal-rule/register.js

@@ -1,4 +1,6 @@
 window.wp.blocks.registerBlock( {
+	name: 'hortizontal-rule',
+	displayName: 'Horizontal Rule',
 	elements: [ 'hr' ],
 	type: 'separator',
 	icon: 'gridicons-minus',

tinymce-single/blocks/elements/lists/register.js

@@ -1,4 +1,6 @@
 window.wp.blocks.registerBlock( {
+	name: 'list',
+	displayName: 'List',
 	elements: [ 'ul', 'ol' ],
 	type: 'text',
 	icon: 'gridicons-list-unordered',
@@ -28,5 +30,8 @@ window.wp.blocks.registerBlock( {
 				}
 			}
 		}
-	]
+	],
+	insert: function( block, editor ) {
+		editor.execCommand( 'InsertUnorderedList' );
+	}
 } );

tinymce-single/blocks/elements/paragraph/register.js

@@ -1,4 +1,6 @@
 window.wp.blocks.registerBlock( {
+	name: 'paragraph',
+	displayName: 'Paragraph',
 	elements: [ 'p' ],
 	type: 'text',
 	icon: 'gridicons-posts',
@@ -30,5 +32,8 @@ window.wp.blocks.registerBlock( {
 		'text-align-left',
 		'text-align-center',
 		'text-align-right'
-	]
+	],
+	insert: function( block, editor ) {
+		editor.formatter.apply( 'paragraph', block );
+	}
 } );

tinymce-single/blocks/elements/preformatted/register.js

@@ -1,4 +1,6 @@
 window.wp.blocks.registerBlock( {
+	name: 'preformatted',
+	displayName: 'Preformatted',
 	elements: [ 'pre' ],
 	type: 'text',
 	icon: 'gridicons-code',
@@ -13,5 +15,8 @@ window.wp.blocks.registerBlock( {
 				editor.formatter.remove( 'pre' );
 			}
 		}
-	]
+	],
+	insert: function( block, editor ) {
+		editor.formatter.apply( 'pre' );
+	}
 } );

tinymce-single/blocks/my-awesome-plugin/youtube/register.js

@@ -1,7 +1,8 @@
 window.wp.blocks.registerBlock( {
 	name: 'youtube',
 	namespace: 'my-awesome-plugin',
-	type: 'video',
+	displayName: 'YouTube Video',
+	type: 'media',
 	keywords: [],
 	icon: 'gridicons-video',
 	controls: [
@@ -12,5 +13,8 @@ window.wp.blocks.registerBlock( {
 		{
 			icon: 'gridicons-cog'
 		}
-	]
+	],
+	insert: function( block, editor ) {
+
+	}
 } );

tinymce-single/tinymce/block.css

@@ -250,3 +250,32 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 	background: #fff;
 	border-radius: 12px;
 }
+
+.insert-menu {
+	width: 330px;
+}
+
+.insert-menu .mce-btn {
+	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;
+	vertical-align: inherit;
+	width: auto;
+	line-height: 16px;
+	width: 120px;
+	padding: 4px;
+}
+
+.insert-menu .mce-btn-has-text svg.gridicons-heading {
+	margin: 0;
+}

tinymce-single/tinymce/block.js

@@ -258,29 +258,44 @@
 				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' ];
 
-					for ( key in allSettings ) {
-						if ( allSettings[ key ].insert ) {
-							buttons.push( {
-								icon: allSettings[ key ].icon,
-								onClick: allSettings[ key ].insert
-							} );
-						}
-					}
+					types.forEach( function( type ) {
+						buttons.push( {
+							type: 'WPInsertSeparator',
+							text: type
+						} );
 
-					buttons.push( {
-						text: 'Work in progress',
-						onClick: function() {}
+						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;
 				} )() );
 
+				insertMenu.$el.addClass( 'insert-menu' );
+
 				insertMenu.reposition = function () {
 					var toolbar = this.getEl();
 					var toolbarRect = toolbar.getBoundingClientRect();