diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 3a038344c9545..a1b25e8dd18f2 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 {
] }
/>
-
+ {
+ toggleSelection( false );
+ } }
+ onResizeStop={ ( event, direction, element ) => {
+ setAttributes( {
+ width: direction === 'right' ? element.style.width : width,
+ height: direction === 'bottom' ? element.style.height : height,
+ } );
+ toggleSelection( true );
+ } }
+ >
+
+
);
}
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index a1cc6e3927b72..9c9c8a81c2160 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;
}
-