WordPress 6.6 Beta 1 search box in add themes is misaligned

[balub]

In WordPress 6.6 Beta 1, if we go to Appearance>Add themes, we can see the search box is misaligned,

[huzaifaalmesbah]

Thank you for highlighting a valid issue. I can confirm that I am able to reproduce it.

[rejaulalomkhan]

We can solve the issue by adding the margin: 10px 0px; at the .wp-filter .search-form class.

[rejaulalomkhan]

We can solve the issue by adding the margin: 10px 0px; at the .wp-filter .search-form class.

Fixed the Add new theme search form alignment by adding the margin: 10px 0px; at the .wp-filter .search-form class.

Thanks For the PR @rejaulalomkhan. It's Looks Good For Me.

[huzaifaalmesbah]

Test Report

Patch tested: ​PR6745

Environment

• WordPress: 6.6-beta1-58337-src
• PHP: 8.3.7
• Server: nginx/1.25.5
• Database: mysqli (Server: 11.3.2-MariaDB / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

Before Apply Patch	After Apply Patch ✅

[hmbashar]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​PR6745

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 Eleven 4.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

Before Patch	After Patch

[SergeyBiryukov]

Hi there, thanks for the ticket!

Appears to be introduced in [58146] / #40331.

[nazmul111]

Test Report

Description

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/6745

Environment

• WordPress: 6.6-beta1-58337-src
• PHP: 8.2.19
• Server: nginx/1.25.5
• Database: mysqli (Server: 8.0.37 / Client: mysqlnd 8.2.19)
• Browser: Chrome 125.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Four 1.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Expected Results

✅ Issue resolved with patch.

[syamraj24]

Test Report
Description
Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/6745
Environment

• WordPress: 6.6-beta1-58352
• PHP: 8.0.1
• Server: Apache/2.4.33 (Win64) OpenSSL/1.0.2u mod_fcgid/2.3.9 PHP/8.0.1
• Database: mysqli (Server: 5.7.24 / Client: mysqlnd 8.0.1)
• Browser: Chrome 125.0.0.0 (Windows 10/11)
• Theme: Twenty Seventeen 3.6
• MU-Plugins: None activated
• Plugins:
  • WordPress Beta Tester 3.5.5

Expected Results
✅ issue resolved

[syamraj24]

Before Patch

[syamraj24]

after Patch

[mdnesarmridha]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/6745

Environment

• WordPress: 6.6-beta1-58337-src
• PHP: 7.4.33
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.1.0 / Client: mysqlnd 7.4.33)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

Before patch ​https://ibb.co/8D0gJv1
After patch ​https://ibb.co/w7xvXD6

[rajinsharwar]

Test Report

Patch tested: ​PR-6745

Environment

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

Actual Results

✅ The issue is resolved with a patch.

Screenshots

Before Patch:-
​https://prnt.sc/jGzmZ847Jolw

After Patch:-
​https://prnt.sc/2D1dx7pP-hZv

Marking this for 'commit' and removing 'needs-testing' as this already has a good number of testing reports.

[sabernhardt]

This has not been tested on other screens that contain the filter search box.

[58146] purposely removed the 10px 0 margin from the search box. Adding it back would make too much space on the Media page (with items in list mode), and the Plugins search would have a bottom margin without any on the top.

If all of 40331.5.diff is good, it contains a margin for the theme installation page:

.theme-install-php .wp-filter .search-form {
        margin: 10px 0;
}

[sabernhardt]

adding margin for only the theme install screen

[colorful tones]

This has not been tested on other screens that contain the filter search box.

Yes, let's target only what we need to update. It seems that the regression is only affecting the Add Themes area. I checked the Media Library search and Plugins search and they're not impacted by this regression.

Also, it is worth noting that the Add Media area has a margin: 11px 0; (see: ​https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/css/media-views.css#L1217).

While I think @sabernhardt patch is suitable we might want to consider:

.theme-install-php .wp-filter .search-form {
    margin-block: 11px;
}

The 11px matches the Media Library and the margin-block only targets the block's start and end margins while accounting for writing mode, directionality, and text orientation.

[sabernhardt]

#61414 was marked as a duplicate.

[krupajnanda]

Test Report

Description

This report validates that the added fix works as expected.

PR tested: ​https://github.com/WordPress/wordpress-develop/pull/6745

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 Twenty-Four 1.1
• MU Plugins:
  • Safe Autoloaded Options Limit Test (MU Plugin) 1.0
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ UI glitch has resolved with PR.

Additional Notes

• I have tested this "Search box" on various page like Plugins and Media Page and it seems that area has not affected.

Supplemental Artifacts

Add as Attachment

@rejaulalomkhan Thanks for this PR! The added fix is working as expecred. ✅

## Test Report
### Description
This report validates whether the added fix is working as expected.

### 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 Twenty-Four 1.1
• MU Plugins:
  • Safe Autoloaded Options Limit Test (MU Plugin) 1.0
• Plugins:
  • Test Reports 1.1.0

### Actual Results

1. ✅ Issue resolved with fix.

### Additional Notes
I have tested this "Search box" on various page like Plugins and Media Page and it seems that area has not affected.

### Supplemental Artifacts
Add as Attachment

Before Fix	After Fix

I fix it and margin for the search box without media query and delete margin top 0 for plugin search.

[printsachen1]

I have found a better solution, i deleted the media query and add margin-11px 0px, also i delteted margin-top on search-form for plugins.
​https://github.com/WordPress/wordpress-develop/pull/6803

[joedolson]

In 58405:

Administration: A11y: Add visible labels in theme UI.

Finish task to replace placeholders used for labels with visible label elements. Add label elements in theme browser and theme installation screen. Change position of search input to match other user interfaces in WordPress.

Also crediting all contributors to ticket #61389, which this also closes.

Props joedolson, rcreators, sabernhardt, balub, rejaulalomkhan, syamraj24, nazmul111, krupajnanda, huzaifaalmesbah, hmbashar, mdnesarmridha, colorful-tones, printsachen1.
Fixes #40331, #61389.

"Thanks for the PR, @rejaulalomkhan! It looks great to me. Appreciate your effort!"