Misplaced filter themes wrapper (under Customize > Change Theme > .org themes browser)

[kharisblank]

Steps to reproduce the issue:

1. Go to Customize
2. Click on Change theme button
3. Switch to WordPress.org themes

Screen recording: ​https://cldup.com/tiBD_mLB5Q.mov

[ankitkumarshah]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Seventeen 3.8
• MU Plugins: None activated

Actual Results

1. ✅ Error condition occurs (reproduced).

Supplemental Artifacts

[benazeer]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.7.1
• PHP: 8.1.22
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.22)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Seventeen 3.8
• MU Plugins: None activated
• Plugins:
  • Gutenberg 19.7.0-rc.1
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).

Screenshot:

​https://postimg.cc/Y4yM7TCz

Trac ticket: #62637

## Description
This PR addresses an issue where the "Filter themes" wrapper element was misplaced within the "Customize > Change Theme > .org themes browser" section of the application.

[sainathpoojary]

Test Report

Description

This report validates whether the indicated patch works as expected.

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

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-One 2.4
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

Actual Results

✅ Issue resolved with patch.

Supplemental Artifacts

Before:

After:

Trac ticket: https://core.trac.wordpress.org/ticket/62637

Trac ticket: https://core.trac.wordpress.org/ticket/62637

[mukesh27]

Thanks for ticket.

I also reproduce the issue and open PR ​https://github.com/WordPress/wordpress-develop/pull/7942 that update the class for wrapper DIV.

Take a look and share your feedback.

Moving to 6.8 for visibility.

Hi @mukeshpanchal27,
I tested the changes and really like the alignment of the search bar and filter button. According to my understanding, I believe that if we remove the search-form class, it would be beneficial to also eliminate the corresponding class names from the CSS to maintain cleanliness and avoid redundancy. For example:

.customize-preview-header.themes-filter-bar .search-form{}

.customize-preview-header.themes-filter-bar .search-form
	.themes-filter-bar .themes-filter-container{}

Removing these class names from the CSS would help streamline the code since they are no longer needed. Please let me know if my understanding is correct.

Hi @mukeshpanchal27,

I tested out the patch, and it looks really great.

[parthvataliya]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/7942.diff

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: Linux
• Theme: Twenty Eleven 4.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• I tested the PR opened by @mukesh27 , and it works fine with all the functionality. Adding the filter option in this place is ideal.

[im3dabasia1]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.25
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
• Browser: Chrome 129.0.0.0
• OS: macOS
• Theme: Twenty Nineteen 3.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).

Supplemental Artifacts

[im3dabasia1]

Test Report

Description

This report validates whether the indicated patch works as expected.

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

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.25
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
• Browser: Chrome 129.0.0.0
• OS: macOS
• Theme: Twenty Nineteen 3.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

[sukhendu2002]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/7942.diff

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Nineteen 3.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

[praful2111]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/7942.diff

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: Linux
• Theme: Twenty Twenty 2.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

[ruchirj]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/7942.diff

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.4.2 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: Linux
• Theme: Twenty Thirteen 4.3
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

[imranhasanraaz]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/7942.diff

Environment

• WordPress: 6.8-beta1-59933-src
• PHP: 7.4.33
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 7.4.33)
• Browser: Chrome 133.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

✅ Issue resolved with patch.

Before : ​https://prnt.sc/Mo6wj38qv8UL
After : ​https://prnt.sc/03mL3w9apu00

[shailu25]

Test Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/7942

Environment:
WordPress - 6.8-beta1
OS - Windows
Browser - Firefox
Theme: Twenty Twenty
PHP - 8.2.12
Active Plugin: None

Actual Results:

• Issue Resolved With Patch.✅

Screenshots:

• Added Attachment

[shailu25]

Before Patch.

[shailu25]

After Patch.

[audrasjb]

Self assigning for commit.

[audrasjb]

In 60039:

Customize: Improve alignment of theme wrapper.

This changeset updates the class used for the theme wrapper in the customizer, which fixes an alignment issue occuring when searching a theme on WordPress.org from the customizer interface.

Props kharisblank, ankitkumarshah, benazeer, sainathpoojary, mukesh27, kharisblank, parthvataliya, im3dabasia1, sukhendu2002, praful2111, ruchirj, imranhasanraaz, shailu25.
Fixes #62637.

Committed at https://core.trac.wordpress.org/changeset/60039