Make WordPress Core

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's profile balub Owned by: joedolson's profile 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)

Search-box.png (687.3 KB) - added by balub 5 months ago.
add theme.jpg (188.2 KB) - added by rejaulalomkhan 5 months 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 months ago.
Before Patch
Screenshot1.png (870.4 KB) - added by syamraj24 5 months ago.
after Patch
Scresdadasdenshot.png (675.8 KB) - added by nazmul111 5 months ago.
61389.diff (410 bytes) - added by sabernhardt 5 months 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 months ago.
After PR applied - Theme's page - Searchbox UI bug fix.jpg.jpg (390.3 KB) - added by krupajnanda 5 months ago.

Change History (29)

@balub
5 months ago

#1 @huzaifaalmesbah
5 months 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
5 months ago

  • Focuses css added

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

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

#4 @hmbashar
5 months ago

  • Keywords needs-testing added

@huzaifaalmesbah commented on PR #6745:


5 months ago
#5

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

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

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

  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
5 months 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 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 @syamraj24
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

@syamraj24
5 months ago

Before Patch

@syamraj24
5 months ago

after Patch

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

  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 months ago by mdnesarmridha (previous) (diff)

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

@sabernhardt
5 months ago

adding margin for only the theme install screen

#14 @joedolson
5 months ago

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

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

#16 @sabernhardt
5 months ago

#61414 was marked as a duplicate.

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

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

  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 months 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 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

#21 @joedolson
5 months 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.