Polish the Table block (#6314)

* 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: Fix fixture tests

* Address feedback.

* Fix table block after rebase

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

core-blocks/table/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -12,8 +13,14 @@ import {
 	BlockControls,
 	BlockAlignmentToolbar,
 	RichText,
+	InspectorControls,
 } from '@wordpress/editor';
 
+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,38 @@ 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;
+		const { content, align, hasFixedLayout } = attributes;
+		const classes = classnames(
+			{
+				'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 } />
 		);
 	},
 };

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;
 	}
 }

core-blocks/test/fixtures/core__table.json

@@ -194,7 +194,8 @@
                         }
                     ]
                 }
-            ]
+            ],
+            "hasFixedLayout": false
         },
         "innerBlocks": [],
         "originalContent": "<table class=\"wp-block-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>"