Opened 8 months ago
Last modified 5 months ago
#60621 new defect (bug)
Twenty Nineteen: Search block lacks styling in the editor
Reported by: | nidhidhandhukiya | Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 5.8 |
Component: | Bundled Theme | Keywords: | changes-requested |
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 (8)
#1
@
8 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
@
8 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
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.