Merge 6273fd8 into c87128c

package.json

@@ -32,7 +32,6 @@
     "@material/card": "5.1.0",
     "@material/checkbox": "5.1.0",
     "@material/circular-progress": "7.0.0",
-    "@material/data-table": "5.1.0",
     "@material/dialog": "10.0.0",
     "@material/drawer": "5.1.0",
     "@material/floating-label": "5.1.0",

plugin/assets/css/src/block-editor.css

@@ -25,6 +25,7 @@
 @import "./overrides.css";
 @import "./material-components.css";
 @import "./tokens/index.css";
+@import "./components/datatable-editor.css";
 
 @media (min-width: 600px) {
 

plugin/assets/css/src/components/datatable-editor.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+/* Table editor style. */
+.wp-block-table td,
+.wp-block-table th {
+	border: none;
+	border-top: 1px solid var(--md-sys-color-surface-variant);
+	border-left: 1px solid var(--md-sys-color-surface-variant);
+}
+
+.mdc-data-table {
+
+	table {
+		border: none !important;
+	}
+}

plugin/assets/css/src/components/datatable.css

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+/* Data Table */
+.mdc-data-table {
+	max-width: calc(100vw - 2 * 40px);
+	border: 1px solid var(--md-sys-color-surface-variant);
+	border-radius: var(--mdc-data-table-radius, 24px);
+	overflow-x: auto;
+
+	@media screen and (max-width: 480px) {
+		max-width: calc(100vw - 2 * 24px);
+	}
+
+	& table {
+		width: 100%;
+		border: 0;
+	}
+
+	table p {
+		-webkit-margin-before: 0;
+		margin-block-start: 0;
+		-webkit-margin-after: 0;
+		margin-block-end: 0;
+	}
+
+	td:empty,
+	th:empty {
+		border-top: 0;
+	}
+
+	thead:first-child tr:first-child th,
+	tbody:first-child tr:first-child td {
+		border-top: 0;
+	}
+}
+
+.mdc-data-table__row,
+.mdc-data-table__header-row {
+	border: none;
+}
+
+.mdc-data-table__header-cell {
+	background: var(--md-sys-color-surface-variant);
+	color: var(--md-sys-color-on-surface-variant);
+	font-weight: bold;
+	text-align: center;
+}
+
+.mdc-data-table__header-cell,
+.mdc-data-table__cell {
+	padding: 16px 24px;
+	border-top: 1px solid var(--md-sys-color-surface-variant);
+	border-left: 1px solid var(--md-sys-color-surface-variant);
+	vertical-align: middle;
+
+	&:first-child {
+		border-left: 0;
+	}
+}
+
+.mdc-data-table__caption figcaption {
+	text-align: center;
+}

plugin/assets/css/src/components/material.css

@@ -160,17 +160,6 @@
 	width: 860px;
 }
 
-/* Data Table */
-.mdc-data-table {
-	border-radius: var(--mdc-data-table-radius, 4px);
-}
-
-.mdc-data-table__header-cell {
-	font-weight: bold;
-}
-
-.mdc-data-table__header-cell,
-.mdc-data-table__cell,
 .mdc-menu .mdc-list {
 	color: var(--md-sys-color-on-surface, #000);
 }

plugin/assets/css/src/material-components.css

@@ -20,7 +20,6 @@
 
 @import "@material/button/dist/mdc.button.css";
 @import "@material/card/dist/mdc.card.css";
-@import "@material/data-table/dist/mdc.data-table.css";
 @import "@material/icon-button/dist/mdc.icon-button.css";
 @import "@material/image-list/dist/mdc.image-list.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
@@ -32,3 +31,4 @@
 @import "@material/textfield/dist/mdc.textfield.css";
 @import "@material/tooltip/dist/mdc.tooltip.css";
 @import "./components/material.css";
+@import "./components/datatable.css";

plugin/assets/css/src/overrides.css

@@ -77,40 +77,6 @@
 	}
 }
 
-/* Data Table */
-.mdc-data-table {
-	background-color: var(--md-sys-color-surface, #fff) !important;
-	border-color: rgba(0, 0, 0, 0.12) !important;
-	border-color: var(--md-sys-color-on-surface, #000) !important;
-
-	& thead {
-		border: none !important;
-	}
-}
-
-
-.mdc-data-table__table {
-	margin: 0 !important;
-}
-
-.mdc-data-table__row {
-	border-top-color: rgba(0, 0, 0, 0.12) !important;
-	border-top-color: var(--md-sys-color-on-surface, #000) !important;
-	border-top-width: 1px !important;
-	border-top-style: solid !important;
-}
-
-.mdc-data-table__header-cell {
-	border: none !important;
-	vertical-align: middle !important;
-}
-
-.mdc-data-table__header-cell,
-.mdc-data-table__cell {
-	border: none !important;
-	padding-left: 16px !important;
-	padding-right: 16px !important;
-}
 
 /* List */
 ul.mdc-list {