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: |
|
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)
Change History (11)
This ticket was mentioned in PR #8104 on WordPress/wordpress-develop by @sukhendu2002.
5 weeks ago
#1
- Keywords has-patch added
Trac ticket: https://core.trac.wordpress.org/ticket/62792
#2
follow-up:
↓ 4
@
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
- ✅ 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
#4
in reply to:
↑ 2
@
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; }
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
- ✅ 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
#5
@
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
- ✅ 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.
The placeholder for the columns block has the wrong font family