diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json index 3d1269972853f..a335ff1baaaf2 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 a64e4c7169c6c..9cc9de091f6ec 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 { ] } /> - - -
-
-
-
{ caption }
- setAttributes( { caption: value } ) } - /> +
+ +
+
+
+
+ setAttributes( { caption: value } ) } + /> +
); } diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss index 646d423cbf857..6d9ff8efc1a19 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 b276650ebeb3c..18962e6b12ab3 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 b79d044fac2b3..a3ce9b2fc23fd 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 9328427cff84f..4c42240236379 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 {