Make WordPress Core

Opened 4 months ago

Last modified 2 weeks 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:

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 (1)

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

Download all attachments as: .zip

Change History (5)

#1 @sabernhardt
4 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
4 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.✅

Last edited 4 months ago by yuvrajsinh2211 (previous) (diff)

#3 @kamran8176
3 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
2 weeks ago

  • Keywords has-patch needs-testing added
Note: See TracTickets for help on using tickets.