Opened 12 months ago
Last modified 4 weeks ago
#60621 new defect (bug)
Twenty Nineteen: Search block lacks styling in the editor
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 5.8 |
Component: | Bundled Theme | Keywords: | changes-requested has-patch |
Focuses: | css | Cc: |
Description
Steps to reproduce the issue :-
- Activate Twenty Nineteen theme.
- Choose Search block.
Compare the page in both editor and front side.
You can able to see button default background color is different and input box default font-size and height is also different.
I have attached video for better understanding.
Video URL :- https://share.cleanshot.com/cM956rcv66tqc9MYYw8J
Attachments (1)
Change History (10)
#1
@
12 months ago
- Focuses css added
- Summary changed from Twenty Nineteen - Search block is having different design in editor and front side. to Twenty Nineteen: Search block lacks styling in the editor
- Version changed from 6.4.3 to 5.8
#2
@
12 months ago
Hi
Thank you for working on this issue.
The patch is an improvement over the unstyled search block that we have now.
I want to make the following change requests:
There are some minor formatting issues with both files:
Was the .CSS file generated by building the .SCSS file with the tools?
The CSS file has both two spaces and four spaces inside .wp-block-search__button
, it should be two.
There is a single space missing after the selector:
.wp-block-search__button{
Should be
.wp-block-search__button {
Line breaks / empty new lines are missing at the end of both files.
- With the font size added, the font size option on the block stopped working for the input field.
- The button design should match the button block design. The editor and front does not match.
- The customizer color option does not work for the button in the editor. See this related issue: https://core.trac.wordpress.org/ticket/59922
#4
@
12 months ago
Please note that 59922 has been merged. It adds some styling to the search block, but does not fix all the problems listed here.
This ticket was mentioned in PR #8094 on WordPress/wordpress-develop by @sainathpoojary.
5 weeks ago
#8
- Keywords has-patch added
Trac ticket: #60621
#9
@
4 weeks ago
Test Report
Description
This report validates whether the indicated patch works as expected.
Patch tested: https://github.com/WordPress/wordpress-develop/pull/8094
Environment
- WordPress: 6.8-alpha-59593
- PHP: 8.1.29
- Server: nginx/1.16.0
- Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
- Browser: Chrome 131.0.0.0
- OS: macOS
- Theme: Twenty Seventeen 3.8
Actual Results
- ✅ Issue resolved with patch.
The fundamental issue is that Twenty Nineteen never had styles for form elements in the editor (#45293). Some admin CSS applies to these elements, whether the editor is in an iframe or not.
I would prefer to support any input fields and button elements, but the Search block could be the most common use of them in a block editor context. It has been one of the starter widgets since WordPress 5.8.