From 1bc9a238d180378ae9bc805222fd7372174805a9 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 30 Jan 2019 13:46:05 +0800
Subject: [PATCH] Try: add resizable-box around table

---
 packages/block-library/src/table/edit.js     | 36 ++++++++++++++++----
 packages/block-library/src/table/editor.scss | 17 +++++++--
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 3a038344c95459..a1b25e8dd18f26 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -23,6 +23,7 @@ import {
 	Button,
 	Toolbar,
 	DropdownMenu,
+	ResizableBox,
 } from '@wordpress/components';
 
 /**
@@ -35,7 +36,6 @@ import {
 	deleteRow,
 	insertColumn,
 	deleteColumn,
-	getTableStyles,
 	getStyleValue,
 	getStyleUnit,
 } from './state';
@@ -462,6 +462,8 @@ export class TableEdit extends Component {
 			className,
 			backgroundColor,
 			setBackgroundColor,
+			toggleSelection,
+			setAttributes,
 		} = this.props;
 		const { initialRowCount, initialColumnCount, widthUnit } = this.state;
 		const { hasFixedLayout, head, body, foot, width, height } = attributes;
@@ -565,11 +567,33 @@ export class TableEdit extends Component {
 						] }
 					/>
 				</InspectorControls>
-				<table className={ classes } style={ getTableStyles( attributes ) }>
-					<Section type="head" rows={ head } />
-					<Section type="body" rows={ body } />
-					<Section type="foot" rows={ foot } />
-				</table>
+				<ResizableBox
+					className="block-library-table__resizable-box"
+					size={ {
+						width,
+						height,
+					} }
+					enable={ {
+						right: true,
+						bottom: true,
+					} }
+					onResizeStart={ () => {
+						toggleSelection( false );
+					} }
+					onResizeStop={ ( event, direction, element ) => {
+						setAttributes( {
+							width: direction === 'right' ? element.style.width : width,
+							height: direction === 'bottom' ? element.style.height : height,
+						} );
+						toggleSelection( true );
+					} }
+				>
+					<table className={ classes }>
+						<Section type="head" rows={ head } />
+						<Section type="body" rows={ body } />
+						<Section type="foot" rows={ foot } />
+					</table>
+				</ResizableBox>
 			</Fragment>
 		);
 	}
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index a1cc6e3927b728..9c9c8a81c21606 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -17,8 +17,10 @@
 	}
 }
 
-
 .wp-block-table {
+	width: 100%;
+	height: 100%;
+
 	td,
 	th {
 		padding: 0.5rem;
@@ -31,6 +33,18 @@
 		box-shadow: inset 0 0 0 1px $blue-medium-500;
 		border-style: double;
 	}
+
+
+}
+
+.block-library-table__resizable-box {
+	// Using display table is a hack to ensure wrapping resizable box can't be resized to smaller than the content.
+	display: table;
+	min-width: $break-mobile / 2;
+
+	& .components-resizable-box__handle {
+		display: block;
+	}
 }
 
 .block-library-table__dimensions__row {
@@ -42,4 +56,3 @@
 	// Use padding since it's hard to override the margin of the base control.
 	padding-right: 5px;
 }
-