Make WordPress Core

Opened 6 weeks ago

Closed 5 weeks ago

#61389 closed defect (bug) (fixed)

WordPress 6.6 Beta 1 search box in add themes is misaligned

Reported by: balub's profile balub Owned by: joedolson's profile joedolson
Milestone: 6.6 Priority: normal
Severity: normal Version: trunk
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)

Search-box.png (687.3 KB) - added by balub 6 weeks ago.
add theme.jpg (188.2 KB) - added by rejaulalomkhan 6 weeks ago.
We can solve the issue by adding the margin: 10px 0px; at the .wp-filter .search-form class.
Screenshot2.png (851.2 KB) - added by syamraj24 5 weeks ago.
Before Patch
Screenshot1.png (870.4 KB) - added by syamraj24 5 weeks ago.
after Patch
Scresdadasdenshot.png (675.8 KB) - added by nazmul111 5 weeks ago.
61389.diff (410 bytes) - added by sabernhardt 5 weeks ago.
adding margin for only the theme install screen
Before PR applied - Theme's page - Searchbox UI bug.jpg (372.8 KB) - added by krupajnanda 5 weeks ago.
After PR applied - Theme's page - Searchbox UI bug fix.jpg.jpg (390.3 KB) - added by krupajnanda 5 weeks ago.

Change History (29)

@balub
6 weeks ago

#1 @huzaifaalmesbah
6 weeks ago

  • Keywords needs-patch has-screenshots added

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

#2 @rejaulalomkhan
6 weeks ago

  • Focuses css added

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

@rejaulalomkhan
6 weeks 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.


6 weeks 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.

#4 @hmbashar
6 weeks ago

  • Keywords needs-testing added

@huzaifaalmesbah commented on PR #6745:


6 weeks ago
#5

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

#6 @huzaifaalmesbah
6 weeks 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

  1. ✅ Issue resolved with patch.

Screenshots

Before Apply Patch After Apply Patch ✅
https://i.ibb.co/Y3rvKb1/Huzaifa-20240606191116.png https://i.ibb.co/0GHz6Sm/Huzaifa-20240606191057.png

#7 @hmbashar
6 weeks 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

  1. ✅ Issue resolved with patch.

Screenshots

Before Patch After Patch
https://i.ibb.co/dJbhpcB/Before-Patch-Apply.png https://i.ibb.co/sHGsxWC/After-Patch.png

#8 @SergeyBiryukov
6 weeks ago

  • Milestone changed from Awaiting Review to 6.6

Hi there, thanks for the ticket!

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

#9 @nazmul111
5 weeks 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 @syamraj24
5 weeks 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

@syamraj24
5 weeks ago

Before Patch

@syamraj24
5 weeks ago

after Patch

#11 @mdnesarmridha
5 weeks 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

  1. ✅ Issue resolved with patch.

Screenshots

Before Patch After Patch
https://i.ibb.co/KjXxY4T/before-patch.png https://i.ibb.co/DYSqy3K/After-patch.png
Last edited 5 weeks ago by mdnesarmridha (previous) (diff)

#12 @rajinsharwar
5 weeks 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 @sabernhardt
5 weeks 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;
}

@sabernhardt
5 weeks ago

adding margin for only the theme install screen

#14 @joedolson
5 weeks ago

  • Owner set to joedolson
  • Status changed from new to accepted

#15 @colorful tones
5 weeks 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.

#16 @sabernhardt
5 weeks ago

#61414 was marked as a duplicate.

#17 @krupajnanda
5 weeks 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

  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

@krupajnanda commented on PR #6745:


5 weeks 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

  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
https://github.com/WordPress/wordpress-develop/assets/15173772/a01cfcb7-1c3e-4c9b-8674-6e13ae9be019 https://github.com/WordPress/wordpress-develop/assets/15173772/7b2e9f7b-313a-4721-be16-6e8a5a80255c

This ticket was mentioned in PR #6803 on WordPress/wordpress-develop by @printsachen1.


5 weeks ago
#19

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

#20 @printsachen1
5 weeks 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

#21 @joedolson
5 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.