Twenty Nineteen: Table block Stripes style does not show borders in the editor

[viralsampat]

Hello Team,

I noticed that the Table block does not render correctly on the front-end when the "Stripes" style is applied. The appearance differs from what is shown in the editor.

Upon investigation, it seems that the issue is caused by the theme's CSS overriding the default styling of the table block on the front-end.

I believe the visual output should remain consistent between the editor and front-end for better user experience.

For the reference, Here, I have attached the video along with the corresponding screenshots.

Thanks,

[viralsampat]

Issue video:

[viralsampat]

Table block CSS override

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

[viralsampat]

Editor-end

[viralsampat]

Front-end

[sainathpoojary]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63469/63469.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: macOS
• Theme: Twenty Nineteen 3.1
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

Actual Results

✅ Issue resolved with patch.

Supplemental Artifacts

Before:

After:

[sabernhardt]

Twenty Nineteen has given the Table blocks a gray border on the front end since the initial version, whether the style was Default or Stripes. When the editor removed .editor-styles-wrapper from the theme's styles, the block library styles overrode the border color with transparent.

You probably could add .editor-styles-wrapper in the ​SCSS to increase specificity:

.editor-styles-wrapper .wp-block-table {

	td, th {
		border-color: $color__text-light;
	}
}

which would compile to this in style-editor.css:

.editor-styles-wrapper .wp-block-table td, .editor-styles-wrapper .wp-block-table th {
  border-color: #767676;
}

[avinashbhosale]

Reproduction Report

Description

This report validates that the issue can be reproduced.

Environment

• WordPress: 6.8.1
• PHP: 8.2.27
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.27)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Nineteen 3.1
• MU Plugins: None activated
• Plugins:
  • Admin and Site Enhancements (ASE) 7.8.12
  • Site Kit by Google 1.153.0
  • Test Reports 1.2.0
  • WP Consent API 1.0.8

Actual Results

1. ✅ Error condition occurs (reproduced).

Attachments

screenshots -
https://core.trac.wordpress.org/attachment/ticket/63469/63469_Editor_Stripes.jpg
https://core.trac.wordpress.org/attachment/ticket/63469/63469_FrontEnd_Stripes.jpg

[avinashbhosale]

Editor

[avinashbhosale]

FrontEnd

[Subrata Deb Nath]

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63469/63469.patch

Environment
WordPress: 6.9-alpha-60093-src
PHP: 8.2.28
Server: nginx/1.27.5
Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
Browser: Chrome 136.0.0.0
OS: Windows 11
Theme: Twenty Nineteen 3.1
MU Plugins: None activated
Plugins: Test Reports 1.2.0
Actual Results
✅ Issue resolved with patch.

Adds the body element to the selector in editor styles to show the theme's border color, even with the Stripes style. With older versions of WordPress, body is changed to .editor-styles-wrapper.

Trac 63469