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[bot]]

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?