Single TinyMCE: Add TinyMCE-unaware control registration APIs

tinymce-single/blocks.js

@@ -0,0 +1,44 @@
+( function( wp ) {
+	var _blocks, _controls;
+
+	_blocks = {};
+	_controls = {};
+
+	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).
+
+			if ( settings.elements ) {
+				settings.elements.forEach( function( element ) {
+					_blocks[ 'element:' + element ] = settings;
+					_blocks[ 'element:' + element ]._id = 'element:' + element;
+				} );
+			} 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 ) {
+			_controls[ name ] = settings;
+		},
+		getBlockSettings: function( name ) {
+			return _blocks[ name ];
+		},
+		getControlSettings: function( name ) {
+			return _controls[ name ];
+		},
+		getBlockSettingsByElement: function( element ) {
+			var blockType = element.getAttribute( 'data-wp-block-type' );
+			var nodeName = element.nodeName.toLowerCase();
+
+			return this.getBlockSettings( blockType || 'element:' + nodeName );
+		},
+		getBlocks: function() {
+			return _blocks;
+		},
+		getControls: function() {
+			return _controls;
+		}
+	};
+} )( window.wp = window.wp || {} );

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

@@ -1,10 +1,10 @@
-window.wp.blocks.register( {
+window.wp.blocks.registerBlock( {
 	name: 'gallery',
 	namespace: 'core',
 	type: 'image',
 	keywords: [],
 	icon: 'gridicons-image-multiple',
-	buttons: [
+	controls: [
 		'block-align-left',
 		'block-align-center',
 		'block-align-right',

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

@@ -1,9 +1,9 @@
-window.wp.blocks.register( {
+window.wp.blocks.registerBlock( {
 	name: 'image',
 	namespace: 'core',
 	type: 'image',
 	icon: 'gridicons-image',
-	buttons: [
+	controls: [
 		'block-align-left',
 		'block-align-center',
 		'block-align-right',

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

@@ -1,8 +1,8 @@
-window.wp.blocks.register( {
+window.wp.blocks.registerBlock( {
 	elements: [ 'blockquote' ],
 	type: 'text',
 	icon: 'gridicons-quote',
-	buttons: [
+	controls: [
 		{
 			classes: 'remove-formatting',
 			icon: 'gridicons-quote',

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

@@ -1,9 +1,9 @@
-( function( register ) {
-	function getButtons() {
-		var buttons = [];
+( function( wp ) {
+	function getControls() {
+		var controls = [];
 
 		'123456'.split( '' ).forEach( function( level ) {
-			buttons.push( {
+			controls.push( {
 				icon: 'gridicons-heading',
 				text: level,
 				stateSelector: 'h' + level,
@@ -13,23 +13,23 @@
 			} );
 		} );
 
-		buttons.push( {
+		controls.push( {
 			classes: 'remove-formatting',
 			icon: 'gridicons-heading',
 			onClick: function( editor, element ) {
 				editor.formatter.apply( 'p', element );
 			}
 		} );
 
-		buttons.push( 'text-align-center' );
+		controls.push( 'text-align-left', 'text-align-center', 'text-align-right' );
 
-		return buttons;
+		return controls;
 	}
 
-	register( {
+	wp.blocks.registerBlock( {
 		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		type: 'text',
 		icon: 'gridicons-heading',
-		buttons: getButtons()
+		controls: getControls()
 	} );
-} )( window.wp.blocks.register );
+} )( window.wp );

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

@@ -1,10 +1,7 @@
-window.wp.blocks.register( {
+window.wp.blocks.registerBlock( {
 	elements: [ 'hr' ],
 	type: 'separator',
 	icon: 'gridicons-minus',
-	buttons: [
-
-	],
 	insert: function( editor, element ) {
 		element.parentNode.replaceChild( document.createElement( 'hr' ), element );
 	}

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

@@ -1,8 +1,8 @@
-window.wp.blocks.register( {
+window.wp.blocks.registerBlock( {
 	elements: [ 'ul', 'ol' ],
 	type: 'text',
 	icon: 'gridicons-list-unordered',
-	buttons: [
+	controls: [
 		{
 			icon: 'gridicons-list-unordered',
 			stateSelector: 'ul',

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

@@ -1,8 +1,8 @@
-window.wp.blocks.register( {
+window.wp.blocks.registerBlock( {
 	elements: [ 'p' ],
 	type: 'text',
 	icon: 'gridicons-posts',
-	buttons: [
+	controls: [
 		{
 			icon: 'gridicons-heading',
 			onClick: function( editor ) {
@@ -27,6 +27,8 @@ window.wp.blocks.register( {
 				editor.formatter.apply( 'pre' );
 			}
 		},
-		'text-align-center'
+		'text-align-left',
+		'text-align-center',
+		'text-align-right'
 	]
 } );

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

@@ -1,8 +1,8 @@
-window.wp.blocks.register( {
+window.wp.blocks.registerBlock( {
 	elements: [ 'pre' ],
 	type: 'text',
 	icon: 'gridicons-code',
-	buttons: [
+	controls: [
 		{
 			icon: 'gridicons-cog'
 		},

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

@@ -1,10 +1,10 @@
-window.wp.blocks.register( {
+window.wp.blocks.registerBlock( {
 	name: 'youtube',
 	namespace: 'my-awesome-plugin',
 	type: 'video',
 	keywords: [],
 	icon: 'gridicons-video',
-	buttons: [
+	controls: [
 		'block-align-left',
 		'block-align-center',
 		'block-align-right',

tinymce-single/controls/align.js

@@ -0,0 +1,45 @@
+( function( wp, $ ) {
+	var RX_ALIGN_CLASSNAME = /^(text-align-|align)([\w-]+)/;
+
+	function createOnClick( classNamePrefix, position ) {
+		return function( node ) {
+			return $( node )
+				.removeClass( function( i, className ) {
+					return RX_ALIGN_CLASSNAME.test( className ) ? className : '';
+				} )
+				.addClass( classNamePrefix + position );
+		};
+	}
+
+	function createIsActive( classNamePrefix, position ) {
+		return function( node ) {
+			var classNames = node.className.split( ' ' ),
+				i, className, match;
+
+			for ( i = 0; i < classNames.length; i++ ) {
+				className = classNames[ i ];
+				match = className.match( RX_ALIGN_CLASSNAME );
+
+				if ( match && classNamePrefix === match[ 1 ] ) {
+					return position === match[ 2 ];
+				}
+			}
+
+			return 'left' === position;
+		};
+	}
+
+	[ 'left', 'center', 'right' ].forEach( function( position ) {
+		wp.blocks.registerControl( 'text-align-' + position, {
+			icon: 'gridicons-align-' + position,
+			onClick: createOnClick( 'text-align-', position ),
+			isActive: createIsActive( 'text-align-', position )
+		} );
+
+		wp.blocks.registerControl( 'block-align-' + position, {
+			icon: 'gridicons-align-image-' + position,
+			onClick: createOnClick( 'align', position ),
+			isActive: createIsActive( 'align', position )
+		} );
+	} );
+} )( window.wp = window.wp || {}, window.jQuery );

tinymce-single/index.html

@@ -64,7 +64,11 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 
 		<script src="../shared/navigation.js"></script>
 
-		<script src="blocks/index.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>
+
+		<script src="blocks.js"></script>
 		<script src="blocks/core/image/register.js"></script>
 		<script src="blocks/core/gallery/register.js"></script>
 		<script src="blocks/elements/blockquote/register.js"></script>
@@ -74,8 +78,7 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 		<script src="blocks/elements/paragraph/register.js"></script>
 		<script src="blocks/elements/preformatted/register.js"></script>
 		<script src="blocks/my-awesome-plugin/youtube/register.js"></script>
-
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>
+		<script src="controls/align.js"></script>
 
 		<script src="../shared/tinymce/clean-paste.js"></script>
 		<script src="../shared/tinymce/toolbar.js"></script>