Merge pull request #252 from WordPress/update/tinymce-single/mock-ups

update/tinymce-single/mock-ups

shared/index.css

@@ -148,6 +148,8 @@ body {
 
 #editor figcaption {
 	margin-top: 0.5em;
+	font-size: 0.9em;
+	font-style: italic;
 }
 
 #editor figure img,
@@ -180,6 +182,22 @@ body {
 	content: '— '
 }
 
+#editor table {
+	border-collapse: collapse;
+	table-layout: fixed;
+	width: 100%;
+}
+
+#editor table {
+	width: 100%;
+}
+
+#editor td,
+#editor th {
+	padding: 0.5em;
+	border: 1px solid currentColor;
+}
+
 #editor:after {
    content: ".";
    visibility: hidden;

shared/tinymce/toolbar.js

@@ -55,6 +55,47 @@
 		}
 	} ) );
 
+	tinymce.ui.Factory.add( 'svglistbox', tinymce.ui.ListBox.extend( {
+		renderHtml: function() {
+			var id = this._id;
+			var prefix = this.classPrefix;
+			var icon = this.state.get( 'icon' );
+			var text = this.state.get( 'text' );
+			var html = '';
+
+			if ( icon && icon.indexOf( 'gridicons-' ) === 0 ) {
+				html += (
+					'<svg width="24" height="24" class="gridicon ' + icon + '">' +
+						'<use xlink:href="../shared/gridicons.svg#' + icon + '"></use>' +
+					'</svg>'
+				);
+			} else if ( icon ) {
+				html += '<i class="' + prefix + 'ico ' + prefix + 'i-' + icon + '"></i>';
+			}
+
+			if ( text ) {
+				this.classes.add( 'btn-has-text' );
+				html += '<span class="' + prefix + 'txt">' + this.encode( text ) + '</span>';
+			}
+
+			html += (
+				'<svg width="24" height="24" class="gridicon gridicons-dropdown">' +
+					'<use xlink:href="../shared/gridicons.svg#gridicons-dropdown"></use>' +
+				'</svg>'
+			);
+
+			this.aria( 'role', 'button' );
+
+			return (
+				'<div id="' + id + '" class="' + this.classes + '" tabindex="-1" aria-labelledby="' + id + '">' +
+					'<button id="' + id + '-open" role="presentation" type="button" tabindex="-1">' +
+						html +
+					'</button>' +
+				'</div>'
+			);
+		}
+	} ) );
+
 	tinymce.PluginManager.add( 'toolbar', function( editor ) {
 		var each = tinymce.each;
 		var DOM = tinymce.DOM;
@@ -76,9 +117,9 @@
 					var itemName;
 
 					function onClick( callback ) {
-						return function() {
+						return function( event ) {
 							editor.undoManager.transact( function() {
-								callback( window.wp.blocks.getSelectedBlock(), editor );
+								callback( window.wp.blocks.getSelectedBlock(), editor, event );
 							} );
 						}
 					}

tinymce-single/blocks.js

@@ -23,6 +23,18 @@
 				} );
 			}
 		},
+		getType: function( name ) {
+			var settings = [];
+			var key;
+
+			for ( key in _blocks ) {
+				if ( _blocks[ key ].type === name ) {
+					settings.push( _blocks[ key ] );
+				}
+			}
+
+			return settings;
+		},
 		registerControl: function( name, settings ) {
 			_controls[ name ] = settings;
 		},

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

@@ -0,0 +1,84 @@
+( function( wp ) {
+
+	function insertEmpty() {
+		return (
+			'<figure>' +
+				'<table>' +
+					'<tr>' +
+						'<td><br></td>' +
+						'<td><br></td>' +
+					'</tr>' +
+					'<tr>' +
+						'<td><br></td>' +
+						'<td><br></td>' +
+					'</tr>' +
+				'</table>' +
+			'</figure>'
+		);
+	}
+
+	wp.blocks.registerBlock( {
+		name: 'table',
+		nameSpace: 'core',
+		displayName: 'Table',
+		type: 'media',
+		icon: 'gridicons-grid',
+		editable: [ 'table', 'figcaption' ],
+		insert: insertEmpty,
+		controls: [
+			'block-align-left',
+			'block-align-center',
+			'block-align-right',
+			'block-align-full',
+			{
+				classes: 'gridicons-rotate',
+				icon: 'gridicons-indent-right',
+				onClick: function( block, editor ) {
+					editor.execCommand( 'mceTableInsertRowBefore' );
+				}
+			},
+			{
+				classes: 'gridicons-rotate',
+				icon: 'gridicons-indent-left',
+				onClick: function( block, editor ) {
+					editor.execCommand( 'mceTableInsertRowAfter' );
+				}
+			},
+			{
+				icon: 'gridicons-indent-right',
+				onClick: function( block, editor ) {
+					editor.execCommand( 'mceTableInsertColBefore' );
+				}
+			},
+			{
+				icon: 'gridicons-indent-left',
+				onClick: function( block, editor ) {
+					editor.execCommand( 'mceTableInsertColAfter' );
+				}
+			},
+			{
+				icon: 'gridicons-caption',
+				onClick: function( block ) {
+					var figcaption = block.querySelector( 'figcaption' );
+
+					if ( figcaption ) {
+						block.removeChild( figcaption );
+					} else {
+						block.insertAdjacentHTML( 'beforeend',
+							'<figcaption><br></figcaption>' );
+					}
+
+					window.wp.blocks.selectBlock( block );
+				},
+				isActive: function( block ) {
+					return !! block.querySelector( 'figcaption' );
+				}
+			},
+			{
+				icon: 'gridicons-cog',
+				onClick: function() {}
+			}
+		]
+	} );
+
+} )( window.wp );

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

@@ -1,50 +1,61 @@
-window.wp.blocks.registerBlock( {
-	name: 'blockquote',
-	displayName: 'Quote',
-	elements: [ 'blockquote' ],
-	type: 'text',
-	icon: 'gridicons-quote',
-	restrictToInline: [ 'footer' ],
-	controls: [
-		{
-			classes: 'remove-formatting',
-			icon: 'gridicons-quote',
-			onClick: function( block, editor ) {
-				var footer = block.querySelector( 'footer' );
-				var firstChild = block.firstChild;
-
-				if ( footer ) {
-					block.removeChild( footer );
-				}
+( function( wp ) {
+	function insertEmpty() {
+		return '<blockquote><p><br></p></blockquote>';
+	}
 
-				while ( block.firstChild ) {
-					block.parentNode.insertBefore( block.firstChild, block );
-				}
+	function fromBaseState( block, editor ) {
+		editor.formatter.apply( 'blockquote', block );
+	}
 
-				block.parentNode.removeChild( block );
+	function toBaseState( block ) {
+		var footer = block.querySelector( 'footer' );
+		var firstChild = block.firstChild;
 
-				window.wp.blocks.selectBlock( firstChild );
-			}
-		},
-		{
-			icon: 'gridicons-caption',
-			onClick: function( block ) {
-				var footer = block.querySelector( 'footer' );
-
-				if ( footer ) {
-					block.removeChild( footer );
-				} else {
-					block.insertAdjacentHTML( 'beforeend',
-						'<footer><br></footer>' );
-				}
-			},
-			isActive: function( block ) {
-				return !! block.querySelector( 'footer' );
-			}
+		if ( footer ) {
+			block.removeChild( footer );
 		}
-	],
-	insert: function() {
-		return '<blockquote><p><br></p></blockquote>';
+
+		while ( block.firstChild ) {
+			block.parentNode.insertBefore( block.firstChild, block );
+		}
+
+		block.parentNode.removeChild( block );
+
+		window.wp.blocks.selectBlock( firstChild );
 	}
-} );
 
+	window.wp.blocks.registerBlock( {
+		name: 'blockquote',
+		displayName: 'Quote',
+		elements: [ 'blockquote' ],
+		type: 'text',
+		icon: 'gridicons-quote',
+		restrictToInline: [ 'footer' ],
+		controls: [
+			{
+				classes: 'remove-formatting',
+				icon: 'gridicons-quote',
+				onClick: toBaseState
+			},
+			{
+				icon: 'gridicons-caption',
+				onClick: function( block ) {
+					var footer = block.querySelector( 'footer' );
+
+					if ( footer ) {
+						block.removeChild( footer );
+					} else {
+						block.insertAdjacentHTML( 'beforeend',
+							'<footer><br></footer>' );
+					}
+				},
+				isActive: function( block ) {
+					return !! block.querySelector( 'footer' );
+				}
+			}
+		],
+		insert: insertEmpty,
+		fromBaseState: fromBaseState,
+		toBaseState: toBaseState
+	} );
+} )( window.wp );

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

@@ -26,13 +26,23 @@
 		return controls;
 	}
 
+	function toBaseState( block, editor ) {
+		editor.formatter.apply( 'p', block );
+	}
+
+	function fromBaseState( block, editor ) {
+		editor.formatter.apply( 'h1', block );
+	}
+
 	wp.blocks.registerBlock( {
 		name: 'heading',
 		displayName: 'Heading',
 		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		type: 'text',
 		icon: 'gridicons-heading',
 		controls: getControls(),
+		toBaseState: toBaseState,
+		fromBaseState: fromBaseState,
 		insert: function() {
 			// Maybe detect best heading based on document outline.
 			return '<h1><br></h1>';

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

@@ -3,36 +3,16 @@ window.wp.blocks.registerBlock( {
 	displayName: 'Paragraph',
 	elements: [ 'p' ],
 	type: 'text',
+	section: 'text',
 	icon: 'gridicons-posts',
 	controls: [
-		{
-			icon: 'gridicons-heading',
-			onClick: function( block, editor ) {
-				editor.formatter.apply( 'h1' );
-			}
-		},
-		{
-			icon: 'gridicons-quote',
-			onClick: function( block, editor ) {
-				editor.formatter.apply( 'blockquote' );
-			}
-		},
-		{
-			icon: 'gridicons-list-unordered',
-			onClick: function( block ) {
-				wp.blocks.getBlockSettings( 'elements:list' ).fromBaseState( block );
-			}
-		},
-		{
-			icon: 'gridicons-code',
-			onClick: function( block, editor ) {
-				editor.formatter.apply( 'pre' );
-			}
-		},
+		'text-switcher',
 		'text-align-left',
 		'text-align-center',
 		'text-align-right'
 	],
+	toBaseState: function() {},
+	fromBaseState: function() {},
 	insert: function() {
 		return '<p><br></p>';
 	}