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 2c9d557180aba5..44125667966793 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
@@ -17,6 +22,7 @@ import TableBlock from './table-block';
import BlockControls from '../../block-controls';
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
import RichText from '../../rich-text';
+import InspectorControls from '../../inspector-controls';
export const name = 'core/table';
@@ -33,14 +39,18 @@ export const settings = {
selector: 'table',
default: [
-
|
|
-
|
|
+
|
|
|
+
|
|
|
,
],
},
align: {
type: 'string',
},
+ hasFixedLayout: {
+ type: 'boolean',
+ default: false,
+ },
},
transforms: {
@@ -60,8 +70,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 (
@@ -70,22 +91,40 @@ export const settings = {
onChange={ updateAlignment }
/>
+
+
+
+
+
{
setAttributes( { content: nextContent } );
} }
content={ content }
- className={ className }
+ className={ classes }
isSelected={ isSelected }
/>
);
},
- 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 (
-
+
);
},
};
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;
}
}