single-post.html

How do I style the table block using Global Styles and/or theme.json?

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
Table caption – Style Stripes

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.

Screen capture from the Site editor.

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)

WordPress version: 5.7.2

Gutenberg version: 10.8.0

© Copyright Herb Miller, Bobbing Wide 2021