Make WordPress Core

Opened 5 months ago

Last modified 6 weeks ago

#60621 new defect (bug)

Twenty Nineteen: Search block lacks styling in the editor

Reported by: nidhidhandhukiya's profile 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 :-

  1. Activate Twenty Nineteen theme.
  2. 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)

60621.patch (1.2 KB) - added by nidhidhandhukiya 5 months ago.

Download all attachments as: .zip

Change History (8)

#1 @sabernhardt
5 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

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.

Last edited 5 months ago by sabernhardt (previous) (diff)

#2 @poena
5 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.

#3 @poena
5 months ago

  • Keywords changes-requested added

#4 @poena
5 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.

#5 @karmatosed
3 months ago

  • Keywords has-patch added

#6 @karmatosed
7 weeks ago

  • Milestone changed from Awaiting Review to Future Release

#7 @karmatosed
6 weeks ago

  • Keywords has-patch removed
Note: See TracTickets for help on using tickets.