WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 6 months ago

Last modified 5 months ago

#45453 closed defect (bug) (fixed)

Block Editor: Add a Message if JavaScript is disabled

Reported by: mkaz Owned by: desrosj
Milestone: 5.0.3 Priority: normal
Severity: normal Version: 5.0
Component: Editor Keywords: has-patch has-screenshots
Focuses: Cc:

Description

The editor shows a blank page if JavaScript is disabled.

It looks like PR 11642 from Gutenberg plugin didn't make it back to core.
https://github.com/WordPress/gutenberg/pull/11642

Attachments (9)

45453.diff (917 bytes) - added by mkaz 7 months ago.
45453.2.diff (1.4 KB) - added by pento 6 months ago.
45453.3.diff (3.0 KB) - added by azaozz 6 months ago.
block-editor-no-js.png (12.7 KB) - added by azaozz 6 months ago.
45453.4.diff (3.0 KB) - added by mkaz 6 months ago.
"Rebase" - Updated diff against latest trunk
45453.5.diff (3.0 KB) - added by desrosj 6 months ago.
45453.6.diff (3.0 KB) - added by desrosj 6 months ago.
alternate-notice-style.png (118.7 KB) - added by desrosj 6 months ago.
45453.7.diff (3.0 KB) - added by desrosj 6 months ago.

Download all attachments as: .zip

Change History (33)

@mkaz
7 months ago

#1 @mkaz
7 months ago

I'm added a patch which includes the code from the Gutenberg PR 11642
which displays a message and a link to the Classic Editor plugin if JavaScript is disabled.

The patch also includes the translation fix for the URL from Gutenberg PR 12013
Props to @dixitadusara and @swissspidy for that contribution.

https://github.com/WordPress/gutenberg/pull/12013

Version 0, edited 7 months ago by mkaz (next)

#2 @swissspidy
7 months ago

  • Component changed from General to Editor
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.0.1
  • Version set to 5.0

#3 @pento
7 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#4 @pento
6 months ago

  • Owner set to pento
  • Status changed from new to assigned

@pento
6 months ago

#5 @pento
6 months ago

  • Keywords dev-feedback added
  • Milestone changed from 5.0.2 to 5.0.3

Thanks for the patch, @mkaz!

45453.2.diff makes some adjustments:

  • Use the hide-if-js class instead of <noscript>.
  • Simplify the inline CSS by hiding the #editor div.
  • Expand the message to recommend installing JavaScript.
  • Apply a filter to the message, so the Classic Editor plugin can filter it appropriately.

I'm not wild about the inline CSS, but I'm also not aware of any existing class we could use the similar effect. Other screens that require JS (eg, the theme installer) display the <h1>, so don't have this squished margin problem.

@azaozz: Will this filter do the job for the Classic Editor plugin to use?

@azaozz
6 months ago

#6 @azaozz
6 months ago

Will this filter do the job for the Classic Editor plugin to use?

Sure. Can replace the text and add a link to the user settings to set Classic as default.

Was wondering if we should also include the screen title there (will add a screenshot). Makes it a bit more friendlier.

While looking at that noticed some inconsistencies with the global $title in edit-form-blocks.php. It resets the $title to Edit Post at the top, then never uses it. Then uses $post_type_object->labels->edit_item in the hidden a11y H1. Fixed that in 45453.3.diff to properly display either "Edit Post" or "Add New Post" but may be worth a new ticket.

In 45453.3.diff:

  • Add the screen title when displaying the error message about no js.
  • Fix the global $title and use it on the edit-form-blocks.php.

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


6 months ago

#8 @desrosj
6 months ago

  • Keywords needs-refresh added

Patch is currently failing to apply to trunk. I think it may have been written before 5.0 was merged.

@mkaz
6 months ago

"Rebase" - Updated diff against latest trunk

#9 @mkaz
6 months ago

  • Keywords needs-refresh removed

@desrosj
6 months ago

#10 @desrosj
6 months ago

45453.5.diff updates Block Editor to be a proper noun for consistency. Also, I changed the notice classes to use the alternation styling, which is designed for use against white backgrounds. It provides better contrast and makes the notices stand out more.

#11 @ocean90
6 months ago

  • Keywords needs-screenshots needs-refresh added; dev-feedback removed

"Block Editor" should be "block editor", without capitalizing the first letters. See also https://make.wordpress.org/core/handbook/best-practices/spelling/.

#12 @desrosj
6 months ago

Thanks @ocean90. I didn’t know about that page in the handbook. I had originally seen this in #45634. We’ll just have to clarify there that ‘block editor’ should be lowercase.

@desrosj
6 months ago

#13 @desrosj
6 months ago

  • Keywords needs-refresh removed

45453.6.diff fixes the casing on "block editor". Also, attaching a screenshot of the alternate version in my patch.

Last edited 6 months ago by desrosj (previous) (diff)

#14 @ocean90
6 months ago

  • Keywords commit has-screenshots added; needs-screenshots removed

/** Translators: should be /* translators: otherwise 45453.6.diff looks good.

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


6 months ago

#16 @desrosj
6 months ago

  • Owner changed from pento to desrosj

@desrosj
6 months ago

#17 @desrosj
6 months ago

45453.7.diff fixes the translator comment mentioned above, and also changes printf to sprintf. The trailing 182 in alternate-notice-style.png was the result of the string being output with printf and the result (character count of the formatted string) being echoed below that.

#18 @audrasjb
6 months ago

@desrosj I'm happy to confirm 45453.7.diff applies well and fixes the string length output issue, thanks!

#19 @desrosj
6 months ago

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

In 44437:

Block Editor: Display notice to the user when JavaScript is disabled.

Currently, when viewing the block editor with JavaScript disabled, the user sees a blank admin page with the admin menu sidebar. This adds an admin notice informing the user that JavaScript is required for the new block editor.

Props mkaz, pento, azaozz, ocean90, desrosj.
Fixes #45453.

#20 @desrosj
6 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backporting to 5.0.

#21 @desrosj
6 months ago

  • Keywords fixed-major added; commit removed

#22 @desrosj
6 months ago

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

In 44440:

Block Editor: Display notice to the user when JavaScript is disabled.

Currently, when viewing the block editor with JavaScript disabled, the user sees a blank admin page with the admin menu sidebar. This adds an admin notice informing the user that JavaScript is required for the new block editor.

Props mkaz, pento, azaozz, ocean90, desrosj.

Merges [44437] to the 5.0 branch.
Fixes #45453.

#23 @desrosj
6 months ago

  • Keywords fixed-major removed

#24 @SergeyBiryukov
5 months ago

In 44665:

I18N: Update translator comment for the notice displayed when viewing the block editor with JavaScript disabled.

A URL in the comment creates an impression that the link is not translatable.

See #45453, #45856.

Note: See TracTickets for help on using tickets.