Add/147 table block (alternate vision)

blocks/library/index.js

@@ -9,6 +9,7 @@ import './separator';
 import './button';
 import './pullquote';
 import './table';
+import './table2';
 import './preformatted';
 import './code';
 import './html';

blocks/library/table2/index.js

@@ -0,0 +1,71 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlockType, query as hpq } from '../../api';
+import TableBlock from './table-block';
+import BlockControls from '../../block-controls';
+import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+
+const { children } = hpq;
+
+registerBlockType( 'core/table2', {
+	title: wp.i18n.__( 'TinyMCE Table' ),
+	icon: 'editor-table',
+	category: 'formatting',
+
+	attributes: {
+		content: children( 'table' ),
+	},
+
+	defaultAttributes: {
+		content: [
+			<tbody key="1">
+				<tr><td><br /></td><td><br /></td></tr>
+				<tr><td><br /></td><td><br /></td></tr>
+			</tbody>,
+		],
+	},
+
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'wide' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
+	edit( { attributes, setAttributes, focus, setFocus, className } ) {
+		const { content } = attributes;
+		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+		return [
+			focus && (
+				<BlockControls key="toolbar">
+					<BlockAlignmentToolbar
+						value={ attributes.align }
+						onChange={ updateAlignment }
+						controls={ [ 'left', 'center', 'right', 'wide' ] }
+					/>
+				</BlockControls>
+			),
+			<TableBlock
+				key="editor"
+				onChange={ ( nextContent ) => {
+					setAttributes( { content: nextContent } );
+				} }
+				content={ content }
+				focus={ focus }
+				onFocus={ setFocus }
+				className={ className }
+			/>,
+		];
+	},
+
+	save( { attributes } ) {
+		const { content } = attributes;
+		return (
+			<table>
+				{ content }
+			</table>
+		);
+	},
+} );

blocks/library/table2/style.scss

@@ -0,0 +1,38 @@
+.editor-visual-editor__block[data-type="core/table2"] {
+
+	.editor-visual-editor__block-controls > div {
+		display: flex;
+	}
+
+	&[data-align="left"],
+	&[data-align="right"] {
+		min-width: 33%;
+		max-width: 50%;
+	}
+
+	&[data-align="left"] {
+		float: left;
+		margin-right: $block-padding;
+	}
+
+	&[data-align="right"] {
+		float: right;
+		margin-left: $block-padding;
+	}
+}
+
+.wp-block-table-2 {
+	table {
+		border-collapse: collapse;
+		width: 100%;
+	}
+
+	td, th {
+		padding: 0.5em;
+		border: 1px solid currentColor;
+	}
+
+	td[data-mce-selected="1"], th[data-mce-selected="1"] {
+		background-color: $light-gray-500;
+	}
+}

blocks/library/table2/table-block.js

@@ -0,0 +1,90 @@
+import Editable from '../../editable';
+import BlockControls from '../../block-controls';
+import { Toolbar, DropdownMenu } from 'components';
+
+function execCommand( command ) {
+	return ( editor ) => {
+		if ( editor ) {
+			editor.execCommand( command );
+		}
+	};
+}
+
+const TABLE_CONTROLS = [
+	{
+		icon: 'table-row-before',
+		title: wp.i18n.__( 'Insert Row Before' ),
+		onClick: execCommand( 'mceTableInsertRowBefore' ),
+	},
+	{
+		icon: 'table-row-after',
+		title: wp.i18n.__( 'Insert Row After' ),
+		onClick: execCommand( 'mceTableInsertRowAfter' ),
+	},
+	{
+		icon: 'table-row-delete',
+		title: wp.i18n.__( 'Delete Row' ),
+		onClick: execCommand( 'mceTableDeleteRow' ),
+	},
+	{
+		icon: 'table-col-before',
+		title: wp.i18n.__( 'Insert Column Before' ),
+		onClick: execCommand( 'mceTableInsertColBefore' ),
+	},
+	{
+		icon: 'table-col-after',
+		title: wp.i18n.__( 'Insert Column After' ),
+		onClick: execCommand( 'mceTableInsertColAfter' ),
+	},
+	{
+		icon: 'table-col-delete',
+		title: wp.i18n.__( 'Delete Column' ),
+		onClick: execCommand( 'mceTableDeleteCol' ),
+	},
+];
+
+export default class TableBlock extends wp.element.Component {
+	constructor() {
+		super();
+		this.state = {
+			editor: null,
+		};
+	}
+
+	render() {
+		const { content, focus, onFocus, onChange, className } = this.props;
+
+		return [
+			<Editable
+				key="editor"
+				tagName="table"
+				className={ className }
+				getSettings={ ( settings ) => ( {
+					...settings,
+					plugins: ( settings.plugins || [] ).concat( 'table' ),
+				} ) }
+				onSetup={ ( editor ) => this.setState( { editor } ) }
+				onChange={ onChange }
+				value={ content }
+				focus={ focus }
+				onFocus={ onFocus }
+			/>,
+			focus && (
+				<BlockControls key="menu">
+					<Toolbar>
+						<li>
+							<DropdownMenu
+								icon="editor-table"
+								controls={
+									TABLE_CONTROLS.map( ( control ) => ( {
+										...control,
+										onClick: () => control.onClick( this.state.editor ),
+									} ) ) }
+							/>
+						</li>
+					</Toolbar>
+				</BlockControls>
+			),
+		];
+	}
+}

blocks/test/fixtures/core__table2.html

@@ -0,0 +1,49 @@
+<!-- wp:core/table2 -->
+<table>
+    <thead>
+        <tr>
+            <th>Version</th>
+            <th>Musician</th>
+            <th>Date</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td>
+            <td>No musician chosen.</td>
+            <td>May 27, 2003</td>
+        </tr>
+        <tr>
+            <td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td>
+            <td>Miles Davis</td>
+            <td>January 3, 2004</td>
+        </tr>
+        <tr>
+            <td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td>
+            <td>&hellip;</td>
+            <td>&hellip;</td>
+        </tr>
+        <tr>
+            <td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td>
+            <td>Clifford Brown</td>
+            <td>December 8, 2015</td>
+        </tr>
+        <tr>
+            <td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td>
+            <td>Coleman Hawkins</td>
+            <td>April 12, 2016</td>
+        </tr>
+        <tr>
+            <td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td>
+            <td>Pepper Adams</td>
+            <td>August 16, 2016</td>
+        </tr>
+        <tr>
+            <td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td>
+            <td>Sarah Vaughan</td>
+            <td>December 6, 2016</td>
+        </tr>
+    </tbody>
+</table>
+<!-- /wp:core/table2 -->
+