Table block border issue in various theme.

[viralsampat-multidots]

Description

Hello,

I have reviewed the "table block" and found that table block border is not displaying same on editor side and front-end side when we changed its text color.

I think that it should be on both side(Editor & Front-end)

I have checked this issue on the below-mentioned theme.

• Twenty Fifteen Version: 3.7
• Twenty Sixteen Version: 3.2
• Twenty Seventeen Version: 3.6

Step-by-step reproduction instructions

• Type / to choose a block
• Select Table block
• Add demo text for header, footer, and columns
• Change text color
• Save the changes and publish the page.
• Save the changes and publish the page.

Screenshots, screen recording, code snippet

Environment info

• WordPress version: WordPress 6.5.3 running
• Themes:
• Browser: Google Chrome, Version 124.0.6367.119 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS 14.4.1 (23E224)
• Gutenberg plugin: Version 18.2.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[marcarmengou]

Reproduction Report

This report validates that the issue can be reproduced.

Environment

• OS: Windows 10
• Web Server: Nginx
• PHP: 8.1.23
• WordPress: 6.5.3
• Browser: Chrome 125.0 and Firefox 126.0
• Theme: Twenty Fifteen, Twenty Seventeen and Twenty Sixteen

Actual Results

• ✅ Error condition occurs (reproduced).

Additional Notes

• The table border is colored in the Editor, but not in the Front-end.

Supplemental Artifacts

Editor

Front-end

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[jasmussen]

Took a look at this one.

Twenty Fifteen

The colors are from the theme itself, it outputs this, which causes the color control to not work:

/* Table */

.wp-block-table th,
.wp-block-table td {
	border-color: #eaeaea;
	border-width: 0 1px 1px 0;
}

Twenty Sixteen

Here, the colors are also from the theme itself:

/* Table */
.wp-block-table,
.wp-block-table th,
.wp-block-table td {
	border: 1px solid #d1d1d1;
}

Twenty Seventeen

Here, colors on the frontend are coming from the theme itself, but are not loaded into the editor:

/* Table */

.wp-block-table thead th {
	border-bottom: 2px solid #bbb;
	padding-bottom: 0.5em;
}

.wp-block-table tr {
	border-bottom: 1px solid #eee;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
}

Summary

A couple of issues at play here:

• The three themes mentioned all come with opinionated table styles.
• In 2 out of three cases, those are loaded into the editor and the frontend both.
• In Seventeen, it's only loaded onto the frontend.

As far as options for next steps, we don't have a lot of options. The way the table block works in a pure block theme is that it applies a 1px solid currentColor style by default. That means the default border color is inherited from the Text color.

You can then separately change the border width, without setting a color, and the color remains inherited from the text:

Finally, you can set a border color, which sets the border color:

So the main problem here is, even if we were able to increase the specificity of the text color, these three themes would not inherit it.

The separate border-width and border-color, if you apply those, they do in fact affect Twenty Seventeen, as they should, in both editor and frontend:

So it's in the inheritance of the text color, that these three themes do not work.

Which means, if we were to fix this, it would need patches for all three themes, and unfortunately that seems unlikely to be feasible, since changing the table styles to use currentColor instead of their currently applied colors, would be a breaking visual change for every site that uses those themes.

The change we can make, which I'd recommend be opened as a new Trac issue for Twenty Seventeen, is a report that block styles are not loaded into the editor, as they should be.

Thanks for the report! What do you think?

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[DarkMatter-999]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60272
• PHP: 8.2.28
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.4.7-MariaDB-ubu2404 / Client: mysqlnd 8.2.28)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Fifteen 4.0, Twenty Sixteen 3.5, Twenty Seventeen 3.9
• MU Plugins: None activated
• Plugins:
  • Gutenberg 21.3.0-rc.1
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue is Reproducible: Table border is visible in the Editor but not visible on the Front-end after text color is changed.

Additional Notes

• This is a theme-specific styling issue, not a Gutenberg issue.
• The affected themes likely need updated CSS to support newer block-level styles introduced by the Block Editor.
• Switching to a modern, block-based theme resolves the issue.
• Since this is a theme-specific issue, it is recommended to move this to WordPress Trac

Supplemental Artifacts

Twenty Fifteen 4.0

Editor	Frontend

Twenty Sixteen 3.5

Editor	Frontend

Twenty Seventeen 3.9

Editor	Frontend

Related Trac Tickets

• #63309 – Twenty Fifteen: Table block border not appear properly.

• #63604 – Twenty Sixteen - Table blocks looks different in editor and front when text color is used.

• #58297 – Twenty Seventeen: Table block does not have same design in editor and front.

[SirLouen]

Looking at the Report, I can see that this clearly is related to Bundled Themes not a Gutenberg issue per se. Closing this ticket for reported-upstream because it appears that it has been already reported in multiple places in Trac already.

Thanks @DarkMatter-999 for the report.