[wp-trac] [WordPress Trac] #60164: Twenty Fourteen: Search block border is missing when button is inside wrapper, on front end (was: Twenty Fourteen :- Search block when button inside is used input is not visible proper in front side.)

[WordPress Trac]

#60164: Twenty Fourteen: Search block border is missing when button is inside
wrapper, on front end
------------------------------+------------------------------
 Reporter:  nidhidhandhukiya  |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Bundled Theme     |     Version:  6.1
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:  css
------------------------------+------------------------------
Changes (by sabernhardt):

 * focuses:   => css
 * version:   => 6.1


Comment:

 GB41393
 [https://github.com/WordPress/gutenberg/blob/2dbd8a5a6512ab6e684eaa3ccbd5e8ff9f986177/packages
 /block-library/src/search/style.scss#L67-L71 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 [https://core.trac.wordpress.org/browser/trunk/src/wp-
 content/themes/twentyfourteen/style.css?rev=57069#L64 CSS reset] on divs.
 Those themes include Twenty Ten, Twenty Eleven, Twenty Twelve, Twenty
 Fourteen, Twenty Fifteen and many
 [https://wpdirectory.net/search/01HJV3D959M4YCBMWTXB4SV924 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60164#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform