Use variables from theme.json for table styles

Automattic · Mar 22, 2021 · 4f1ffc2 · 4f1ffc2
1 parent 31ef7c7
commit 4f1ffc2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/blank-canvas-blocks/assets/ponyfill.css b/blank-canvas-blocks/assets/ponyfill.css
diff --git a/blank-canvas-blocks/experimental-theme.json b/blank-canvas-blocks/experimental-theme.json
@@ -224,6 +224,11 @@
 							"hoverBackground": "var(--wp--custom--color--background)"
 						}
 					}
+				},
+				"table": {
+					"typography": {
+						"fontSize": "var(--wp--preset--font-size--tiny)"
+					}
 				}
 			}
 		}

diff --git a/blank-canvas-blocks/sass/blocks/_table.scss b/blank-canvas-blocks/sass/blocks/_table.scss
@@ -0,0 +1,11 @@
+.wp-block-table {
+	figcaption {
+		font-size: var(--wp--custom--table--typography--font-size);
+		text-align: center;
+	}
+
+	td, th {
+		border: 1px solid;
+		padding: calc(0.5*var(--wp--custom--margin--vertical)) calc(0.5*var(--wp--custom--margin--horizontal));
+	}
+}
diff --git a/blank-canvas-blocks/sass/ponyfill.scss b/blank-canvas-blocks/sass/ponyfill.scss
@@ -20,3 +20,4 @@
 @import "blocks/file";
 @import "blocks/separator";
 @import "blocks/video";
+@import "blocks/table";