WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 11 months ago

Last modified 11 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:
PR Number:

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 13 months ago.
45453.2.diff (1.4 KB) - added by pento 12 months ago.
45453.3.diff (3.0 KB) - added by azaozz 12 months ago.
block-editor-no-js.png (12.7 KB) - added by azaozz 12 months ago.
45453.4.diff (3.0 KB) - added by mkaz 12 months ago.
"Rebase" - Updated diff against latest trunk
45453.5.diff (3.0 KB) - added by desrosj 11 months ago.
45453.6.diff (3.0 KB) - added by desrosj 11 months ago.
alternate-notice-style.png (118.7 KB) - added by desrosj 11 months ago.
45453.7.diff (3.0 KB) - added by desrosj 11 months ago.

Download all attachments as: .zip

Change History (33)

@mkaz
13 months ago

#1 @mkaz
13 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 @dency and @swissspidy for that contribution.

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

Last edited 13 months ago by mkaz (previous) (diff)

#2 @swissspidy
13 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
12 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#4 @pento
12 months ago

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

@pento
12 months ago

#5 @pento
12 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
12 months ago

#6 @azaozz
12 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.


12 months ago

#8 @desrosj
12 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
12 months ago

"Rebase" - Updated diff against latest trunk

#9 @mkaz
12 months ago

  • Keywords needs-refresh removed

@desrosj
11 months ago

#10 @desrosj
11 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
11 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
11 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
11 months ago

#13 @desrosj
11 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 11 months ago by desrosj (previous) (diff)

#14 @ocean90
11 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.


11 months ago

#16 @desrosj
11 months ago

  • Owner changed from pento to desrosj

@desrosj
11 months ago

#17 @desrosj
11 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
11 months ago

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

#19 @desrosj
11 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
11 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backporting to 5.0.

#21 @desrosj
11 months ago

  • Keywords fixed-major added; commit removed

#22 @desrosj
11 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
11 months ago

  • Keywords fixed-major removed

#24 @SergeyBiryukov
11 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.