Make WordPress Core

Opened 5 months ago

Last modified 3 days ago

#60164 new defect (bug)

Twenty Fourteen: Search block border is missing when button is inside wrapper, on front end

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.1
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css Cc:


Steps to reproduce the issue :-

  1. Activate the Twenty Fourteen theme.
  2. Choose Search block.
  3. Now choose button inside option.

You can able to see that input is visible proper in editor side but when you check in user side if we clicked on that input area then only that input is visible.

I have attached video for better understanding.
Video URL :-

Attachments (1)

60164.patch (447 bytes) - added by nidhidhandhukiya 5 months ago.

Download all attachments as: .zip

Change History (7)

#1 @sabernhardt
5 months ago

  • Focuses css added
  • Summary changed from Twenty Fourteen :- Search block when button inside is used input is not visible proper in front side. to Twenty Fourteen: Search block border is missing when button is inside wrapper, on front end
  • Version set to 6.1

GB41393 lowered the specificity for the Search block's button, and the wrapper selector specificity is too low now.

The wrapper div would not have the default border or padding in any theme that used the old CSS reset on divs. Those themes include Twenty Ten, Twenty Eleven, Twenty Twelve, Twenty Fourteen, Twenty Fifteen and many themes by other authors.

div {
	border: 0;
	padding: 0;

This might be fixable in the block's styles instead of editing each theme:

:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
	// a little more specific than one element selector for wrapper styles
	html body & {
		padding: $grid-unit-05;
		border: 1px solid $gray-600;
		box-sizing: border-box;

If editing Core themes is preferable, especially if another border color is more appropriate, the changes probably would belong in their blocks.css stylesheets.

#2 @yuvrajsinh2211
5 months ago

Testing of:

Tested in the below environment:

PHP: 8.1.9
WordPress: 6.4
Theme: Twenty Fourteen
Browser: Chrome
Active Plugin: None

Before Patch Screenshots:

After Patch Screenshots:


The patch is working properly.✅

Version 0, edited 5 months ago by yuvrajsinh2211 (next)

#3 @kamran8176
5 months ago

Hello, I tested the Above problem in another way below are the examples with :is and specific selector, I just remove :where pseudo-classes, because it has 0 specificity, Twenty Fourteen's CSS reset on div, overrides the border and padding of the input, below are two-way I tried to fix the problem.

Solution No 1.

.wp-block-search__button-inside .wp-block-search__inside-wrapper{
	border: 1px solid #949494;
	padding: 4px;

Solution No 2.

:is(.wp-block-search__button-inside .wp-block-search__inside-wrapper){
	border: 1px solid #949494;
	padding: 4px;

#4 @karmatosed
8 weeks ago

  • Keywords has-patch needs-testing added

#5 @imranhasanraaz
3 days ago

Testing instructions

Apply PATCH 60164 linked above.
Open the theme folder in a termninal
Build the CSS files from the scss files with these npm commands:
npm install
npm run build


  1. Create a new post
  2. Add a search block.
  3. Now choose button inside option.

You can able to see that input is visible properly visible to both editor and frontend.

#6 @imranhasanraaz
3 days ago

Test Report

This Report validates that the indicated patch addresses the issue.✅

Patch Tested:

WordPress: 6.6-alpha-57778-src
PHP: 8.2.19
Server: nginx/1.25.5
Database: mysqli (Server: 8.0.37 / Client: mysqlnd 8.2.19)
Browser: Chrome
OS: Windows 10/11
Theme: Twenty Twenty-One 2.2
MU Plugins: None activated
Test Reports 1.1.0

before Patch
Editor :
Frontend :

After Patch
Editor :
Frontend :

Issue Resolved With Patch.✅

Note: See TracTickets for help on using tickets.