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

[nidhidhandhukiya]

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 :- ​https://share.cleanshot.com/rHYWt545d6gSry8JNV9C

[sabernhardt]

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.

[yuvrajsinh2211]

Testing of: https://core.trac.wordpress.org/attachment/ticket/60164/60164.patch

Tested in the below environment:

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

---

Before Patch Screenshots:
Backend: ​https://prnt.sc/1agTX5rHWjn3
Frontend: ​https://prnt.sc/D5xDYjqv6JM_

---

After Patch Screenshots:
Backend: ​https://prnt.sc/dHI3AhnSfGkf
Frontend: ​https://prnt.sc/hDB5EHjfCobD

The patch is working properly.✅

[kamran8176]

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;
}

[imranhasanraaz]

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

Then

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.

[imranhasanraaz]

Test Report

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

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/60164/60164.patch

Environment:
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 124.0.0.0
OS: Windows 10/11
Theme: Twenty Twenty-One 2.2
MU Plugins: None activated
Plugins:
Test Reports 1.1.0

before Patch
Editor : ​https://prnt.sc/cISjGHw5yBA2
Frontend : ​https://prnt.sc/0oJai_q4vgB9

After Patch
Editor : ​https://prnt.sc/j27Dtmhstyox
Frontend : ​https://prnt.sc/jvEM2Pjs9lEg

Issue Resolved With Patch.✅

[karmatosed]

As we have confirmation in testing. I am going to move this forward to the most recent release for consideration.

[sabernhardt]

adding styles in theme's blocks.css stylesheet, and including the padding

[krupajnanda]

Test Report

Description

This report validates that the indicated patch works as expected. ✅

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

Environment

• WordPress: 6.6-beta1-58337-src
• PHP: 8.2.15
• Server: nginx/1.25.3
• Database: mysqli (Server: 8.0.36 / Client: mysqlnd 8.2.15)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Fourteen 3.9
• MU Plugins:
  • Safe Autoloaded Options Limit Test (MU Plugin) 1.0
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

Added as Attachment

[harshgajipara]

Test Report

This report validates that the indicated patch addresses the issue.

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

Environment

OS: Windows
PHP: 8.2.12
WordPress: 6.6-beta1-58337-src
Browser: Chrome
Theme: Twenty Fourteen
Plugins: None activated

Actual Results:

✅ Before patch: ​https://prnt.sc/mZ7rMxxe7VPW

✅ After patch: ​https://prnt.sc/MU2tqlK6m7d5

[rejaulalomkhan]

Test Report

Patch tested: 60164.2.patch​

Environment

• WordPress: 6.6-beta1-58337-src
• PHP: 8.3.7
• Server: nginx/1.25.2
• Database: mysqli (Server: 10.4.24-MariaDB / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: Windows 10/11
• Theme: Twenty Fourteen 3.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

Before Apply Patch	After Apply Patch ✅

Thanks for helping me and inspiring me to contribute to this ticket.

Props huzaifaalmesbah.

[shailu25]

Test Report:

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/60164/60164.2.patch

Description:

This report validates that the indicated patch works as expected. ✅

Environment:

WordPress - 6.6-beta1
OS - Windows
Browser - Firefox
Theme: Twenty Fourteen
PHP - 8.2.12

Actual Results:

• Search block's border is Visible when button is inside wrapper With Patch. ✅

Supplemental Artifacts:

• Added as Attachment

[shailu25]

Before Patch - Search block when button is inside wrapper

[shailu25]

After Patch - Search block when button is inside wrapper

[hmbashar]

Test Report

Patch tested: 60164.2.patch

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.7
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Fourteen 3.9
• MU Plugins: None activated
• Plugins:
  • FakerPress 0.6.6
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Before Patch

After Patch

[rajinsharwar]

Test Report

Patch tested: Patch 60164.2

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.1.23
• Server: nginx
• Database: mysqli
• Browser: Chrome
• OS: Windows
• Theme: Twenty Fourteen

Actual Results

1. ✅ The issue is resolved with a patch.

Screenshots

Before Patch:-
Frontend: ​https://prnt.sc/gw_Wm0VcDPbB

After Patch:-
In Frontend: ​https://prnt.sc/651gqd15PnbI

Marking this for 'commit' as this already have a good number of testing reports.
Also removing 'needs-testing-info' as comment 5 has the info.

[karmatosed]

Assigning to myself to follow through to commit, thank you everyone.

[karmatosed]

In 58369:

Twenty Fourteen: Fixes missing search block border.

The search block border was missing inside the wrapper on the front. This was done by adding styles to the theme block styles file along with padding.

Props nidhidhandhukiya, sabernhardt, yurajsinh2211, kamran8176, imranhasanraaz, krupajnanda, harshgajipara, rejaulalomkhan, shailu25, hmbashar, rajinsharwar.
Fixes #60164.