Try: add resizable-box around table

WordPress · Jan 30, 2019 · 1bc9a23 · 1bc9a23
1 parent ef14708
commit 1bc9a23
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git 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
@@ -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;
 }
-