Widgets page: Add missing H1 and admin notice when JS is off

[afercia]

Similarly to the Post editor page, the Site editor page, and the Add theme page, the Widgets pages should show a H1 heading and an admin notice when JS support is off.

Currently, the page is just blank. See first screenshot.

In the following screenshots, wee the H1 and admin notices in used on the other pages.

[afercia]

Widgets page with JS off

[afercia]

Post editor and Add theme pages with JS off

[afercia]

To see the widgets page:

• activate a non-block based theme e.g. Twenty Twenty or Twenty Twenty-One
• disable JavaScript support in your browser
• go to /wp-admin/widgets.php

For history:
The widgets page used to have an 'accessibility mode' (sort of 'no-js' mode) available in the Screen Options page. By activating this more, the Widgets page used to show a screen where managing classic widgets was possible with no JS. To my understanding, this 'more' was retired together with the od screen for classic widgets. See screenshots below.

[afercia]

The old link in the Screen Options to enable accessibility mode

[afercia]

The Widgets page in accessibility mode

[nihar007]

One patch added

[matthewfarlymn]

Test Report
This report validates that the JS alert appears when JS is not activated in the browser.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/58738/58738.patch
Environment

• WordPress: Trunk
• PHP: 8.1.9
• Server: nginx
• Database: Local WP
• Browser: Chromium
• Theme: Twenty Eleven
• MU-Plugins: None activated

Actual Results

• ✅ Disabled JS in browser
• ✅ Switched to a theme that uses widgets
• ✅ Notification appears

The patch works as expected.

[bvreeman22]

Tested this on Chrome with Javascript disabled and the Widget H1 is available with this patch https://core.trac.wordpress.org/attachment/ticket/58738/58738.patch.

Environment

WordPress: 6.4-alpha-20230824.111620
PHP: 8.1.9
Server: nginx
Database: Local WP
Browser: Chrome 115.0.5790.173
Theme: Twenty Twenty One
MU-Plugins: None activated

[huzaifaalmesbah]

by using this patch we can solved this issue, also it will show a button for install classic widgets and active plugin in admin widgets area.

[huzaifaalmesbah]

Thanks for the help during troubleshooting. @bosskhj

[huzaifaalmesbah]

result after apply patch

[bosskhj]

Patch Test Report

Description

I have applied for this 58738.diff patch. And it's working perfectly. Thanks for patch @huzaifaalmesbah Thanks for report issue @afercia

Environment

• WordPress: 6.4-alpha-56424
• PHP: 8.1.9
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.9)
• Browser: Chrome 116.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-One 1.9
• MU-Plugins: None activated
• Plugins:
  • Classic Widgets 0.3
  • WordPress Beta Tester 3.5.3

Expected Results

1. ✅ Warning shows in a better way.

Actual Results

1. ✅ Single click install if not installed plugin already.
2. ✅ Single click active if an installed plugin is already.

Screenshot while testing

Before Apply Patch

After Apply Patch

[afercia]

Thank you all for the patch and for the testing. A few thoughts:

1
If we want to provide two Activate / Install links conditionally, then I'd think we should do the same for the edit post screen, for the Classic Editor plugin, to be consistent.

2
How would the blocks-widgets_no_javascript_message filter work now that the code provides 2 different messages?

3
I'd use a more consistent wording. For example, the message for the post editor is:

__( 'The block editor requires JavaScript. Please enable JavaScript in your browser settings, or try the <a href="%s">Classic Editor plugin</a>.' ),

For the Widgets, I'd use a similar wording:

__( 'The block widgets require JavaScript. Please enable JavaScript in your browser settings, or activate the <a href="%s">Classic Widgets plugin</a>.' ),

and

__( 'The block widgets require JavaScript. Please enable JavaScript in your browser settings, or try the <a href="%s">Classic Widgets plugin</a>.' ),

4
Please double check some coding standards, e.g. missing spaces within parenthesis.

[huzaifaalmesbah]

update coding standards

[huzaifaalmesbah]

Thanks for the review and your suggestion. @afercia
I updated the patch with coding standards and already discussed about Classic Editor on #59229

[devmuhib]

Test Report

Environment

OS: Windows 11
WordPress 6.4-alpha-56267-src
PHP 7.4.33
nginx/1.25.2
MySQL 5.7.43
Browser: Chrome 116.0.5845.140
Theme: Twenty Ten
Active Plugins: No plugins activated.

Results

Before applying the patch, the screen was completely blank and after applying patch it shows warning message and direct to the classic widget plugins installation page. Works perfectly.

Before Applying Patch

After Applying Patch

[shailu25]

Test Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/58738/58738.1.diff

Environment:

WordPress - 6.3.1
OS - Windows
Browser - Chrome
Theme: Twenty Twenty One
PHP - 8.0.18
Active Plugin - None

Steps to Reproduce:

1. Activate a non-block based theme e.g. Twenty Twenty or Twenty Twenty-One
2. Disable JavaScript support in your browser
3. Go to /wp-admin/widgets.php

Expected Results:

• Widgets pages should show a H1 heading and an admin notice when JS support is off.

Actual Results:

• On the Widget Page H1 heading and an admin notice is now showing when js support is off.
• Patch is working as Expected. ✅

Screenshots:

Before Patch: ​https://prnt.sc/6ql8pG68eWtn
After Patch : ​https://prnt.sc/lKfWcLa7H0p6

PR updates patch 58738.1.diff

• Fix coding standards issues (indentation, variable alignment)
• Add filter comment
• Change filter name for consistency with site editor
• Use wp_admin_notice() function
• Misc. minor text changes for consistency.

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

[joedolson]

In 56671:

Widgets: Add missing no JS notice in Widgets screen.

Add an H1 heading and an admin notice to display on the Widgets screen when JS is not available. Invite the user to either install or activate the Classic Widgets plugin, as that plugin provides basic functionality without JS.

Props afercia, nihar007, huzaifaalmesbah, joedolson, matthewfarlymn, bvreeman22, bosskhj, devmuhib, shailu25, joedolson.
Fixes #58738.

In r56671

@joedolson i check after commit still not working :(