Make WordPress Core

Opened 11 months ago

Closed 6 months ago

#60164 closed defect (bug) (fixed)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version: 6.1
Component: Bundled Theme Keywords: has-patch has-screenshots commit has-testing-info
Focuses: css Cc:

Description

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

Attachments (6)

60164.patch (447 bytes) - added by nidhidhandhukiya 11 months ago.
60164.2.patch (621 bytes) - added by sabernhardt 6 months ago.
adding styles in theme's blocks.css stylesheet, and including the padding
Krupa - before patch.png (14.2 KB) - added by krupajnanda 6 months ago.
Krupa - after patch.png (14.0 KB) - added by krupajnanda 6 months ago.
60164-before-patch.png (4.8 KB) - added by shailu25 6 months ago.
Before Patch - Search block when button is inside wrapper
60164-after-patch.png (4.8 KB) - added by shailu25 6 months ago.
After Patch - Search block when button is inside wrapper

Download all attachments as: .zip

Change History (21)

#1 @sabernhardt
11 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
11 months ago

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.✅

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

#3 @kamran8176
11 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 months ago

  • Keywords has-patch needs-testing added

#5 @imranhasanraaz
6 months 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

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.

#6 @imranhasanraaz
6 months ago

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.✅

#7 @karmatosed
6 months ago

  • Milestone changed from Awaiting Review to 6.6

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

@sabernhardt
6 months ago

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

#8 @krupajnanda
6 months ago

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

Last edited 6 months ago by krupajnanda (previous) (diff)

#9 @harshgajipara
6 months ago

  • Keywords needs-testing-info has-screenshots added

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

#10 @rejaulalomkhan
6 months ago

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 ✅
https://i.ibb.co/Qc6rsK4/20240606202450.png https://i.ibb.co/7RCNYQR/20240606202518.png

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

Props huzaifaalmesbah.

#11 @shailu25
6 months ago

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
6 months ago

Before Patch - Search block when button is inside wrapper

@shailu25
6 months ago

After Patch - Search block when button is inside wrapper

#12 @hmbashar
6 months ago

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
https://i.ibb.co/x8nBQsQ/Before-Patch.png

After Patch
https://i.ibb.co/fDjc3rB/After-Patch.png

#13 @rajinsharwar
6 months ago

  • Keywords commit has-testing-info added; needs-testing needs-testing-info removed

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.

#14 @karmatosed
6 months ago

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

#15 @karmatosed
6 months ago

  • Owner set to karmatosed
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.