Twenty Fifteen: Search Block button does not have theme's styling in the editor

[pitamdey]

In Theme Twenty Fifteen, Search Block button text is lowercase in editor and uppercase in frontend

[pitamdey]

Editor View

[pitamdey]

Frontend View

[pitamdey]

After applying this solution the issue is resolved

[narenin]

Hi,

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/61885/61885.patch

Environment:

OS: Windows
PHP: 8.2.12
WordPress: 6.6.1
Browser: Chrome
Theme: Twenty Fifteen (Version: 3.8)
Plugins: None activated
Actual Results:

✅ Before patch:
Backend: ​https://prnt.sc/hInRByb1ruU-
Frontend: ​https://prnt.sc/VFCDjlBcDP_t

✅ After patch:
Backend: ​https://prnt.sc/hInRByb1ruU-
Frontend: ​https://prnt.sc/E4kVg9ED-tdM

✅ Patch working well as desired solution.

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch.

[sabernhardt]

The Search button's colors and font are also wrong in the editor.

The editor-blocks stylesheet needs styles to match button styles on the front end.

/* Search */

.wp-block-search__button {
	background-color: #333;
	color: #fff;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

[shailu25]

Patch Updated.

[shailu25]

Corrected Search CSS Placement in editor-blocks.css

[sabernhardt]

These styles could fit better in the Widgets section (between Latest Posts and Colors).

Considering other elements of the Search block:

• The label matches the front.
• The input has a significantly different font-family. The editor appearance might benefit from (some of) these rules:

  .wp-block-search .wp-block-search__input {
    border-radius: 0;
    color: rgba(51, 51, 51, 0.7);
    font-family: "Noto Sans", sans-serif;
    font-size: 1em;
    padding: 0.5em;
  }
  

[pitamdey]

Updated Patch