Make WordPress Core

Opened 4 months ago

Last modified 3 days ago

#60293 new defect (bug)

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

Reported by: pranitdugad's profile pranitdugad Owned by:
Milestone: 6.6 Priority: normal
Severity: minor Version:
Component: Bundled Theme Keywords: has-patch changes-requested
Focuses: ui, css Cc:

Description

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

Attachments (5)

60293.patch (755 bytes) - added by nidhidhandhukiya 4 months ago.
60293.diff (1.3 KB) - added by shailu25 6 weeks ago.
Patch Updated
SCR-20240422-opkt.png (34.8 KB) - added by karmatosed 4 weeks ago.
60293.2.diff (1.2 KB) - added by shailu25 3 weeks ago.
Patch Updated
60293.2.patch (1.2 KB) - added by shailu25 3 weeks ago.
Updated Patch.

Download all attachments as: .zip

Change History (13)

#1 @poena
3 months ago

  • Keywords changes-requested added

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.

Last edited 3 months ago by poena (previous) (diff)

#2 @karmatosed
6 weeks ago

  • Milestone changed from Awaiting Review to 6.6

@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
6 weeks ago

Patch Updated

#3 @shailu25
6 weeks ago

  • Keywords has-patch needs-testing added; changes-requested removed

Updated Patch as per Suggested in above comment.

#4 @karmatosed
4 weeks ago

@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
3 weeks ago

Patch Updated

@shailu25
3 weeks ago

Updated Patch.

#5 @shailu25
3 weeks ago

@karmatosed I have Fixed Both Issues in 60293.2.patch

#6 @karmatosed
6 days ago

  • Keywords needs-testing removed

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.

#7 @poena
3 days ago

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...

#8 @poena
3 days ago

  • Keywords changes-requested added

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
Note: See TracTickets for help on using tickets.