Twenty Fourteen: Table block does not have same design in editor and front.

[pranitdugad]

Steps to reproduce the issue:-

1. Activate Twenty Fourteen Theme.
2. Choose a Table block.
3. Add some text and Colors.
4. Check in the editor side, table border color and the user side both.

In the editor side, we have different border color and when you check front side that border color is different.

Video Url - ​https://drive.google.com/file/d/1bk2uQX4fkzrvgDQl2IcS6kh0KKap1SMX/view?usp=sharing

[poena]

Testing results

Testing patch https://core.trac.wordpress.org/attachment/ticket/60293/60293.patch

Environment

• WordPress: 6.4.3
• PHP: 8.1.23
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
• Browser: Chrome 121.0.0.0
• OS: macOS
• Theme: Twenty Fourteen 3.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ❌ The default table block without text color, has the wrong border color. The default needs to be unchanged.
2. ✅ The table block with a text color from the palette, or a custom text color from the color picker, displays correctly in the editor and front.

---

There is another bug that is not mentioned in the ticket description:
Before the patch, the border color in the editor and front does not match, even when the user does not select a text color.
So it would be good to fix that bug, too. -The editor should match the color that is the default color on the front.

[karmatosed]

@nidhidhandhukiya are you able to iterate on this patch as @poena requested? If so it would be great to revisit and see about getting this into the next release - thank you.

[shailu25]

Patch Updated

[shailu25]

Updated Patch as per Suggested in above comment.

[karmatosed]

@shailu25 thank you for the patch but it doesn't fully fix what @poena was requesting based on my tests. It only fixes the border color on the editor, not front.

So it would be good to fix that bug, too. -The editor should match the color that is the default color on the front.

I will share an attached image to show what the patch has today. If it can also pick up front and back that would be ideal, thank you.

[shailu25]

Patch Updated

[shailu25]

Updated Patch.

[shailu25]

@karmatosed I have Fixed Both Issues in 60293.2.patch

[karmatosed]

Thank you @shailu25. I can confirm this works in testing. As we are trying to have a unified approach on tables for all themes I am gong to loop in @poena to this issue to get confirmation of the approach. Once we have that we can go ahead with either changes or committing.

[poena]

This is close, I tested it with 6.5.3.

When the striped block style variation is used, the border is visible on the front but not the editor.
I am seeing different behaviors in different themes, so we need to decide what the expected behavior is.

For example in Twenty Twenty, the border is visible in both the editor and front, but on the front the border does not use the text color as the border color...
In Twenty Seventeen, the top and left border never shows on the front, no matter what color setting or style variation that is selected...

[poena]

Looking at the CSS in Gutenberg, the default is to have a transparent border when the striped styled is used:
​https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/table/style.scss#L74

So I think the expectation is for it to remain transparent in both the editor and front even when the user changes the text color.

With this PR,

.wp-block-table table[class*="-text-color"] *

overrides the transparent color set by the block:

.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th

[karmatosed]

Thank you for confirming @poena - let's get a refresh added to this to add that into this PR to have that. @shailu25 are you able to add the changes requested?

[shailu25]

Sure @karmatosed

I will add suggested changes as per mentioned in above comment.

[shailu25]

Patch Updated

[shailu25]

@karmatosed @poena

I have updated patch as per suggested in above comment.

[hmbashar]

Test Report

Patch tested: 60293.3.patch

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.7
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Fourteen 3.9
• MU Plugins: None activated
• Plugins:
  • FakerPress 0.6.6
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

Editor view before patch

Frontend View Before Patch

Frontend View After Patch

[karmatosed]

Assigning to myself to move to commit. Thank you everyone for your collaboration on this so far.

[ugyensupport]

Bug Report

Description

Twenty Fourteen: Table block does not have same design in editor and front.

Environment

• WordPress: 6.5.4
• PHP: 8.0
• Server: Apache/2.4.10 (Debian)
• Database: mysqli (Server: 5.5.59-MariaDB-1~wheezy / Client: 5.5.62)
• Browser: Chrome 125.0.0.0 (macOS)
• Theme: Twenty Fourteen 3.9
• MU-Plugins: None activated
• Plugins:
  • WordPress Beta Tester 3.5.5

Steps to Reproduce

1. Activate Twenty Fourteen Theme.

Choose a Table block.
Add some text and Colors.
Check in the editor side, table border color and the user side both.
In the editor side, we have different border color and when you check front side that border color is different 🐞 Bug occurs.

Expected Results

https://core.trac.wordpress.org/attachment/ticket/60293/60293.3.patch

1. Before patch : ​https://ibb.co/MZPHvdp

After patch : ​https://ibb.co/4spKjqb ✅

Actual Results

1. After patch works smoothly as aspected. ✅

[sabernhardt]

I commented on Slack but failed to update the ticket.

The patch on #60293 could use the has-text-color class (and/or has-background) instead of the class*=

I'm also not sure about inheriting border colors. When someone creates a block and sets the text color, matching the border color to the text might be expected. However, anyone who already created a Table or Calendar block with a text color would not expect the border to change in a future update (which typically would increase the contrast).

[karmatosed]

In 58399:

Twenty Fourteen: Fixes table block not having same design in editors.

The table block did not have the same design in the editor for front and back. This resolves the issue for the front end editor.

Props pranitdugad, nidjidhandhukiya, poena, shailu25, hmbashar, ugyensupport.
Fixes #60293.

[sabernhardt]

comparing Table blocks on the front end before and after this change

[sabernhardt]

comparing Table blocks in the (non-framed) editor before and after this change

[sabernhardt]

Outdated selectors caused the reported border color difference and other discrepancies between the front end and editor. I opened #61563 to follow up.