Register element block group and create separate map

Author: ellatrix

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/elements/blockquote/register.js

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

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

@@ -27,10 +27,14 @@
 	}
 
 	wp.blocks.registerBlock( {
-		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+		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,7 +1,8 @@
 window.wp.blocks.registerBlock( {
+	name: 'hortizontal-rule',
+	displayName: 'Horizontal Rule',
 	elements: [ 'hr' ],
 	type: 'separator',
-	displayName: 'Horizontal Rule',
 	icon: 'gridicons-minus',
 	insert: function( block ) {
 		block.parentNode.replaceChild( document.createElement( 'hr' ), block );

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,7 +1,8 @@
 window.wp.blocks.registerBlock( {
+	name: 'paragraph',
+	displayName: 'Paragraph',
 	elements: [ 'p' ],
 	type: 'text',
-	displayName: 'Paragraph',
 	icon: 'gridicons-posts',
 	controls: [
 		{

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