Widgets page: Add missing admin notice when JS is off

[huzaifaalmesbah]

This issue was resolved in ticket #58738. But now when I check I see Properly is not working.

Now only show h1 heading but admin notice missing.

[hellofromTonya]

Hello @huzaifaalmesbahm,

Welcome back to Core's Trac :)

Pulling this issue into 6.4 for investigation, as it may have been introduced in the cycle with [56671] / #58738. Adding needs-testing for testers to reproduce and provide test report.

cc @joedolson for awareness.

[hellofromTonya]

Reproduce Test Report: Can reproduce on Firefox with 6.4 Beta 4 🐞 ❌

[hellofromTonya]

Testing Instructions

These steps define how to reproduce the issue, and indicate the expected behavior.

Steps to Reproduce

1. Disable JS in the browser. In Firefox:
   1. Go to about:config in the browser URL field.
   2. Click/select "Accept the Risk and Continue" button.
   3. In the text field, type: javascript.enabled.
   4. In the far right column, click/select the icon to set that property to false.
2. In Appearance > Themes, activate a non-block theme, such as Twenty Twenty-One (TT1).
3. Navigate to Appearance > Widgets.
4. 🐞 Notice the H1 appears, but not the notice message.

Expected Results

When testing a patch to validate it works as expected:

• ✅ The notice message should also appear.

The block widgets require JavaScript. Please enable JavaScript in your browser settings, or install the Classic Widgets plugin.

When reproducing a bug:

• ❌ Error condition occurs.

Test Report Icons:
🐞 <= Indicates where issue ("bug") occurs.
✅ <= Behavior is expected.
❌ <= Behavior is NOT expected.

[hellofromTonya]

Reproduction Report

This report validates that the issue can be reproduced.

Environment

• OS: macOS
• Web Server: Nginx
• PHP: 7.4 and 8.1
• WordPress: 6.4 Beta 4
• Browser: Firefox
• Theme: Twenty Twenty-Two
• Active Plugins:
  • WordPress Beta Tester 3.5.4

Actual Results

• ✅ Error condition occurs (reproduced).

Additional Notes

The HTML for the notice is there, but the CSS from load-styles.php

.widgets-php .notice{
  display:none !important;
}

Supplemental Artifacts

See it in action no-js-notice-not-showing.gif​

[hellofromTonya]

The ​CSS that hides the notice is in the Gutenberg edit-widgets package. This code is maintained within Gutenberg, i.e. Core cannot directly change its code.

Thus, I reported the issue upstream in the Gutenberg repo and added it to the 6.4 Editor issues board.

​https://github.com/WordPress/gutenberg/issues/55384

@huzaifaalmesbah I invite you to contribute to the issue in Gutenberg including helping to test a bugfix there.

I'll close this issue as reported upstream.

Why not leave it open?
Core itself cannot directly fix the issue. The fix will happen in Gutenberg. Once fixed, the packages are published and then the new package versions are updated in Core's package.json (which is tracked in #59411). As this issue is now being tracked in Gutenberg, IMO closing this ticket helps to shift tracking, discussion, and contribution there for its resolution.

[hellofromTonya]

Update: A ​fix was merged in Gutenberg and will be included in the package updates for 6.4 RC1.