Opened 5 months ago
Closed 5 months ago
#61389 closed defect (bug) (fixed)
WordPress 6.6 Beta 1 search box in add themes is misaligned
Reported by: | balub | Owned by: | joedolson |
---|---|---|---|
Milestone: | 6.6 | Priority: | normal |
Severity: | normal | Version: | 6.6 |
Component: | Themes | Keywords: | has-screenshots has-patch |
Focuses: | ui, css, administration | Cc: |
Description
In WordPress 6.6 Beta 1, if we go to Appearance>Add themes, we can see the search box is misaligned,
Attachments (8)
Change History (29)
#2
@
5 months ago
- Focuses css added
We can solve the issue by adding the margin: 10px 0px;
at the .wp-filter .search-form
class.
@
5 months ago
We can solve the issue by adding the margin: 10px 0px;
at the .wp-filter .search-form
class.
This ticket was mentioned in PR #6745 on WordPress/wordpress-develop by @rejaulalomkhan.
5 months ago
#3
- Keywords has-patch added; needs-patch removed
Fixed the Add new theme search form alignment by adding the margin: 10px 0px;
at the .wp-filter .search-form
class.
@huzaifaalmesbah commented on PR #6745:
5 months ago
#5
Thanks For the PR @rejaulalomkhan. It's Looks Good For Me.
#6
@
5 months ago
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
- ✅ Issue resolved with patch.
Screenshots
Before Apply Patch | After Apply Patch ✅ |
#7
@
5 months ago
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
- ✅ Issue resolved with patch.
Screenshots
Before Patch | After Patch |
#9
@
5 months ago
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.
#10
@
5 months ago
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
#11
@
5 months ago
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
- ✅ Issue resolved with patch.
Screenshots
Before Patch | After Patch |
#12
@
5 months ago
- Keywords commit added; needs-testing removed
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.
#13
@
5 months ago
- Component changed from General to Themes
- Focuses administration added
- Keywords commit removed
- Version set to trunk
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; }
#15
@
5 months ago
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.
#17
@
5 months ago
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
- ✅ 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
@krupajnanda commented on PR #6745:
5 months ago
#18
@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
- ✅ 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 |
---|---|
This ticket was mentioned in PR #6803 on WordPress/wordpress-develop by @printsachen1.
5 months ago
#19
I fix it and margin for the search box without media query and delete margin top 0 for plugin search.
#20
@
5 months ago
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
Thank you for highlighting a valid issue. I can confirm that I am able to reproduce it.