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

Tinymce single/mimic ui prototype
WordPress · Feb 28, 2017 · 88c99a9 · 88c99a9
2 parents b1ca710 + 97bfdcd
commit 88c99a9
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 132 deletions.
diff --git a/shared/index.css b/shared/index.css
@@ -15,6 +15,18 @@ body {
 	width: 37.5em;
 }
 
+#editor .text-align-left {
+	text-align: left;
+}
+
+#editor .text-align-center {
+	text-align: center;
+}
+
+#editor .text-align-right {
+	text-align: right;
+}
+
 #editor a {
 	color: inherit;
 }

diff --git a/tinymce-single/blocks/elements/headings/register.js b/tinymce-single/blocks/elements/headings/register.js
@@ -1,13 +1,14 @@
 ( function( register ) {
 	function getButtons() {
 		var buttons = [
-			'alignleft',
-			'aligncenter',
-			'alignright'
+			'text-align-left',
+			'text-align-center',
+			'text-align-right'
 		];
 
 		'123456'.split( '' ).forEach( function( level ) {
 			buttons.push( {
+				icon: 'gridicons-heading',
 				text: level,
 				stateSelector: 'h' + level,
 				onClick: function( editor, element ) {

diff --git a/tinymce-single/blocks/elements/lists/register.js b/tinymce-single/blocks/elements/lists/register.js
@@ -3,20 +3,28 @@ window.wp.blocks.register( {
 	type: 'text',
 	icon: 'gridicons-list-unordered',
 	buttons: [
-		'bullist',
-		'numlist',
+		{
+			icon: 'gridicons-list-unordered',
+			stateSelector: 'ul',
+			onClick: function( editor, element ) {
+				editor.execCommand( 'InsertUnorderedList' );
+			}
+		},
+		{
+			icon: 'gridicons-list-ordered',
+			stateSelector: 'ol',
+			onClick: function( editor, element ) {
+				editor.execCommand( 'InsertOrderedList' );
+			}
+		},
 		{
 			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();
 			}
 		}
 	]

diff --git a/tinymce-single/blocks/elements/paragraph/register.js b/tinymce-single/blocks/elements/paragraph/register.js
@@ -3,9 +3,9 @@ window.wp.blocks.register( {
 	type: 'text',
 	icon: 'gridicons-posts',
 	buttons: [
-		'alignleft',
-		'aligncenter',
-		'alignright',
+		'text-align-left',
+		'text-align-center',
+		'text-align-right',
 		{
 			icon: 'gridicons-heading',
 			onClick: function( editor ) {
@@ -18,7 +18,12 @@ window.wp.blocks.register( {
 				editor.formatter.apply( 'blockquote' );
 			}
 		},
-		'bullist',
+		{
+			icon: 'gridicons-list-unordered',
+			onClick: function( editor, element ) {
+				editor.execCommand( 'InsertUnorderedList' );
+			}
+		},
 		{
 			icon: 'gridicons-code',
 			onClick: function( editor ) {

diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -153,13 +153,15 @@ svg.gridicon {
 }
 
 .mce-btn .mce-txt {
-	display: block;
-	height: 24px;
-	min-width: 24px;
+	display: inline-block;
+	font-size: 12px;
 	text-align: center;
-	font-size: 18px;
-	font-weight: 500;
-	line-height: 24px;
+	vertical-align: bottom;
+	width: 6px;
+}
+
+.mce-btn-has-text svg.gridicons-heading {
+	margin: 0 -4px 0 -2px;
 }
 
 .mce-btn select {

diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -1,141 +1,138 @@
 ( function( tinymce, wp ) {
 	tinymce.PluginManager.add( 'block', function( editor ) {
-		function focusToolbar( toolbar ) {
-			var node = toolbar.find( 'toolbar' )[0];
-			node && node.focus( true );
-		}
+
+		// Set focussed block. Global variable for now. Top-level node for now.
 
 		editor.on( 'nodechange', function( event ) {
 			window.element = event.parents[ event.parents.length - 1 ];
 		} );
 
-		editor.on( 'preinit', function() {
-			var DOM = tinymce.DOM;
-			var blockToolbar;
-			var blockToolbars = {};
+		// Global buttons.
 
-			editor.addCommand( 'alignleft', function() {
-				editor.formatter.remove( 'alignleft' );
-				editor.formatter.remove( 'aligncenter' );
-				editor.formatter.remove( 'alignright' );
+		tinymce.each( [ 'left', 'center', 'right' ], function( position ) {
+			editor.addCommand( 'text-align-' + position, function() {
+				tinymce.each( [ 'left', 'center', 'right' ], function( position ) {
+					editor.$( element ).removeClass( 'text-align-' + position );
+				} );
 
-				editor.nodeChanged();
-			});
+				if ( position !== 'left' ) {
+					editor.$( element ).addClass( 'text-align-' + position );
+					editor.nodeChanged();
+				}
+			} );
 
-			editor.addButton( 'alignleft', {
-				icon: 'gridicons-align-left',
-				cmd: 'alignleft',
-				onpostrender: function() {
+			editor.addButton( 'text-align-' + position, {
+				icon: 'gridicons-align-' + position,
+				cmd: 'text-align-' + position,
+				onPostRender: function() {
 					var button = this;
 
 					editor.on( 'nodechange', function( event ) {
-						button.active( ! editor.formatter.matchNode( element, 'aligncenter' ) &&
-							! editor.formatter.matchNode( element, 'alignright' ) );
+						$element = editor.$( element );
+
+						if ( position === 'left' ) {
+							button.active( ! (
+								$element.hasClass( 'text-align-center' ) || $element.hasClass( 'text-align-right' )
+							) );
+						} else {
+							button.active( $element.hasClass( 'text-align-' + position ) );
+						}
 					} );
 				}
 			} );
 
-			// Adjust icon of TinyMCE core buttons.
-			editor.buttons.aligncenter.icon = 'gridicons-align-center';
-			editor.buttons.alignright.icon = 'gridicons-align-right';
-			editor.buttons.bullist.icon = 'gridicons-list-unordered';
-			editor.buttons.numlist.icon = 'gridicons-list-ordered';
-
-			editor.buttons.bold.icon = 'gridicons-bold';
-			editor.buttons.italic.icon = 'gridicons-italic';
-			editor.buttons.strikethrough.icon = 'gridicons-strikethrough';
-			editor.buttons.link.icon = 'gridicons-link';
-
-			tinymce.each( [ 'left', 'center', 'right' ], function( position ) {
-				editor.addCommand( 'block-align-' + position, function() {
-					tinymce.each( [ 'left', 'center', 'right' ], function( position ) {
-						editor.$( element ).removeClass( 'align' + position );
-					} );
-
-					editor.$( element ).addClass( 'align' + position );
-
-					editor.nodeChanged();
+			editor.addCommand( 'block-align-' + position, function() {
+				tinymce.each( [ 'left', 'center', 'right' ], function( position ) {
+					editor.$( element ).removeClass( 'align' + position );
 				} );
 
-				editor.addButton( 'block-align-' + position, {
-					icon: 'gridicons-align-image-' + position,
-					cmd: 'block-align-' + position,
-					onPostRender: function() {
-						var button = this;
-
-						editor.on( 'nodechange', function( event ) {
-							$element = editor.$( element );
-
-							if ( position === 'center' ) {
-								button.active( ! (
-									$element.hasClass( 'alignleft' ) || $element.hasClass( 'alignright' )
-								) );
-							} else {
-								button.active( $element.hasClass( 'align' + position ) );
-							}
-						} );
-					}
-				} );
+				editor.$( element ).addClass( 'align' + position );
+				editor.nodeChanged();
 			} );
 
-			editor.addCommand( 'addfigcaption', function() {
-				if ( ! editor.$( element ).find( 'figcaption' ).length ) {
-					var figcaption = editor.$( '<figcaption><br></figcaption>' );
+			editor.addButton( 'block-align-' + position, {
+				icon: 'gridicons-align-image-' + position,
+				cmd: 'block-align-' + position,
+				onPostRender: function() {
+					var button = this;
 
-					editor.undoManager.transact( function() {
-						editor.$( element ).append( figcaption );
-						editor.selection.setCursorLocation( figcaption[0], 0 );
+					editor.on( 'nodechange', function( event ) {
+						$element = editor.$( element );
+
+						if ( position === 'center' ) {
+							button.active( ! (
+								$element.hasClass( 'alignleft' ) || $element.hasClass( 'alignright' )
+							) );
+						} else {
+							button.active( $element.hasClass( 'align' + position ) );
+						}
 					} );
 				}
 			} );
+		} );
 
-			editor.addCommand( 'removefigcaption', function() {
-				var figcaption = editor.$( element ).find( 'figcaption' );
+		editor.addCommand( 'addfigcaption', function() {
+			if ( ! editor.$( element ).find( 'figcaption' ).length ) {
+				var figcaption = editor.$( '<figcaption><br></figcaption>' );
 
-				if ( figcaption.length ) {
-					editor.undoManager.transact( function() {
-						figcaption.remove();
-					} );
-				}
-			} );
+				editor.undoManager.transact( function() {
+					editor.$( element ).append( figcaption );
+					editor.selection.setCursorLocation( figcaption[0], 0 );
+				} );
+			}
+		} );
 
-			editor.addCommand( 'togglefigcaption', function() {
-				if ( editor.$( element ).find( 'figcaption' ).length ) {
-					editor.execCommand( 'removefigcaption' );
-				} else {
-					editor.execCommand( 'addfigcaption' );
-				}
-			} );
+		editor.addCommand( 'removefigcaption', function() {
+			var figcaption = editor.$( element ).find( 'figcaption' );
 
-			editor.addButton( 'togglefigcaption', {
-				icon: 'gridicons-caption',
-				cmd: 'togglefigcaption',
-				onPostRender: function() {
-					var button = this;
+			if ( figcaption.length ) {
+				editor.undoManager.transact( function() {
+					figcaption.remove();
+				} );
+			}
+		} );
 
-					editor.on( 'nodechange', function( event ) {
-						var element = event.parents[ event.parents.length - 1 ];
+		editor.addCommand( 'togglefigcaption', function() {
+			if ( editor.$( element ).find( 'figcaption' ).length ) {
+				editor.execCommand( 'removefigcaption' );
+			} else {
+				editor.execCommand( 'addfigcaption' );
+			}
+		} );
 
-						button.active( editor.$( element ).find( 'figcaption' ).length > 0 );
-					} );
-				}
-			} );
+		editor.addButton( 'togglefigcaption', {
+			icon: 'gridicons-caption',
+			cmd: 'togglefigcaption',
+			onPostRender: function() {
+				var button = this;
 
-			editor.addCommand( 'selectblock', function() {} );
+				editor.on( 'nodechange', function( event ) {
+					var element = event.parents[ event.parents.length - 1 ];
 
-			editor.addButton( 'moveblock', {
-				icon: 'gridicons-reblog',
-				onclick: function() {
-					editor.$( element ).attr( 'data-mce-selected', 'move' );
-					editor.$( editor.getBody() ).addClass( 'is-moving-block' );
-					editor.nodeChanged();
-				}
-			} );
+					button.active( editor.$( element ).find( 'figcaption' ).length > 0 );
+				} );
+			}
+		} );
+
+		// Attach block UI.
+
+		editor.on( 'preinit', function() {
+			var DOM = tinymce.DOM;
+			var blockToolbar;
+			var blockToolbars = {};
+
+			// editor.addButton( 'moveblock', {
+			// 	icon: 'gridicons-reblog',
+			// 	onclick: function() {
+			// 		editor.$( element ).attr( 'data-mce-selected', 'move' );
+			// 		editor.$( editor.getBody() ).addClass( 'is-moving-block' );
+			// 		editor.nodeChanged();
+			// 	}
+			// } );
 
 			editor.addButton( 'block', {
 				icon: 'gridicons-posts',
 				tooltip: 'Add Block',
-				cmd: 'selectblock',
 				onPostRender: function() {
 					var button = this;
 
@@ -205,6 +202,12 @@
 				tooltip: 'Add Block'
 			} );
 
+			// Adjust icon of TinyMCE core buttons.
+			editor.buttons.bold.icon = 'gridicons-bold';
+			editor.buttons.italic.icon = 'gridicons-italic';
+			editor.buttons.strikethrough.icon = 'gridicons-strikethrough';
+			editor.buttons.link.icon = 'gridicons-link';
+
 			var toolbarInline = editor.wp._createToolbar( [ 'bold', 'italic', 'strikethrough', 'link' ] );
 			var toolbarCaret = editor.wp._createToolbar( [ 'add' ] );
 			blockToolbar = editor.wp._createToolbar( [ 'up', 'block', 'down' ] );
@@ -313,6 +316,11 @@
 				} );
 			}
 
+			function focusToolbar( toolbar ) {
+				var node = toolbar.find( 'toolbar' )[0];
+				node && node.focus( true );
+			}
+
 			function showBlockUI( focus ) {
 				var settings = wp.blocks.getSettingsByElement( element );