Question: Can I style the table block just by using Global Styles and/or the theme.json file?
Answer: I haven’t the foggiest idea how to do this. I cheated by copying some CSS into the theme’s stylesheet.
Here’s a screen capture of me editing the table block in the editor. It nearly looks OK with the default border setting value. If I change this setting to 1 the top and bottom border for the table body disappear. Note I’ve used custom colours; dark blue for the text and a light blue for the background.
and here’s the real table. In the editor it looks the same as the screen capture above.
| Column 1 | Column 2 |
|---|---|
| Row 1 Column 1 | Row 1 Column 2 |
| Row 2 Column 1 | Row 2 Column 2 |
| Footer col 1 | Footer col 2 |
Summary of differences
Screen capture from front end
- No vertical padding or margin
- The top and bottom border around the body is different
- The Table caption is left aligned
- There’s no left padding on table cells
- The table caption font size is not smaller.
Styling in the Site Editor
Styling in the Site Editor was tricky because the background colour was grey.
The hacky solution I used
I couldn’t find a way to use theme.json. For a workaround, I found the CSS I needed and copied it into style.css.
/** Copied and cobbled from gutenberg/build/block-library/theme.css
*/
.wp-block-table thead {
border-bottom: 3px solid;
}
.wp-block-table tfoot {
border-top: 3px solid;
}
.wp-block-table td,
.wp-block-table th {
padding: 0.5em;
border: 1px solid;
word-break: normal;
}
.wp-block-table figcaption {
color: #555;
font-size: 13px;
text-align: center;
}
.is-dark-theme .wp-block-table figcaption {
color: rgba(255, 255, 255, 0.65);
}References
Answer from Anne McCarthy – Developer Relations Wranger at Automattic.
More discussion around this overall question in this issue: https://github.com/WordPress/gutenberg/issues/6923 With that said, this is likely to be a Global Styles/Block Styles item! With that said, plugins will likely play a role especially for deeper customization as shared here (inline styles vs overall table colors)
