Merge pull request #142 from WordPress/tinymce-single/mimic-ui-prototype

TinyMCE single/mimic ui prototype

shared/index.css

@@ -30,6 +30,7 @@ body {
 }
 
 #editor figure {
+	clear: both;
 	float: none;
 	margin: 1em 0;
 	width: 100%;
@@ -53,6 +54,11 @@ body {
 	width: 50%;
 }
 
+#editor figure.alignleft,
+#editor figure.alignright {
+	clear: none;
+}
+
 #editor figcaption {
 	font-size: 0.8em;
 	margin-top: 0.5em;

shared/tinymce/toolbar.js

@@ -72,6 +72,12 @@
 				each( buttons, function( item ) {
 					var itemName;
 
+					function onClick( callback ) {
+						return function() {
+							callback( editor, window.element );
+						}
+					}
+
 					function bindSelectorChanged() {
 						var selection = editor.selection;
 
@@ -125,7 +131,7 @@
 					if ( item === '|' ) {
 						buttonGroup = null;
 					} else {
-						if ( Factory.has( item ) ) {
+						if ( typeof item === 'string' && Factory.has( item ) ) {
 							item = {
 								type: item
 							};
@@ -148,13 +154,16 @@
 							}
 
 							if ( editor.buttons[ item ] ) {
-								itemName = item;
-								item = editor.buttons[ itemName ];
+								item = editor.buttons[ item ];
+							} else {
+								item.onClick = onClick( item.onClick );
+							}
 
-								if ( typeof item === 'function' ) {
-									item = item();
-								}
+							if ( typeof item === 'function' ) {
+								item = item();
+							}
 
+							if ( item ) {
 								item.type = item.type || 'svgbutton';
 
 								if ( settings.toolbar_items_size ) {

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

@@ -20,6 +20,8 @@ window.wp.blocks.register( {
 		// 		// body...
 		// 	}
 		// },
-		'block-options'
+		{
+			icon: 'gridicons-cog'
+		}
 	]
 } );

tinymce-single/blocks/core/gallery/structure.css

@@ -1,4 +1,5 @@
 #editor figure[data-wp-block-type="core:gallery"] {
+	clear: both;
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -22,6 +23,11 @@
 	width: 50%;
 }
 
+#editor figure[data-wp-block-type="core:gallery"].alignleft,
+#editor figure[data-wp-block-type="core:gallery"].alignright {
+	clear: none;
+}
+
 #editor figure[data-wp-block-type="core:gallery"] figure {
 	margin: 0;
 }

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

@@ -0,0 +1,12 @@
+window.wp.blocks.register( {
+	name: 'image',
+	namespace: 'core',
+	type: 'image',
+	icon: 'gridicons-image',
+	buttons: [
+		'block-align-left',
+		'block-align-center',
+		'block-align-right',
+		'togglefigcaption'
+	]
+} );

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

@@ -0,0 +1,14 @@
+window.wp.blocks.register( {
+	elements: [ 'blockquote' ],
+	type: 'text',
+	icon: 'gridicons-quote',
+	buttons: [
+		{
+			icon: 'gridicons-posts',
+			onClick: function( editor ) {
+				editor.formatter.remove( 'blockquote' );
+			}
+		}
+	]
+} );
+

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

@@ -0,0 +1,35 @@
+( function( register ) {
+	function getButtons() {
+		var buttons = [
+			'alignleft',
+			'aligncenter',
+			'alignright'
+		];
+
+		'123456'.split( '' ).forEach( function( level ) {
+			buttons.push( {
+				text: level,
+				stateSelector: 'h' + level,
+				onClick: function( editor, element ) {
+					editor.formatter.apply( 'h' + level, element );
+				}
+			} );
+		} );
+
+		buttons.push( {
+			icon: 'gridicons-posts',
+			onClick: function( editor, element ) {
+				editor.formatter.apply( 'p', element );
+			}
+		} );
+
+		return buttons;
+	}
+
+	register( {
+		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+		type: 'text',
+		icon: 'gridicons-heading',
+		buttons: getButtons()
+	} );
+} )( window.wp.blocks.register );

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

@@ -0,0 +1,23 @@
+window.wp.blocks.register( {
+	elements: [ 'ul', 'ol' ],
+	type: 'text',
+	icon: 'gridicons-list-unordered',
+	buttons: [
+		'bullist',
+		'numlist',
+		{
+			icon: 'gridicons-posts',
+			onClick: function( editor, element ) {
+				editor.selection.select( element );
+
+				if ( element.nodeName === 'UL' ) {
+					editor.execCommand( 'InsertUnorderedList' );
+				} else if ( element.nodeName === 'OL' ) {
+					editor.execCommand( 'InsertOrderedList' );
+				}
+
+				editor.nodeChanged();
+			}
+		}
+	]
+} );

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

@@ -0,0 +1,29 @@
+window.wp.blocks.register( {
+	elements: [ 'p' ],
+	type: 'text',
+	icon: 'gridicons-posts',
+	buttons: [
+		'alignleft',
+		'aligncenter',
+		'alignright',
+		{
+			icon: 'gridicons-heading',
+			onClick: function( editor ) {
+				editor.formatter.apply( 'h1' );
+			}
+		},
+		{
+			icon: 'gridicons-quote',
+			onClick: function( editor ) {
+				editor.formatter.apply( 'blockquote' );
+			}
+		},
+		'bullist',
+		{
+			icon: 'gridicons-code',
+			onClick: function( editor ) {
+				editor.formatter.apply( 'pre' );
+			}
+		}
+	]
+} );

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

@@ -0,0 +1,16 @@
+window.wp.blocks.register( {
+	elements: [ 'pre' ],
+	type: 'text',
+	icon: 'gridicons-code',
+	buttons: [
+		{
+			text: 'syntax'
+		},
+		{
+			icon: 'gridicons-posts',
+			onClick: function( editor ) {
+				editor.formatter.remove( 'pre' );
+			}
+		}
+	]
+} );

tinymce-single/blocks/index.js

@@ -0,0 +1,29 @@
+( function( wp ) {
+	var _settings = {};
+
+	wp.blocks = {
+		register: 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 ) {
+					_settings[ 'element:' + element ] = settings;
+					_settings[ 'element:' + element ]._id = 'element:' + element;
+				} );
+			} else if ( settings.namespace && settings.name ) {
+				_settings[ settings.namespace + ':' + settings.name ] = settings;
+				_settings[ settings.namespace + ':' + settings.name ]._id = settings.namespace + ':' + settings.name;
+			}
+		},
+		getSettings: function( id ) {
+			return _settings[ id ];
+		},
+		getSettingsByElement( element ) {
+			var blockType = element.getAttribute( 'data-wp-block-type' );
+			var nodeName = element.nodeName.toLowerCase();
+
+			return this.getSettings( blockType || 'element:' + nodeName );
+		}
+	};
+} )( window.wp = window.wp || {} );

tinymce-single/index.html

@@ -51,9 +51,19 @@ <h1>1.0 Is The Loneliest Number</h1>
 
 		</div>
 
+		<script src="../shared/navigation.js"></script>
+
+		<script src="blocks/index.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>
+		<script src="blocks/elements/headings/register.js"></script>
+		<script src="blocks/elements/lists/register.js"></script>
+		<script src="blocks/elements/paragraph/register.js"></script>
+		<script src="blocks/elements/preformatted/register.js"></script>
+
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>
 
-		<script src="../shared/navigation.js"></script>
 		<script src="../shared/tinymce/clean-paste.js"></script>
 		<script src="../shared/tinymce/toolbar.js"></script>
 		<script src="../shared/tinymce/wplink.js"></script>
@@ -62,7 +72,5 @@ <h1>1.0 Is The Loneliest Number</h1>
 		<link rel="stylesheet" type="text/css" href="tinymce/block.css">
 		<script src="tinymce/block.js"></script>
 		<script src="tinymce/config.js"></script>
-
-		<script src="blocks/core/gallery/register.js"></script>
 	</body>
 </html>

tinymce-single/tinymce/block.css

@@ -6,7 +6,7 @@
 	background-color: transparent;
 }
 
-#editor *[data-mce-selected="block"] {
+#editor.wp-edit-focus *[data-mce-selected="block"] {
 	outline: 2px solid #e0e5e9;
 	outline-offset: 11px;
 	/*background-color: rgba( 135, 166, 188, 0.3 );