diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
index 3d1269972853f2..a335ff1baaaf25 100644
--- a/packages/block-library/src/table/block.json
+++ b/packages/block-library/src/table/block.json
@@ -12,7 +12,7 @@
"caption": {
"type": "string",
"source": "html",
- "selector": "caption"
+ "selector": "figcaption"
},
"head": {
"type": "array",
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index a64e4c7169c6c5..9cc9de091f6eca 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -488,21 +488,23 @@ export class TableEdit extends Component {
] }
/>
-
- setAttributes( { caption: value } ) }
- />
+
>
);
}
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index 646d423cbf857b..6d9ff8efc1a19d 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -41,12 +41,7 @@
padding: 0.5em;
}
- caption {
- visibility: hidden;
- height: 0;
- }
-
- &__caption-content {
+ &__caption {
@include caption-style-theme();
overflow: hidden;
height: 0;
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
index b276650ebeb3c6..18962e6b12ab31 100644
--- a/packages/block-library/src/table/save.js
+++ b/packages/block-library/src/table/save.js
@@ -55,11 +55,13 @@ export default function save( { attributes } ) {
};
return (
-
- { !! caption && }
-
-
-
-
+
);
}
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index b79d044fac2b35..a3ce9b2fc23fdf 100644
--- a/packages/block-library/src/table/style.scss
+++ b/packages/block-library/src/table/style.scss
@@ -13,14 +13,11 @@
&.alignleft,
&.aligncenter,
&.alignright {
- // Override default display property for align styles.
- // The table element needs to be kept as display table
- // for table features to work reliably.
- display: table;
-
- // Table cannot be 100% width if it is aligned, so set
- // width as auto.
- width: auto;
+ table {
+ // Table cannot be 100% width if it is aligned, so set
+ // width as auto.
+ width: auto;
+ }
}
&.has-subtle-light-gray-background-color {
@@ -41,9 +38,12 @@
// "Stripes" style variation.
&.is-style-stripes {
- border-spacing: 0;
- border-collapse: inherit;
- background-color: transparent;
+ table {
+ border-spacing: 0;
+ border-collapse: inherit;
+ background-color: transparent;
+ border-bottom: 1px solid $light-gray-200;
+ }
tbody tr:nth-child(odd) {
background-color: $light-gray-200;
@@ -77,7 +77,9 @@
td {
border-color: transparent;
}
+ }
- border-bottom: 1px solid $light-gray-200;
+ figure {
+ margin: 0;
}
}
diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
index 9328427cff84fe..4c422402363792 100644
--- 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 {