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' );
+	}
 } );