Make WordPress Core

Opened 10 months ago

Closed 7 months ago

Last modified 7 months ago

#58738 closed defect (bug) (fixed)

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

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 6.4 Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-screenshots has-patch has-testing-info commit
Focuses: accessibility, administration Cc:

Description

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.

Attachments (8)

widgets page js off.png (311.4 KB) - added by afercia 10 months ago.
Widgets page with JS off
post editor and add theme js off.png (198.3 KB) - added by afercia 10 months ago.
Post editor and Add theme pages with JS off
a11y mode link.png (121.7 KB) - added by afercia 10 months ago.
The old link in the Screen Options to enable accessibility mode
a11y mode page.png (524.8 KB) - added by afercia 10 months ago.
The Widgets page in accessibility mode
58738.patch (739 bytes) - added by nihar007 10 months ago.
One patch added
58738.diff (2.0 KB) - added by huzaifaalmesbah 8 months ago.
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.
after apply patch.png (699.1 KB) - added by huzaifaalmesbah 8 months ago.
result after apply patch
58738.1.diff (2.0 KB) - added by huzaifaalmesbah 8 months ago.
update coding standards

Download all attachments as: .zip

Change History (29)

@afercia
10 months ago

Widgets page with JS off

@afercia
10 months ago

Post editor and Add theme pages with JS off

#1 @afercia
10 months ago

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

The old link in the Screen Options to enable accessibility mode

@afercia
10 months ago

The Widgets page in accessibility mode

@nihar007
10 months ago

One patch added

This ticket was mentioned in Slack in #core by chaion07. View the logs.


9 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


9 months ago

#4 @joedolson
9 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 6.4
  • Owner set to joedolson
  • Status changed from new to accepted

#5 @joedolson
9 months ago

  • Keywords needs-testing has-testing-info added

#6 @matthewfarlymn
8 months ago

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.

#7 @bvreeman22
8 months ago

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

Last edited 8 months ago by bvreeman22 (previous) (diff)

@huzaifaalmesbah
8 months ago

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.

#8 @huzaifaalmesbah
8 months ago

Thanks for the help during troubleshooting. @bosskhj

@huzaifaalmesbah
8 months ago

result after apply patch

#9 @bosskhj
8 months ago

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

https://i.ibb.co/h22mBwf/Before-Apply-Patch-and-Disabled-JS.png

After Apply Patch

https://i.ibb.co/F8r4nCm/After-Apply-Patch-and-Disabled-JS.png

https://i.ibb.co/vhWrMDW/After-Apply-Patch-Install-Classic-Widgets-Active-Message-and-Disabled-JS.png

#10 @afercia
8 months ago

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

update coding standards

#11 @huzaifaalmesbah
8 months ago

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

#12 @devmuhib
7 months ago

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

https://i.imgur.com/Rw21vVH.jpeg

After Applying Patch

https://i.imgur.com/KWwWidn.jpeg

This ticket was mentioned in Slack in #core by huzaifaalmesbah. View the logs.


7 months ago

#14 @shailu25
7 months ago

  • Keywords needs-testing removed

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

#15 @shailu25
7 months ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


7 months ago

This ticket was mentioned in PR #5274 on WordPress/wordpress-develop by @joedolson.


7 months ago
#17

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

#18 @joedolson
7 months ago

  • Keywords commit added; needs-testing removed

#19 @joedolson
7 months ago

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

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.

@huzaifaalmesbah commented on PR #5274:


7 months ago
#21

@joedolson i check after commit still not working :(
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/63150399/93788b1b-6ded-4d18-8c18-1d256e782037

Note: See TracTickets for help on using tickets.