Add table block

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;

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: 'text',
+		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/index.html

@@ -72,6 +72,7 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 		<script src="blocks.js"></script>
 		<script src="blocks/core/image/register.js"></script>
 		<script src="blocks/core/gallery/register.js"></script>
+		<script src="blocks/core/table/register.js"></script>
 		<script src="blocks/elements/blockquote/register.js"></script>
 		<script src="blocks/elements/headings/register.js"></script>
 		<script src="blocks/elements/horizontal-rule/register.js"></script>

tinymce-single/tinymce/block.css

@@ -146,6 +146,10 @@ svg.gridicon {
 	transform-origin: top left;
 }
 
+.mce-gridicons-rotate svg {
+	transform: rotate( 90deg );
+}
+
 div.mce-inline-toolbar-grp {
 	background-color: #fff;
 	border: 1px solid #e1e6ea;

tinymce-single/tinymce/block.js

@@ -126,19 +126,22 @@
 
 		editor.on( 'keydown', function( event ) {
 			if ( event.keyCode === tinymce.util.VK.ENTER ) {
-				var selectedBlock = wp.blocks.getSelectedBlock();
-				var blockSettings = wp.blocks.getBlockSettingsByElement( selectedBlock );
+				var block = wp.blocks.getSelectedBlock();
+				var settings = wp.blocks.getBlockSettingsByElement( block );
 
-				if ( editor.$( selectedBlock ).attr( 'contenteditable' ) === 'false' ) {
+				if ( editor.$( block ).attr( 'contenteditable' ) === 'false' ) {
 					event.preventDefault();
 				}
 
-				if ( blockSettings && blockSettings.restrictToInline ) {
-					blockSettings.restrictToInline.forEach( function( selector ) {
+				if ( settings ) {
+					var restrict = ( settings.restrictToInline || [] ).concat( settings.editable || [] );
+
+					restrict.forEach( function( selector ) {
 						var node = editor.selection.getNode();
 
 						if ( editor.$( node ).is( selector ) || editor.$( node ).parents( selector ).length ) {
 							event.preventDefault();
+							editor.execCommand( 'InsertLineBreak' );
 						}
 					} );
 				}

tinymce-single/tinymce/config.js

@@ -10,6 +10,7 @@ window.tinymce.init( {
 		'clean-paste',
 		'lists',
 		'paste',
+		'table',
 		'toolbar',
 		'wplink',
 		'wptextpattern'