Make WordPress Core

Opened 5 months ago

Closed 5 months ago

#59967 closed defect (bug) (fixed)

Search Button Position Breaks When JavaScript is Turned Off

Reported by: devmuhib's profile devmuhib Owned by: hellofromtonya's profile hellofromTonya
Milestone: 6.5 Priority: normal
Severity: normal Version: 5.5
Component: Plugins Keywords: has-screenshots has-testing-info has-patch commit
Focuses: css, administration Cc:

Description

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.

https://i.imgur.com/TmULjEL.png

Attachments (4)

59967.diff (516 bytes) - added by sabernhardt 5 months ago.
uses the same styles on the button as the select element and search text input
59967-firefox-edge-test-report.png (339.2 KB) - added by hellofromTonya 5 months ago.
Test Report: Before and After in Firefox and Edge
plugin-search-multisite-rtl.png (9.2 KB) - added by sabernhardt 5 months ago.
with patch: multisite plugin search submit also has the margin, in RTL direction
59967.1.diff (523 bytes) - added by sabernhardt 5 months ago.
adding .no-js class

Download all attachments as: .zip

Change History (16)

#1 @huzaifaalmesbah
5 months ago

  • Keywords has-screenshots needs-patch added

@sabernhardt
5 months ago

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

#2 @sabernhardt
5 months ago

  • Component changed from General to Plugins
  • Focuses css administration added; accessibility javascript removed
  • Keywords has-patch added; needs-patch removed

Hi and thanks for the report!

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

#3 @huzaifaalmesbah
5 months ago

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:
    • Test Reports 1.0.0

Actual Results

This Issue resolved with patch ✅

Screenshots

Before Apply Patch After Apply Patch ✅
https://i.ibb.co/G3KqscN/Screenshot-2023-11-28-at-12-04-42-PM.png https://i.ibb.co/zhyzbbk/Screenshot-2023-11-28-at-12-04-11-PM.png


Version 0, edited 5 months ago by huzaifaalmesbah (next)

#4 @devmuhib
5 months ago

Issue Reproduction & Testing Instruction

  1. Go to plugins > add new plugins
  1. Disable JavaScript in your browser
  1. If you experience the same issue mentioned in the image
  1. Apply patch mentioned above
  1. Provide Test Information Here

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

#5 @sabernhardt
5 months ago

  • Milestone changed from Awaiting Review to 6.5

@hellofromTonya
5 months ago

Test Report: Before and After in Firefox and Edge

#6 @hellofromTonya
5 months ago

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

#7 @hellofromTonya
5 months ago

  • Keywords changes-requested has-testing-info added
  • Owner set to hellofromTonya
  • Status changed from new to accepted
  • Version set to 5.5

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

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

#8 @sabernhardt
5 months ago

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.

Last edited 5 months ago by sabernhardt (previous) (diff)

#9 @sabernhardt
5 months ago

  • Keywords needs-patch added; has-patch removed

Adding the no-js class seems to work.

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

@sabernhardt
5 months ago

adding .no-js class

#10 @sabernhardt
5 months ago

  • Keywords has-patch added; changes-requested needs-patch removed

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

#11 @hellofromTonya
5 months ago

  • Keywords commit added

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

#12 @hellofromTonya
5 months ago

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

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.

Note: See TracTickets for help on using tickets.