Add a wrapping div around the rendered table to provide mobile respon…

…siveness
WordPress · Sep 17, 2018 · 10b6ad5 · 10b6ad5
1 parent 2fa1b81
commit 10b6ad5
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 21 deletions.
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -442,7 +442,7 @@ export default class TableEdit extends Component {
 			);
 		}
 
-		const classes = classnames( className, {
+		const classes = classnames( {
 			'has-fixed-layout': hasFixedLayout,
 		} );
 
@@ -502,7 +502,7 @@ export default class TableEdit extends Component {
 						/>
 					</PanelBody>
 				</InspectorControls>
-				<div className="block-library-table__overflow_container">
+				<div className={ className }>
 					<table className={ classes } style={ getTableStyles( attributes ) }>
 						<Section type="head" rows={ head } />
 						<Section type="body" rows={ body } />

diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
@@ -1,9 +1,4 @@
 .wp-block-table {
-	table {
-		border-collapse: collapse;
-		width: 100%;
-	}
-
 	td,
 	th {
 		padding: 0;
@@ -22,10 +17,6 @@
 	}
 }
 
-.block-library-table__overflow_container {
-	overflow: auto;
-}
-
 .block-library-table__dimensions__row {
 	display: flex;
 }

diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js
@@ -155,11 +155,13 @@ export const settings = {
 		};
 
 		return (
-			<table className={ classes } style={ getTableStyles( attributes ) }>
-				<Section type="head" rows={ head } />
-				<Section type="body" rows={ body } />
-				<Section type="foot" rows={ foot } />
-			</table>
+			<div>
+				<table className={ classes } style={ getTableStyles( attributes ) }>
+					<Section type="head" rows={ head } />
+					<Section type="body" rows={ body } />
+					<Section type="foot" rows={ foot } />
+				</table>
+			</div>
 		);
 	},
 

diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
@@ -1,6 +1,7 @@
 .wp-block-table {
-	// Fixed layout toggle
-	&.has-fixed-layout {
+	overflow-x: auto;
+
+	table.has-fixed-layout {
 		table-layout: fixed;
 		width: 100%;
 	}

diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
@@ -1,7 +1,9 @@
 .wp-block-table {
-	width: 100%;
-	min-width: $break-mobile / 2;
-	border-collapse: collapse;
+	table {
+		width: 100%;
+		min-width: $break-mobile / 2;
+		border-collapse: collapse;
+	}
 
 	td,
 	th {