From 015727f0c11b56844c5635f4887e5f8a78de79c2 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 20 Apr 2018 13:16:42 +0200
Subject: [PATCH] Polish the Table block

This branch is based off of `try/better-responsive-table`, but without my attempt at better responsiveness.

- New toggle to decide whether table has fixed widths, off by default, as discussed in #2620
- Surface and style the resizing tool
---
 core-blocks/table/editor.scss | 23 +++++++++++++--
 core-blocks/table/index.js    | 54 ++++++++++++++++++++++++++++++-----
 core-blocks/table/style.scss  | 18 ++++++++++--
 3 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/core-blocks/table/editor.scss b/core-blocks/table/editor.scss
index d9e41bc41f947a..d3a33b157fc648 100644
--- a/core-blocks/table/editor.scss
+++ b/core-blocks/table/editor.scss
@@ -1,11 +1,30 @@
 .wp-block-table {
+	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;
+	td[data-mce-selected="1"],
+	th[data-mce-selected="1"] {
+		background-color: $light-gray-300;
 	}
 }
+
+// Style the resize handles
+.ephox-snooker-resizer-rows {
+	cursor: row-resize;
+}
+
+.ephox-snooker-resizer-cols {
+	cursor: col-resize;
+}
+
+.ephox-snooker-resizer-bar-dragging {
+	background: $blue-medium-500;
+}
\ No newline at end of file
diff --git a/core-blocks/table/index.js b/core-blocks/table/index.js
index f36b900aa2693c..133e3f38d0f38e 100644
--- a/core-blocks/table/index.js
+++ b/core-blocks/table/index.js
@@ -2,17 +2,24 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { getPhrasingContentSchema } from '@wordpress/blocks';
 import {
+	getPhrasingContentSchema,
 	BlockControls,
 	BlockAlignmentToolbar,
 	RichText,
-} from '@wordpress/editor';
+	InspectorControls,
+} from '@wordpress/blocks';
+
+import {
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -73,6 +80,10 @@ export const settings = {
 		align: {
 			type: 'string',
 		},
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 
 	transforms: {
@@ -93,8 +104,19 @@ export const settings = {
 	},
 
 	edit( { attributes, setAttributes, isSelected, className } ) {
-		const { content } = attributes;
+		const { content, hasFixedLayout } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+		const toggleFixedLayout = () => {
+			setAttributes( { hasFixedLayout: ! hasFixedLayout } );
+		};
+
+		const classes = classnames(
+			className,
+			{
+				'has-fixed-layout': hasFixedLayout,
+			},
+		);
+
 		return (
 			<Fragment>
 				<BlockControls>
@@ -103,22 +125,40 @@ export const settings = {
 						onChange={ updateAlignment }
 					/>
 				</BlockControls>
+				<InspectorControls>
+					<PanelBody title={ __( 'Table Settings' ) } className="blocks-table-settings">
+						<ToggleControl
+							label={ __( 'Fixed width table cells' ) }
+							checked={ !! hasFixedLayout }
+							onChange={ toggleFixedLayout }
+						/>
+					</PanelBody>
+				</InspectorControls>
 				<TableBlock
 					onChange={ ( nextContent ) => {
 						setAttributes( { content: nextContent } );
 					} }
 					content={ content }
-					className={ className }
+					className={ classes }
 					isSelected={ isSelected }
 				/>
 			</Fragment>
 		);
 	},
 
-	save( { attributes } ) {
-		const { content, align } = attributes;
+	save( { attributes, className } ) {
+		const { content, align, hasFixedLayout } = attributes;
+
+		const classes = classnames(
+			className,
+			{
+				'has-fixed-layout': hasFixedLayout,
+				[ `align${ align }` ]: align,
+			},
+		);
+
 		return (
-			<RichText.Content tagName="table" className={ align ? `align${ align }` : null } value={ content } />
+			<RichText.Content tagName="table" className={ classes } value={ content } />
 		);
 	},
 };
diff --git a/core-blocks/table/style.scss b/core-blocks/table/style.scss
index 5da7397ce1a3e2..5f6e6654b6ff31 100644
--- a/core-blocks/table/style.scss
+++ b/core-blocks/table/style.scss
@@ -1,9 +1,23 @@
 .wp-block-table {
 	overflow-x: auto;
 	display: block;
+	border-collapse: collapse;
+	width: 100%;
 
-	table {
-		border-collapse: collapse;
+	tbody {
 		width: 100%;
+		display: table;
+		min-width: $break-mobile / 2;
+	}
+
+	td,
+	th {
+		padding: 0.5em;
+		border: 1px solid currentColor;
+	}
+
+	// Fixed layout toggle
+	&.has-fixed-layout tbody {
+		table-layout: fixed;
 	}
 }