Search Button Position Breaks When JavaScript is Turned Off

[devmuhib]

When we search new plugins for installation, it shows the search bar properly. But if I visit the page after turning off the javascript, it breaks the style.

[sabernhardt]

uses the same styles on the button as the select element and search text input

[sabernhardt]

Hi and thanks for the report!

For a simple fix, I added the top margin and related styles to the submit button.

[huzaifaalmesbah]

Test Report

Description

@sabernhardt Thanks for adding patch. This patch looks good for me.

Patch tested: 59967.diff​

Environment

• WordPress: 6.5-alpha-56966-src
• PHP: 7.4.33
• Server: nginx/1.25.2
• Database: mysqli (Server: 5.7.43 / Client: mysqlnd 7.4.33)
• Browser: Chrome 118.0.0.0
• OS: macOS
• Theme: Twenty Twenty 2.4
• MU Plugins: None activated
• Plugins:
  • Gutenberg 17.1.3
  • Test Reports 1.0.0

Actual Results

This Issue resolved with patch ✅

Screenshots

Before Apply Patch	After Apply Patch ✅

[devmuhib]

Issue Reproduction & Testing Instruction

1. Go to plugins > add new plugins

2. Disable JavaScript in your browser

3. If you experience the same issue mentioned in the image

4. Apply patch mentioned above

5. Provide Test Information Here

To write test report, you can use this documentation. ​https://make.wordpress.org/test/handbook/test-reports/patch-testing/.

[hellofromTonya]

Test Report: Before and After in Firefox and Edge

[hellofromTonya]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: 59967.diff​

Environment

• OS: macOS 14.1.1
• Web Server: Nginx
• PHP: 7.4.30
• WordPress: 6.4.1
• Browser: Firefox 120.0 and Microsoft Edge 119.0.2151.72
• Theme: Twenty Twenty-Four
• Active Plugins: None

Actual Results

When reproducing a bug:

• ❌ Search button is positioned too high.

When testing a patch to validate it works as expected:

• ✅ Issue resolved with patch.

Additional Notes

• Did not test in RTL.

Supplemental Artifacts

59967-firefox-edge-test-report.png​

[hellofromTonya]

I too can reproduce the reported issue.

@sabernhardt Should the same CSS change also be done in the RTL file, common-rtl.css? I'm thinking yes, but want to confirm with you. If yes, I can make the changes at commit (unless you prefer to create a new patch).

Some ticket updates:

• Self-assigning for review and commit.
• Setting the Version to 5.5.0 as the CSS was introduced via [48281] / #49231.
• Marking has-testing-info as the step-by-step instructions are provided (Thank you :)).
• Marking changes-requested to indicate the same change is likely needed in the RTL file.

[sabernhardt]

with patch: multisite plugin search submit also has the margin, in RTL direction

[sabernhardt]

The patch worked in RTL and in multisite without JavaScript. However, the specificity of .wp-filter .search-form.search-plugins .button is too high because it overrides .js.wp-core-ui .hide-if-js { display: none; } when JavaScript is enabled.

[sabernhardt]

Adding the no-js class seems to work.

.no-js .wp-filter .search-form.search-plugins .button

[sabernhardt]

adding .no-js class

[sabernhardt]

Now the change is only in the scope of the search form when JS is off.

[hellofromTonya]

Good job @sabernhardt. Thank you for refining the patch and testing it on multi-site and RTL. It's ready for commit.

[hellofromTonya]

In 57144:

Plugins: Fix Add Plugin search button pos when JS off.

When JavaScript is disabled, the Add Plugins screen's search button position was too high in comparison to the search text field. This fix reuses the CSS declaration to keep field and button aligned.

By targeting the .no-js class, the CSS specificity is not impacted when JavaScript is enabled.

Follow up to [48281], [30830].

Props devmuhib, sabernhardt, huzaifaalmesbah, hellofromTonya.
Fixes #59967.