Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#45453 closed defect (bug) (fixed)

Block Editor: Add a Message if JavaScript is disabled

Reported by: mkaz's profile mkaz Owned by: desrosj's profile 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 6 years ago.
45453.2.diff (1.4 KB) - added by pento 6 years ago.
45453.3.diff (3.0 KB) - added by azaozz 6 years ago.
block-editor-no-js.png (12.7 KB) - added by azaozz 6 years ago.
45453.4.diff (3.0 KB) - added by mkaz 6 years ago.
"Rebase" - Updated diff against latest trunk
45453.5.diff (3.0 KB) - added by desrosj 6 years ago.
45453.6.diff (3.0 KB) - added by desrosj 6 years ago.
alternate-notice-style.png (118.7 KB) - added by desrosj 6 years ago.
45453.7.diff (3.0 KB) - added by desrosj 6 years ago.

Download all attachments as: .zip

Change History (33)

@mkaz
6 years ago

#1 @mkaz
6 years 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 6 years ago by mkaz (next)

#2 @swissspidy
6 years 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
6 years ago

  • Milestone changed from 5.0.1 to 5.0.2

#4 @pento
6 years ago

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

@pento
6 years ago

#5 @pento
6 years 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 years ago

#6 @azaozz
6 years 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 years ago

#8 @desrosj
6 years 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 years ago

"Rebase" - Updated diff against latest trunk

#9 @mkaz
6 years ago

  • Keywords needs-refresh removed

@desrosj
6 years ago

#10 @desrosj
6 years 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 years 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 years 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 years ago

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

#14 @ocean90
6 years 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 years ago

#16 @desrosj
6 years ago

  • Owner changed from pento to desrosj

@desrosj
6 years ago

#17 @desrosj
6 years 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 years ago

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

#19 @desrosj
6 years 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 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backporting to 5.0.

#21 @desrosj
6 years ago

  • Keywords fixed-major added; commit removed

#22 @desrosj
6 years 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 years ago

  • Keywords fixed-major removed

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