Twenty Ten: Editor styles conflicts with the block editor styles

[poena]

There is CSS in twentyten/editor-style.css that use the * selector and affects part of the block editor that is not intended to be styled by themes.

Examples:
The font family of the block placeholders is wrong. You can test this by adding a columns block or Media & text block.

The inserter inside the buttons block has a dark text color over dark background, so the + icon is the wrong color and not as visible.

Wen creating a patch for this issue, remember that the editor style must still work for all versions of WordPress that the theme supports, including versions before the block editor was implemented.

[poena]

The placeholder for the columns block has the wrong font family

Trac ticket: https://core.trac.wordpress.org/ticket/62792

[mai21]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.8-alpha-59565
• PHP: 8.3.14
• Server: nginx/1.26.2
• Database: mysqli (Server: 10.5.27-MariaDB-ubu2004-log / Client: mysqlnd 8.3.14)
• Browser: Chrome 131.0.0.0
• OS: Linux
• Theme: Twenty Ten 4.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WordPress Beta Tester 3.6.2

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

steps:
1- active theme 2010
2- add/edit page and add columns block => notice the style with * for column place holder
3- select any option of columns => see the button style and the + is not displayed (if we switch the theme to 2020 , the + will be displayed and no * style in the button)

Note: When testing the patch, make sure to check with ltr language i.e English and rtl language i.e Arabic

Supplemental Artifacts

Added as Attachment

[mai21]

The + isnot displayed due to the style

@Sukhendu2002 Thanks for the PR. I applied the changes mentioned on the PR manually and can see the + is not displayed for added columns. can you please check.

[devtanbir]

The plus icon inside the column has a white color in its SVG path, which is why the plus icon is not visible. I’ve added the code solution below. Adding this will solve the problem.

.block-core-columns .components-button svg path {
    color: inherit;
}

Before:

After:

Replying to mai21:

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.8-alpha-59565
• PHP: 8.3.14
• Server: nginx/1.26.2
• Database: mysqli (Server: 10.5.27-MariaDB-ubu2004-log / Client: mysqlnd 8.3.14)
• Browser: Chrome 131.0.0.0
• OS: Linux
• Theme: Twenty Ten 4.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WordPress Beta Tester 3.6.2

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

steps:
1- active theme 2010
2- add/edit page and add columns block => notice the style with * for column place holder
3- select any option of columns => see the button style and the + is not displayed (if we switch the theme to 2020 , the + will be displayed and no * style in the button)

Note: When testing the patch, make sure to check with ltr language i.e English and rtl language i.e Arabic

Supplemental Artifacts

Added as Attachment

[shanemuir]

screenshot of issue without patch applied

[shanemuir]

screenshot of issue without patch applied (arabic)

[shanemuir]

screenshot of issue resolved with patch applied

[shanemuir]

screenshot of issue resolved with patch applied (Arabic)

[shanemuir]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8104.diff

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.3.15
• Server: Apache/2.4.62 (Unix) OpenSSL/3.4.0 PHP/8.3.15
• Database: mysqli (Server: 8.0.39 / Client: mysqlnd 8.3.15)
• Browser: Chrome 132.0.0.0
• OS: macOS
• Theme: Twenty Ten 4.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

Tested patch with languages: UK English, Arabic

Supplemental Artifacts

I have attached screenshots of the issue being resolved with patch applied. Also tested the content paragraph on the columns block.