Skip to content

Fix: Improve consistency of the Dashboard widgets when no-js #12677

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hbhalodia wants to merge 19 commits into
base: trunk
Choose a base branch
from
Open

Fix: Improve consistency of the Dashboard widgets when no-js #12677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
70ce162
Fix inconsistencies for dashbaord widget if no js
hbhalodia Jul 24, 2026
9d8a50c
Remove inconsistency from message
hbhalodia Jul 24, 2026
f9da145
Fix phpcs fixes
hbhalodia Jul 24, 2026
dd36c5b
Fix copilot feedbacks
hbhalodia Jul 24, 2026
a66d8af
Fix copilot feedbacks
hbhalodia Jul 24, 2026
8fcf993
Add hide-if-no-js on the progess div
hbhalodia Jul 24, 2026
52208ec
Merge branch 'trunk' into fix/issue-65692
hbhalodia Jul 27, 2026
8d27ed0
Merge branch 'trunk' into fix/issue-65692
hbhalodia Aug 10, 2026
f1432b9
Merge branch 'trunk' into fix/issue-65692
hbhalodia Aug 20, 2026
cae909f
Merge branch 'fix/issue-65692' of github.com:hbhalodia/wordpress-deve…
hbhalodia Aug 20, 2026
2dbb057
Update no-recent draft message to use p tag and update css for the same
hbhalodia Aug 20, 2026
25c01b2
Update the visiblity of entire site-health widget when there is no-js
hbhalodia Aug 20, 2026
27aa72d
Remove the hide-if-no-js from site-health markup as entire widget is …
hbhalodia Aug 20, 2026
1466133
Update the function doc comment
hbhalodia Aug 20, 2026
b94a890
Fix phpcs feedbacks
hbhalodia Aug 20, 2026
92ddb29
Add no drafts message for with and without js
hbhalodia Aug 21, 2026
3590029
Remove the change for message from cached widget
hbhalodia Aug 21, 2026
5522b0d
Hide the site health widget when js is off using css
hbhalodia Aug 21, 2026
8b8d8b2
Merge branch 'trunk' into fix/issue-65692
hbhalodia Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/wp-admin/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -792,7 +792,8 @@ body #dashboard-widgets .postbox form .submit {
margin: 12px;
}

#dashboard_quick_press .drafts {
#dashboard_quick_press .drafts,
#dashboard_quick_press .no-drafts {
padding: 10px 0 0;
}

Expand Down Expand Up @@ -827,7 +828,8 @@ body #dashboard-widgets .postbox form .submit {

/* Dashboard Quick Draft - Drafts list */

.js #dashboard_quick_press .drafts {
.js #dashboard_quick_press .drafts,
.js #dashboard_quick_press .no-drafts {
border-top: 1px solid #f0f0f1;
}

Expand Down Expand Up @@ -874,7 +876,8 @@ body #dashboard-widgets .postbox form .submit {

#dashboard-widgets h4, /* Back-compat for pre-4.4 */
#dashboard-widgets h3,
#dashboard_quick_press .drafts h2 {
#dashboard_quick_press .drafts h2,
#dashboard_quick_press .no-drafts p {
margin: 0 12px 8px;
padding: 0;
font-size: 14px;
Expand Down
4 changes: 4 additions & 0 deletions src/wp-admin/css/site-health.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,10 @@ are styled in the Privacy section of edit.css */
}

/* Styling unique to the dashboard widget. */
.no-js #dashboard_site_health {
display: none;
}

#dashboard_site_health .site-health-details {
padding-left: 16px;
}
Expand Down
7 changes: 5 additions & 2 deletions src/wp-admin/includes/dashboard.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -656,6 +656,9 @@ function wp_dashboard_recent_drafts( $drafts = false ) {

$drafts = get_posts( $query_args );
if ( ! $drafts ) {
echo '<div class="no-drafts">';
echo '<p>' . __( 'There are no recent drafts.' ) . '</p>';
echo '</div>';

@afercia afercia Aug 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I like this message and I'd consider to show it also when JS is on.
It shouldn't be a H2 though. Headings should only be used to identify a section of content and htere's no content here. A paragraph would be best.

@hbhalodia hbhalodia Aug 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @afercia, Thanks for the review,

I like this message and I'd consider to show it also when JS is on.

When JS is on, we are already showing the input form and when there are drafts that are already been show as expected. If there are no drafts we are not showing anything as we have input form which works as expected. Do you want to add extra messaging? but I see there is not point in terms of UX as it is since long time and users did'nt notice that.

Screenshot 2026-08-20 at 3 57 02 PM

It shouldn't be a H2 though. Headings should only be used to identify a section of content and htere's no content here. A paragraph would be best.

I would review this as we may need to update some styles here when using paragraph. Will update the PR with the same.

@hbhalodia hbhalodia Aug 20, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: Have fixed to use <p> tag and update a style same as <h2> which was used to show the below message where there are draft and js is enabled.

Screenshot 2026-08-20 at 4 07 51 PM

Thanks,

@afercia afercia Aug 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When JS is on, we are already showing the input form and when there are drafts that are already been show as expected. If there are no drafts we are not showing anything as we have input form which works as expected

Yes, I know. Personally, I think the 'no drafts' message is useful and it should be shown anyways:

Screenshot 2026-08-21 at 08 52 11

@hbhalodia hbhalodia Aug 21, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @afercia, I have implemented the suggestion, as it would only be better for users to get a proper messaging.

See the commit - 92ddb29

return;
}
}
Expand Down Expand Up @@ -1372,7 +1375,7 @@ function wp_dashboard_events_news() {
* @since 4.8.0
*/
function wp_print_community_events_markup() {
$community_events_notice = '<p class="hide-if-js">' . __( 'This widget requires JavaScript.' ) . '</p>';
$community_events_notice = '<p class="hide-if-js">' . __( 'The WordPress Events and News feeds require JavaScript.' ) . '</p>';
$community_events_notice .= '<p class="community-events-error-occurred" aria-hidden="true">' . __( 'An error occurred. Please try again.' ) . '</p>';
$community_events_notice .= '<p class="community-events-could-not-locate" aria-hidden="true"></p>';
Comment thread
hbhalodia marked this conversation as resolved.

Expand Down Expand Up @@ -1998,7 +2001,7 @@ function wp_dashboard_site_health() {
$issues_total = $issue_counts['recommended'] + $issue_counts['critical'];
?>
<div class="health-check-widget">
<div class="health-check-widget-title-section site-health-progress-wrapper loading hide-if-no-js">
<div class="health-check-widget-title-section site-health-progress-wrapper loading">

@afercia afercia Aug 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would consider to entirely hide the 'Site Health Status' widget when JS is off. The only action there is clicking the link to the Site Health page, which doesn't show anything when JS is off... showing it dosn't make much sense. Thoughts?

Image

@hbhalodia hbhalodia Aug 20, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this makes sense to me, Because users won't be shown anything even if they visit the page showed in the message, so that's good idea to not display the widget entirely when there is no-js.

Though there is no any direct way, but we may need to use filter add add the hide-if-no-js class to main container of the widget, Something like below.

diff --git a/src/wp-admin/includes/dashboard.php b/src/wp-admin/includes/dashboard.php
index daa6913a92..0b193eae74 100644
--- a/src/wp-admin/includes/dashboard.php
+++ b/src/wp-admin/includes/dashboard.php
@@ -65,6 +65,9 @@ function wp_dashboard_setup() {
 		wp_enqueue_style( 'site-health' );
 		wp_enqueue_script( 'site-health' );
 
+		// The widget's data is loaded via JavaScript, so hide the whole widget when JavaScript is disabled.
+		add_filter( 'postbox_classes_dashboard_dashboard_site_health', 'wp_dashboard_site_health_postbox_class' );
+
 		wp_add_dashboard_widget( 'dashboard_site_health', __( 'Site Health Status' ), 'wp_dashboard_site_health' );
 	}
 
@@ -1820,6 +1823,23 @@ function dashboard_browser_nag_class( $classes ) {
 	return $classes;
 }
 
+/**
+ * Adds a class to the Site Health dashboard widget's meta box.
+ *
+ * The widget's data is loaded via JavaScript, so the whole widget is hidden
+ * when JavaScript is disabled.
+ *
+ * @since 7.1.0
+ *
+ * @param string[] $classes Array of meta box classes.
+ * @return string[] Modified array of meta box classes.
+ */
+function wp_dashboard_site_health_postbox_class( $classes ) {
+	$classes[] = 'hide-if-no-js';
+
+	return $classes;
+}
+
 /**
  * Checks if the user needs a browser update.
  *

I am updating the PR for now, we can revert the change if not needed.

Thanks,

@afercia afercia Aug 21, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The filter is unnecessary. Reminder that when JS is off, the body element has a CSS class no-js.
The widget can be targeted via CSS: .no-js #dashboard_site_health { ... }

@hbhalodia hbhalodia Aug 21, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I have update to use CSS instead of adding the filter.

<div class="site-health-progress">
<svg aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
Expand Down
Loading