Add/147 table block (alternate vision)

blocks/block-menu/index.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Fill } from 'react-slot-fill';
+
+/**
+ * WordPress dependencies
+ */
+import { ToolbarMenu } from 'components';
+
+export default function BlockMenu( { icon, label, menuLabel, controls } ) {
+	return (
+		<Fill name="Formatting.ToolbarMenu">
+			<ToolbarMenu
+				icon={ icon }
+				label={ label }
+				menuLabel={ menuLabel }
+				controls={ controls }
+			/>
+		</Fill>
+	);
+}

blocks/library/index.js

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

blocks/library/table2/index.js

@@ -0,0 +1,98 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlock, query as hpq } from '../../api';
+import TableBlock from './table-block';
+
+const { children } = hpq;
+
+/**
+ * Returns an attribute setter with behavior that if the target value is
+ * already the assigned attribute value, it will be set to undefined.
+ *
+ * @param  {string}   align Alignment value
+ * @return {Function}       Attribute setter
+ */
+function toggleAlignment( align ) {
+	return ( attributes, setAttributes ) => {
+		const nextAlign = attributes.align === align ? undefined : align;
+		setAttributes( { align: nextAlign } );
+	};
+}
+
+registerBlock( 'core/table2', {
+	title: wp.i18n.__( 'Table2' ),
+	icon: 'editor-table',
+	category: 'common',
+
+	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>,
+		],
+	},
+
+	controls: [
+		{
+			icon: 'align-left',
+			title: wp.i18n.__( 'Align left' ),
+			isActive: ( { align } ) => 'left' === align,
+			onClick: toggleAlignment( 'left' ),
+		},
+		{
+			icon: 'align-center',
+			title: wp.i18n.__( 'Align center' ),
+			isActive: ( { align } ) => 'center' === align,
+			onClick: toggleAlignment( 'center' ),
+		},
+		{
+			icon: 'align-right',
+			title: wp.i18n.__( 'Align right' ),
+			isActive: ( { align } ) => 'right' === align,
+			onClick: toggleAlignment( 'right' ),
+		},
+		{
+			icon: 'align-full-width',
+			title: wp.i18n.__( 'Wide width' ),
+			isActive: ( { align } ) => 'wide' === align,
+			onClick: toggleAlignment( 'wide' ),
+		},
+	],
+
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'wide' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
+	edit( { attributes, setAttributes, focus, setFocus } ) {
+		const { content } = attributes;
+		return (
+			<TableBlock
+				onChange={ ( nextContent ) => {
+					setAttributes( { content: nextContent } );
+				} }
+				content={ content }
+				focus={ focus }
+				onFocus={ setFocus }
+			/>
+		);
+	},
+
+	save( { attributes } ) {
+		const { content } = attributes;
+		return (
+			<table className="blocks-table" style={ { width: '100%' } }>
+				{ content }
+			</table>
+		);
+	},
+} );

blocks/library/table2/style.scss

@@ -0,0 +1,30 @@
+.editor-visual-editor__block[data-type="core/table2"] {
+	table {
+		border-collapse: collapse;
+	}
+
+	td, th {
+		padding: 0.5em;
+		border: 1px solid currentColor;
+	}
+
+	td[data-mce-selected="1"], th[data-mce-selected="1"] {
+		background-color: $light-gray-500;
+	}
+
+	&[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;
+	}
+}

blocks/library/table2/table-block.js

@@ -0,0 +1,85 @@
+import Editable from '../../editable';
+import BlockMenu from '../../block-menu';
+
+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 } = this.props;
+
+		return [
+			focus && (
+				<BlockMenu
+					key="controls"
+					icon="editor-table"
+					controls={
+						TABLE_CONTROLS.map( ( control ) => ( {
+							...control,
+							onClick: () => control.onClick( this.state.editor ),
+						} ) ) }
+				/>
+			),
+			<Editable
+				key="editor"
+				tagName="table"
+				getSettings={ ( settings ) => ( {
+					...settings,
+					plugins: ( settings.plugins || [] ).concat( 'table' ),
+				} ) }
+				style={ { width: '100%' } }
+				onSetup={ ( editor ) => this.setState( { editor } ) }
+				onChange={ onChange }
+				value={ content }
+				focus={ focus }
+				onFocus={ onFocus }
+				showAlignments
+				className="blocks-table" />,
+		];
+	}
+}

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 -->
+