Make WordPress Core

Opened 5 weeks ago

Last modified 3 weeks ago

#62792 new defect (bug)

Twenty Ten: Editor styles conflicts with the block editor styles

Reported by: poena's profile poena Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-testing-info
Focuses: Cc:

Description

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.

Attachments (6)

twenty-ten-columns.png (45.4 KB) - added by poena 5 weeks ago.
The placeholder for the columns block has the wrong font family
columnBtn_bug.png (152.9 KB) - added by mai21 5 weeks ago.
The + isnot displayed due to the style
without-patch-english.png (310.1 KB) - added by shanemuir 3 weeks ago.
screenshot of issue without patch applied
without-patch-arabic.png (308.0 KB) - added by shanemuir 3 weeks ago.
screenshot of issue without patch applied (arabic)
with-patch-english.png (313.5 KB) - added by shanemuir 3 weeks ago.
screenshot of issue resolved with patch applied
with-patch-arabic.png (313.7 KB) - added by shanemuir 3 weeks ago.
screenshot of issue resolved with patch applied (Arabic)

Download all attachments as: .zip

Change History (11)

@poena
5 weeks ago

The placeholder for the columns block has the wrong font family

This ticket was mentioned in PR #8104 on WordPress/wordpress-develop by @sukhendu2002.


5 weeks ago
#1

  • Keywords has-patch added

#2 follow-up: @mai21
5 weeks ago

  • Keywords has-testing-info added

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

Last edited 5 weeks ago by mai21 (previous) (diff)

@mai21
5 weeks ago

The + isnot displayed due to the style

@mai21 commented on PR #8104:


5 weeks ago
#3

@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.
https://github.com/user-attachments/assets/b526058a-c9eb-4c32-aa0b-983d819e0b50

#4 in reply to: ↑ 2 @devtanbir
4 weeks ago

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:
https://i.ibb.co.com/s6YzMCd/Screenshot-2025-01-10-at-11-09-40-AM.png

After:
https://i.ibb.co.com/bRYTdJ6/Screenshot-2025-01-10-at-11-17-40-AM.png

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

screenshot of issue without patch applied

@shanemuir
3 weeks ago

screenshot of issue without patch applied (arabic)

@shanemuir
3 weeks ago

screenshot of issue resolved with patch applied

@shanemuir
3 weeks ago

screenshot of issue resolved with patch applied (Arabic)

#5 @shanemuir
3 weeks ago

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.

Note: See TracTickets for help on using tickets.