From 64bd0560d7805f54a23f5da98df8fb7bfbcac55a 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
---
 blocks/library/table/editor.scss | 23 ++++++++++++--
 blocks/library/table/index.js    | 53 +++++++++++++++++++++++++++-----
 blocks/library/table/style.scss  | 17 ++++++++--
 3 files changed, 82 insertions(+), 11 deletions(-)

diff --git a/blocks/library/table/editor.scss b/blocks/library/table/editor.scss
index d9e41bc41f947a..d3a33b157fc648 100644
--- a/blocks/library/table/editor.scss
+++ b/blocks/library/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/blocks/library/table/index.js b/blocks/library/table/index.js
index e567c6698be162..68c7a7c1740bc3 100644
--- a/blocks/library/table/index.js
+++ b/blocks/library/table/index.js
@@ -7,6 +7,11 @@ import { __ } from '@wordpress/i18n';
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
+import {
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -16,6 +21,7 @@ import './style.scss';
 import TableBlock from './table-block';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+import InspectorControls from '../../inspector-controls';
 
 export const name = 'core/table';
 
@@ -32,14 +38,18 @@ export const settings = {
 			selector: 'table',
 			default: [
 				<tbody key="1">
-					<tr><td><br /></td><td><br /></td></tr>
-					<tr><td><br /></td><td><br /></td></tr>
+					<tr><td><br /></td><td><br /></td><td><br /></td></tr>
+					<tr><td><br /></td><td><br /></td><td><br /></td></tr>
 				</tbody>,
 			],
 		},
 		align: {
 			type: 'string',
 		},
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 
 	transforms: {
@@ -59,8 +69,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>
@@ -69,22 +90,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 }` : null,
+		);
+
 		return (
-			<table className={ align ? `align${ align }` : null }>
+			<table className={ classes }>
 				{ content }
 			</table>
 		);
diff --git a/blocks/library/table/style.scss b/blocks/library/table/style.scss
index 5da7397ce1a3e2..bcab3332d18e7f 100644
--- a/blocks/library/table/style.scss
+++ b/blocks/library/table/style.scss
@@ -1,9 +1,22 @@
 .wp-block-table {
 	overflow-x: auto;
 	display: block;
+	border-collapse: collapse;
+	width: 100%;
 
-	table {
-		border-collapse: collapse;
+	tbody {
 		width: 100%;
+		display: table;
+	}
+
+	td,
+	th {
+		padding: 0.5em;
+		border: 1px solid currentColor;
+	}
+
+	// Fixed layout toggle
+	&.has-fixed-layout tbody {
+		table-layout: fixed;
 	}
 }